5 ms·

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 wa

by iamben 10y ago

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.

viraptor 10y ago
You may be interested in this then: https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df 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.
jjcm 10y ago
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 http://syd.jjcm.org/svgCacheTest If you click on the folder icon you can see it being changed by the css.
- rrrx3 10y ago
  Thanks for posting this - I had been running into the same issues above.
- iamben 10y ago
  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-2/ https://css-tricks.com/svg-use-with-external-reference-take-...
aidos 10y ago
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.

by iamben 10y ago

viraptor 10y ago

You may be interested in this then: https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df 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.

jjcm 10y ago

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 http://syd.jjcm.org/svgCacheTest If you click on the folder icon you can see it being changed by the css.

rrrx3 10y ago
Thanks for posting this - I had been running into the same issues above.
iamben 10y ago
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-2/ https://css-tricks.com/svg-use-with-external-reference-take-...

aidos 10y ago

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.