Kevin Banas Kevin Banas - 1 month ago 5x
CSS Question

SVG Sizing that's Cross-Browser Compatible

I'm new to using SVG sprites but after watching a tree house video on SVG sprites I'm giving it a go. I'm using the same formatting they did in the video for a link with a background image of an SVG pulled from the sprite, namely:

<a href="whatever" class="helpmepls"></a>

Where the styles are:

.helpmepls {
background: url("sprite.svg") no-repeat;
height: 32px;
width: 32px;
background-position: -32px -128px;
-webkit-transform: scale(2.0);
-ms-transform: scale(2.0);
-o-transform: scale(2.0);
transform: scale(2.0);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

However whenever scaling the images larger than 1.0 they become pixelated in Edge (and probably IE, haven't checked) even though they look good in Chrome. Help on how to make browser-compatible? Do I need to be using a container, an svg element, a view element, viewbox, or some combination of those?


This is Demo ! You can download it from Here.

My workflow

You could control in scaling by changing the value of scaleValue from line 1 in JS.

var scaleValue = 1.2;

I usually use "inline" SVG and GreenScok library to make an animation!