Here at Webonomic we always liked SVG. We experimented with SVG and SVG background quite a few times, also creating some fancy animated backgrounds and other animations at the times Apple hadn’t even released Safari or thought about CSS transforms, transitions, and animations.
Unfortunately SVG has never been really embraced by the majority of browser vendors, only Opera was enthusiastic about it, probably because both Adobe (Flash) and Microsoft (Silverlight/ Vector Markup Language (VML) had their own standards and felt threatened by it. (Adobe doesn’t make browsers, but SVG support in their Creative Suits has never been impressive) Maybe that’s gonna change now with HTML5 and even Microsoft Explorer 9 support.
Using SVG as images was one thing, using it as a background image was even better.
Setting SVG images by using :target and ID’s
And now we stumbled upon this clever trick showing layered SVG images by setting the hashtag to an ID on a g element and using the CSS :target rule. Simple and elegant.
g { display: none }
g:target { display: inline }
Compare:
Works in Firefox and Opera at the moment. What about Chromium?
Combine with background images
Combine that with a background image and you can use sprites without setting the horrible position values:
Compare this elegant code
div{ background: transparent url(pathto/yoga.svg) no-repeat;}
div.position_1{ background-image: url(pathto/yoga.svg#postion_1); }
div.position_2{ background-image: url(pathto/yoga.svg#position_2);}
with this old code
div{ background: transparent url(pathto/png) no-repeat ;}
div.postion_1{ background-position: 10px 20px}
div.position_2{ background-position: 30px 20px}
Live Demo
Let’s try setting the background image in the following two paragraphs:
We need CSS access
The last thing we wish for is that you can set the CSS from within the main document. I never understood why you couldn’t do it with SVG objects, but it would be even better if you could do something like this (both for SVG images and SVG background images):
.user svg[src=pathto/svg] #position-1{
fill :blue;}
.student svg[src=pathto/svg] #position_2{
fill :red;}
Of course above example isn’t working or correct, – how should we select both images and background images with actual CSS grammar – but making SVG (background) images accessible for CSS (and JS?) would be awesome. (beware security and cross origin issues)
Targeting SVG Images with CSS
// targeting SVG images
img[src=pathto/svg]
// new CSS syntax for targeting both SVG and SVG background images
svg[url(pathto/svg)]
// I guess setting the URL is better then setting an extra ID or class, after all aren't URL's unique by definition.
Then you can unleash the power of SVG sprites completely, and skin every site and web-app `on the go`!