SVG (retina e tamanhos)

Use o tamanho da propriedade “em” para dimensionar o SVG em relação aos outros elementos. Quando se usa uma tela de retina, os elementos serão duas vezes maiores, o que resultará no dimensionamento adequado de SVG na retina e em telas normais.

SVGs para sprites pequenos podem ter o dobro do tamanho de PNGs, no entanto, ao usar imagens muito grandes, o tamanho do arquivo SVG diminui drasticamente.

background-image: url('sprite.svg');
-webkit-background-size: 1.875em 10em;
-o-background-size: 1.875em 10em;
-moz-background-size: 1.875em 10em;
background
-size: 1.875em 10em;
/* styles carried over from the original implementation */
background
-repeat: no-repeat;
background
-color: #ccc;