3 ms·
Giving inline SVGs a full green score on “weird failures” isn’t right. For example, plenty of SVG features, like masks and patterns, use references to ID attri
by tobr 6y ago
Giving inline SVGs a full green score on “weird failures” isn’t right.
For example, plenty of SVG features, like masks and patterns, use references to ID attributes to compose the effect. If you include multiple inline SVGs on the same page, you now need to make sure that none of them use the same ID for an element, or else your masks can break in unexpected and hard-to-debug ways as some browsers get confused about which element you intended to use as a mask.
If you’re exporting your SVG from a graphics program it’s not unlikely that they’re generating IDs by the same deterministic method on every export, creating such ID collisions that you’re unaware of.
- thomasqbrady 6y agoSounds like a good time to use shadow DOM, perhaps. That could isolate your IDs… although it would complicate the style cascade...