The code sandboxes are excellent! Very useful article! My only question is now, what happens to SVGs that have more than just the path, as in other elements nested inside such as:

<defs>
<filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox">
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/>
<feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>

I wonder how you’d deal with those elements?

Writer of code, blogs and things that live on the web. Pragmatic doer, Lego fan, Mac user, cool nerd. JavaScript and Flutter enthusiast. HMH.engineering editor.

Writer of code, blogs and things that live on the web. Pragmatic doer, Lego fan, Mac user, cool nerd. JavaScript and Flutter enthusiast. HMH.engineering editor.