Kevin Banas Kevin Banas - 1 year ago 124
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?

Answer Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download