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`!
April 5th, 2012 at 2:38 pm
Also Explorer 9 supports the background image sprites!
June 12th, 2012 at 7:41 am
Great tip!
If you are using defs to store your groups, you should add this line to the top of your styles,
defs g {display: inline !important}
Without this style the used definition will not render, at least in Chrome.
June 12th, 2012 at 10:36 am
@Michael, defs aren’t used in this example
May 23rd, 2013 at 9:47 am
This approach does not work in google chrome. In fact, if you browse this link, images are not visible there.
November 21st, 2013 at 10:09 am
Great topic!
But solution is not work in Chromium-Chrome(30) and strange work in FF :/
http://stackoverflow.com/a/11335915/1346222
August 22nd, 2014 at 2:19 am
[…] trying to use an SVG from a sprite as a background image as per this article. Each image in wrapped in symbol tags as per this […]