5 ms·

For those curious about icon fonts versus SVG, though icon fonts can be easier for the developer to use, there are drawbacks for your users (especially in acces

For those curious about icon fonts versus SVG, though icon fonts can be easier for the developer to use, there are drawbacks for your users (especially in accessibility). But don’t take my word for it: https://css-tricks.com/icon-fonts-vs-svg/ https://css-tricks.com/icon-fonts-vs-svg/ “It all comes down to browser support. If you can go IE 9+ / Android 3+, inline SVG is better at pretty much everything than icon fonts. If you need the deeper browser support, I feel like an inline SVG fallback would be too big of a pain to be worth it (maintaining a PNG copy, inserting an additional element to display PNG version, hiding SVG element… it’s weighty).”

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 ago
  Sounds like a good time to use shadow DOM, perhaps. That could isolate your IDs… although it would complicate the style cascade...
leipert 6y ago
Mildly related but very annoying. Chrome 84 (and Edge?!) has a regression related to SVG icon sprites: https://bugs.chromium.org/p/chromium/issues/detail?id=1107442 https://bugs.chromium.org/p/chromium/issues/detail?id=110744... We have fixed it by employing an old technique which inlines icons from a sprite file: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38304 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38304

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 ago
Sounds like a good time to use shadow DOM, perhaps. That could isolate your IDs… although it would complicate the style cascade...

leipert 6y ago

Mildly related but very annoying. Chrome 84 (and Edge?!) has a regression related to SVG icon sprites: https://bugs.chromium.org/p/chromium/issues/detail?id=1107442 https://bugs.chromium.org/p/chromium/issues/detail?id=110744... We have fixed it by employing an old technique which inlines icons from a sprite file: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38304 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38304