3 ms·
> There are some CSS limitations though: when using SVG this way, with <use> linking to a <symbol>, the image gets injected in Shadow DOM and we lose some CSS c
by intrasight 10y ago
> There are some CSS limitations though: when using SVG this way, with <use> linking to a <symbol>, the image gets injected in Shadow DOM and we lose some CSS capabilities.
Which is why SVG "symbol" and "use" are best avoided. Your client will inevitably ask you to style an icon and you won't be able to. Avoid the shadow DOM and you'll have full CSS capabilities.
- sago 10y agoBest avoided for what? At worst, SVG is as styleable as any graphic or font, at best much more so. You shouldn't use SVG for things with first-class support in HTML, sure, but for anything else it is a good solution, afaict. Can you give a counter-example?
- intrasight 10y agoI was specifically talking about "symbol" and "use" - which have very limited CSS support.
- xienze 10y ago> Your client will inevitably ask you to style an icon and you won't be able to. It's not that you can't style it, it's that you can only style _the entire image_. Which means it's a perfectly good replacement for icon fonts since "styling" an icon font is limited to changing the size and color. You can do that and more with an SVG included via <use>.