SVG Sprites

See my blog article for more information.

<img> + fragment identifier

<img src="sprite.svg#smile-view">

<img src="sprite.svg#smile-view-face">

<img src="sprite.svg#smile-view-features">

<img> + viewBox

<img src="sprite.svg#svgView(viewBox(0, 0, 30, 30))">

<img src="sprite.svg#svgView(viewBox(0, 30, 30, 30))">

<img src="sprite.svg#svgView(viewBox(0, 60, 30, 30))">

Inline SVG <use>

<svg><use xlink:href="sprite.svg#smile"></use></svg>

<svg><use xlink:href="sprite.svg#smile-face"></use></svg>

<svg><use xlink:href="sprite.svg#smile-features"></use></svg>

CSS background image

background: url('sprite.svg#smile-view');

background: url('sprite.svg#smile-view-face');

background: url('sprite.svg#smile-view-features');

Face-smile.svg and PNG / SVG text from Wikipedia