Things Which Seem Really Cool But Are Actually Quite Bad, new entries:

2456. The <use> element (no access to styling of individual paths, so negates a major advantage of inline SVG)
2457. Shadow DOM (inheritance still happens, but mostly when you don't want it to)

@heydon Oh yes. Been there, done that. -_-

My article for covers "Inline SVG Sprites"… may be I should write about that pitfall, too. 🤔

@heydon still good for UI icons with little manipulation though right?

@DavidDarnes I'm not sure. So long as you can get them to support currentColor, yes. And I do believe that's possible.

@heydon @DavidDarnes It totally is.
My way of using it for icon systems is to have an inline SVG sprite and then apply the styles I saved in this codepen:

@heydon Interesting, I didn't know that about individual SVG paths. I guess as long as you're styling the whole thing, though, <use> is fine? I use that in Pinafore for the icon system, and I'm able to change the color, animate the icons, etc.

@nolan Yeah, you can affect the SVG itself, just nothing inside its Shadow DOM.

@nolan Follow up on this: you have limited control by explicitly using the `inherit` keyword on child paths/shapes.

@heydon @nolan I think the most you can do is use `currentColor` and `inherit` to get two points of customization for `use` elements?

Sign in to participate in the conversation

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!