Responsive sizes

Since SVG elements can respond to CSS styling, the same @media commands that make overal page layouts "responsive" can be applied to the elements inside an SVG image:

<svg>
<g class="container large" />
<g class="container med" />
<g class="container small" />
</svg>

svg .container { display:none; }
@media screen and (max-width:10em) {
  svg .container.small { display:inline; }
}
@media screen and (max-width:15em) {
  svg .container.med { display:inline; }
}
@media screen and (max-width:20em) {
  svg .container.large { display:inline; }
}

See in action in the Iconic icon set, who not only changes the size of their icons with different layouts, but the level of detail as well.

CSS "Sprite"

Embedding the imagery inside the CSS file, so both are fetched in one request helps speed up page loads:

.my-svg {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fsvg ...');
  background-repeat: no-repeat;
}

Generator at Grumpicon.com

Image fallbacks

Use CSS "sprite" with image/svg+xml;charset=US-ASCII data URI on browsers that can support SVG, image/png;base64 on those that can't, but can support data URIs (still gives the benefit of one download of the CSS file gets all images in one request), or standard PNG background image if no other option.

Grunticon full browser list

For best performance, the CSS files that have the two different data URI types should be two separate CSS files and should get swapped out by Javascript when the page loads. If they were merged into one CSS file, every browser would download two versions of every image, bloating the bandwidth requirement for the site.

More info:

• Leaving Pixels Behind presentation