Better SVG Sprites With Fragment Identifiers

Warning This article was written over six months ago, and may contain outdated information.

Using SVG for scal­able icon sprites isn’t a new idea, but the tech­nique required to use them is (as with all CSS sprit­ing) a lit­tle ver­bose, need­ing mul­ti­ple instances of background-position. A fea­ture from SVG1.1, Frag­ment Iden­ti­fi­er Link­ing, makes it much eas­i­er, and will be avail­able in the forth­com­ing Fire­fox 15.

Frag­ment Iden­ti­fi­er Link­ing involves adding a para­me­ter to the URL of an SVG file, which spec­i­fies a region of that file to be dis­played. For exam­ple, take a look at the file faces.svg, a sim­ple SVG file com­posed of two faces. If I want­ed to link direct­ly to the mon­key face, here’s the URL I’d use:

faces.svg#svgView(viewBox(0,0,48,41))

The para­me­ters in viewBox define the region of the file con­tain­ing the mon­key face icon: the x and y co-ordi­nates of the top left cor­ner, then the width and height.

You can define short­cuts to image regions by adding views into the SVG source. This is done with the view ele­ment, which requires at least the viewBox para­me­ters and a unique identifier:

<view id="monkey-view" viewBox="0 0 48 41"/>

Once this view is defined you can link to it using the id as a frag­ment of the URL:

faces.svg#monkey-view

Whichev­er way you want to use Frag­ment Iden­ti­fiers, once you’ve defined your URLs, you can use them to dis­play sprites in CSS:

E { background-image: url('faces.svg#svgView(viewBox(0,0,48,41))'); }
E { background-image: url('faces.svg#monkey-view'); }

It must be not­ed that this isn’t clip­ping the back­ground, it’s just link­ing to a spe­cif­ic region; if you have mul­ti­ple sprites in an image, it’s pos­si­ble that they could also be dis­played, just as with bitmap sprite sheets.

If you have Fire­fox 15 or above you can take a look at the demo I’ve put togeth­er. The SVG image is shown at the top of the page, then each instance of h1 uses a dif­fer­ent syn­tax to call only part of the same image.

Demo: SVG Frag­ment Iden­ti­fi­er Linking

As far as I’m aware this only cur­rent­ly works in Fire­fox 15+; I’ve test­ed in Chrome and Opera and nei­ther sup­ports it, but haven’t checked IE yet. Update, 26 Sep­tem­ber 2014: Frag­ment iden­ti­fiers are ful­ly sup­port­ed in IE10+, and in Chrome and Safari (7.1) when used in the img ele­ment and inline SVG — not as CSS back­ground images.

I first read about SVG Frag­ment Iden­ti­fiers on Robert Long­son’s blog. The SVG spec has fur­ther details (includ­ing extra para­me­ters). If you want to know why the use of SVG is a good idea, David Bushel­l’s arti­cle, Res­o­lu­tion Inde­pen­dence With SVG, pro­vides an excel­lent introduction.

10 comments on
“Better SVG Sprites With Fragment Identifiers”

  1. This seems to work some­what in chrome? If you go to either of the hash­tags on the SVG image in the lat­est ver­sion of Chrome it tries to work, but falls short of what you’ve described — I think.

  2. It’s load­ing the file as a back­ground image but ignor­ing the frag­ment identifiers.

  3. I am using Chrome Canary … and It does­n’t seem to work for me.

  4. This is a great fea­ture, can’t wait to see it have more sup­port. Just test­ed it in IE9 and IE10 and it actu­al­ly works in both! A very pleas­ant sur­prise indeed, now if only those Chrome guys would stop keep­ing the web behind… ;)

    Alexis Deveria [November 20th, 2012, 19:05]

  5. […] Soon there will be equiv­a­lent tech­niques (to image sprites): frag­ments and stacks. Those with an enquir­ing mind should take a read of: http://simurai.com/post/20251013889/svg-stacks and http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers. […]

  6. […] habrahabr.ru/post/141654/ http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ http://www.w3.org/TR/SVG/ […]

  7. […] stud­er­ade några artik­lar och de speci­fika­tion­er för SVG , och beslu­tade att pro­va dem istäl­let för px. Som förvän­tat, med rel­a­ti­va teckenstorlekar, […]

  8. […] Bet­ter SVG Sprites With Frag­ment Iden­ti­fiers http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ […]

  9. […] Peter Gasston: Bet­ter SVG Sprites With Frag­ment Identifiers […]

  10. […] Peter Gasston: Bet­ter SVG Sprites With Frag­ment Identifiers […]