Hacker News Reader

Comment by ravenstine | Hacker News Reader

I was barely awake when just having this problem last night, but SVG sprites(a bunch of icons in 1 s SVG file) have very limited support in CSS. In Chrome, it doesn't even work to specify a sprite symbol ID as a background URL, for example, even though that would be the most straight forward way to use sprites as icons IMO. CSS icons can have the same effect of having the icons being bundled in a single request while actually working. lol

View on HN

If you escape the unsafe characters it works everywhere. I've been doing this for ages.

Source: https://codepen.io/yoksel/details/JDqvs/

Ah, that's a pretty decent workaround. Though I'm not a fan of putting encoding encoded information into style sheets, I'm not exactly against it either.

Though the method I wanted to use would work if it weren't for the existing icons symbols inside of sprites, which seems to be only supported in Firefox's CSS.

For example: ``` <svg> <symbol id="helloworld">[... a bunch of paths]</symbol> <symbol id="anothersym">[...]</symbol> </svg> ```

``` label:before { background: url('/path/to/my.svg#helloworld') no-repeat; } ```

I could, of course, break the icons out of the symbol tags, as done here: https://css-tricks.com/svg-fragment-identifiers-work/

It's just disappointing that while referencing symbols works just fine with a <use xlink:href> tag, it doesn't work as a CSS url property value. I'm not sure why that would be.

EDIT: Yes, I'm sorry, I know this isn't Stack Overflow. Though I think the above(without symbol tags of course) may be the best alternative to pure-CSS icons if your graphics are more complicated.

If you're wanting to use fragment identifiers to refer to multiple sprites in a single SVG, that issue was fixed in Chrome in November of last year.[1] I'm not sure if the fix has propagated widely enough to be considered practical for production use, but it's at least a move in the right direction.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=128055

Reply on news.ycombinator.com