Using SVG for scalable icon sprites isn’t a new idea, but the technique required to use them is (as with all CSS spriting) a little verbose, needing multiple instances of background-position
. A feature from SVG1.1, Fragment Identifier Linking, makes it much easier, and will be available in the forthcoming Firefox 15.
Fragment Identifier Linking involves adding a parameter to the URL of an SVG file, which specifies a region of that file to be displayed. For example, take a look at the file faces.svg, a simple SVG file composed of two faces. If I wanted to link directly to the monkey face, here’s the URL I’d use:
faces.svg#svgView(viewBox(0,0,48,41))
The parameters in viewBox
define the region of the file containing the monkey face icon: the x and y co-ordinates of the top left corner, then the width and height.
You can define shortcuts to image regions by adding views into the SVG source. This is done with the view
element, which requires at least the viewBox
parameters 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 fragment of the URL:
faces.svg#monkey-view
Whichever way you want to use Fragment Identifiers, once you’ve defined your URLs, you can use them to display 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 noted that this isn’t clipping the background, it’s just linking to a specific region; if you have multiple sprites in an image, it’s possible that they could also be displayed, just as with bitmap sprite sheets.
If you have Firefox 15 or above you can take a look at the demo I’ve put together. The SVG image is shown at the top of the page, then each instance of h1
uses a different syntax to call only part of the same image.
Demo: SVG Fragment Identifier Linking
As far as I’m aware this only currently works in Firefox 15+; I’ve tested in Chrome and Opera and neither supports it, but haven’t checked IE yet. Update, 26 September 2014: Fragment identifiers are fully supported in IE10+, and in Chrome and Safari (7.1) when used in the img
element and inline SVG – not as CSS background images.
I first read about SVG Fragment Identifiers on Robert Longson’s blog. The SVG spec has further details (including extra parameters). If you want to know why the use of SVG is a good idea, David Bushell’s article, Resolution Independence With SVG, provides an excellent introduction.
This seems to work somewhat in chrome? If you go to either of the hashtags on the SVG image in the latest version of Chrome it tries to work, but falls short of what you’ve described – I think.
Navarr [August 14th, 2012, 15:24]
It’s loading the file as a background image but ignoring the fragment identifiers.
Peter [August 14th, 2012, 15:32]
I am using Chrome Canary … and It doesn’t seem to work for me.
Ahmad Alfy [September 10th, 2012, 14:28]
This is a great feature, can’t wait to see it have more support. Just tested it in IE9 and IE10 and it actually works in both! A very pleasant surprise indeed, now if only those Chrome guys would stop keeping the web behind… ;)
Alexis Deveria [November 20th, 2012, 19:05]
[…] Soon there will be equivalent techniques (to image sprites): fragments and stacks. Those with an enquiring 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. […]
Tips for using SVGs in web projects - benfrain.com - blog of technology writer and web designer Ben Frain. [February 6th, 2013, 22:35]
[…] habrahabr.ru/post/141654/ http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ http://www.w3.org/TR/SVG/ […]
Новости » Blog Archive » Анализ применения SVG в качестве background-image [March 14th, 2013, 16:48]
[…] studerade några artiklar och de specifikationer för SVG , och beslutade att prova dem istället för px. Som förväntat, med relativa teckenstorlekar, […]
Fallstudie: Tricky SVG bakgrundsbilder | Dimmrar [March 29th, 2013, 08:43]
[…] Better SVG Sprites With Fragment Identifiers http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/ […]
Replacing images in HTML with SVG / Leighton - Digital, Creative, UX and Technical Services Web Agency [July 31st, 2013, 20:23]
[…] Peter Gasston: Better SVG Sprites With Fragment Identifiers […]
Using SVG | vialley [September 10th, 2013, 18:39]
[…] Peter Gasston: Better SVG Sprites With Fragment Identifiers […]
Code is in the Air by Jairo Mejia Lets Use SVG » Code is in the Air by Jairo Mejia [December 5th, 2013, 16:49]