Unleash the power of SVG sprites

April 4th, 2012

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:

yoga

yoga position 1

yoga position 2

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:

The problem of the last example is not only that you have to calculate all the horizontal and vertical offsets, but also the maintenance of the sprite itself.  And scaling issues are much better handled by SVG then of PNG or GIF. I think even a SVG-minifier can be made to concat and minfy several SVG images into one SPRITE – it’s XML in the end – without going back to Inkscape or GIMP, (or Adobe CS  if you prefer to use proprietary software.)
Works in Firefox and … Well, only Firefox at the moment. Great that you can set the SVG-layer from the main document. But why can’t we set the fill or strike color?

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`!

6 Responses to “Unleash the power of SVG sprites”

  1. Peter Says:

    Also Explorer 9 supports the background image sprites!

  2. Michael Camden Says:

    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.

  3. admin Says:

    @Michael, defs aren’t used in this example

  4. Adam Says:

    This approach does not work in google chrome. In fact, if you browse this link, images are not visible there.

  5. _ Says:

    Great topic!

    But solution is not work in Chromium-Chrome(30) and strange work in FF :/
    http://stackoverflow.com/a/11335915/1346222

  6. How to use an SGV in a symbol tag as a background image Says:

    […] 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 […]