SVG Größe, die Cross-Browser-kompatibel ist

Question

Ich bin neu mit SVG Sprites, aber nachdem ich ein Baumhaus Video auf SVG Sprites beobachtet habe, gebe ich es eine Chance. Ich bin die gleiche Formatierung verwenden sie für eine Verbindung mit einem Hintergrundbild einer SVG im Video tat gezogen aus dem Sprite, nämlich:

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

Wo die Stile sind:

.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; 
} 

Allerdings, wenn Wenn Sie die Bilder größer als 1.0 skalieren, werden sie in Edge pixeliert (und wahrscheinlich IE, nicht überprüft), obwohl sie in Chrome gut aussehen. Hilfe, wie man browserkompatibel macht? Muss ich einen Container, ein SVG-Element, ein View-Element, eine Viewbox oder eine Kombination davon verwenden?

Answer 1

Hier ist ein Demo! Sie können es von Here herunterladen.

My workflow

Sie können die Skalierung steuern, indem der Wert von scaleValue von Linie 1 in JS zu ändern.

var scaleValue = 1.2; 

Ich verwende normalerweise "Inline" SVG und die GreenSock-Bibliothek, um Animationen zu machen!