Hacker News Reader

Comment by iamben | Hacker News Reader

I think my biggest issue was(/is? ..and please reply if anyone knows a decent way around this) using an SVG icon is great - scalable, small, etc., but if you want full control over it in the CSS (for fills, outlines, hovers) you have to inline the SVG. If you're using it as part of the navigation or whatever, you have to load it over and over on every page.

It would be amazing to be able to load an SVG icon as an image with a class, and then be able to use CSS to manipulate the image (change the colour etc) but know the image is cached by the browser.

View on HN

One way to do it is to have an external file with all your svg data that you append to the dom afterwards. Wherever you want to use a svg, just reference the appended svgs:

    <svg><use xlink:href='#svg-id'></use></svg>

Here's a quick example I threw together: http://syd.jjcm.org/svgCacheTest

If you click on the folder icon you can see it being changed by the css.

Thanks for posting this - I had been running into the same issues above.

Interesting, thanks. Alas I think this solution still has its drawbacks in that you can't target classes within the SVG. Example: https://css-tricks.com/svg-use-with-external-reference-take-...

You may be interested in this then: https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df

If you inline using JS, you can use standard styling / classes to modify the display. Since it happens via standard browser requests, you get normal caching behaviour. One bad thing though is that you have to wait for the JS to execute, so there may be some blinking.

I guess you could probably turn the svg into a font and style it with css.

I bet you could do some kludgey stuff to get it to load. An idea that springs to mind is to include your svg as an image in the page (but hidden, like a sprite map) and then use the 'use' tag referencing ids in the hidden image wherever you wanted to place the sprites.

Either way, you currently have to work around a (seemingly arbitrary) restriction with browsers not allowing CSS on svg images.

Reply on news.ycombinator.com