Last Updated: February 25, 2016
· deviavir

SVG (retina and sizes)

Use "em" property size to scale SVG relative to the other elements. When one uses a retina display the elements will be twice as big, which will result in the SVG scaling nicely on retina and on normal displays.

SVGs for small sprites could be twice the size of PNGs, however, when using very large images the SVG file-size drops dramatically.

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;

1 Response
Add your response

Interesting. Thanks for the tip!

over 1 year ago ·