May 2012
6 posts
Useful modernizr style technique for detecting svg support. It puts an image in the page with a Base64 encoded data-uri SVG element. If that loads, it adds an svg class to the page.
The script then sets an SVG image as a background in the css using specificity to add a png fallback.
However, it doesn’t allow for SVG data uris in background images. Maybe I’m doing something wrong, but this doesn’t appear supported in Firefox. http://jsfiddle.net/daneastwell/XSjnx/1/
Lots of great examples in this talk, all powered by SVG. Saw it at a #Brighton @Skillswap a couple of years ago. So I don’t forget where it is.
Looking to add, cache, flip, rotate and scale an svg file as a css background image. Here’s a bit of a link dump for me to work on later. It all seems to be in the right area, apologies if you’re looking and it doesn’t come up with the goods:
http://www.broken-links.com/2010/06/08/using-svg-in-background-image/
http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/
http://caniuse.com/#search=svg
http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii
http://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css
http://nicolasgallagher.com/css-background-image-hacks/
http://css-tricks.com/snippets/css/flip-an-image/
http://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container
