Richtige Skalierung von SVGs im Internet Explorer 9+ – Workaround mit canvas löst Skalierungsprobleme
Kommentare

SVGs für die Implementierung von Bildern zu nutzen, bietet viele Vorteile – zumindest, wenn man nicht gerade auf den Support im Internet Explorer angewiesen ist. Durch verschiedene Bugs in IE 9+ werden inline SVGs nämlich meist nicht richtig skaliert.

Gerade, wenn es um SVG-Icons mit variabler Breite geht, wie sie vor allem für Responsive Designs nützlich sind, ist das oft ein Problem. Nicolas Gallagher zeigt in einem Blogpost, mit welchem Trick man dem leicht aus dem Weg gehen kann.

So lässt sich das richtige Seitenverhältnis der SVG-Icons beibehalten

Eine der beliebtesten Möglichkeiten, SVG-Icons zu nutzen, ist die Generierung einer Spritemap von SVG Symbolen, die an anderer Stelle im Markup-Dokument referenziert wird. Das Problem an der Sache: im Gegensatz zu anderen, modernen Browsern behält der Internet Explorer das ursprüngliche Seitenverhältnis eines inline SVGs nicht bei, sondern gibt es automatisch mit einer Breite von 300px aus. Will man also mit SVGs-Icons mit variabler Breite arbeiten, stellt das viele Webdesigner oft vor ein Problem.

Abhilfe kann da ein einfacher Trick schaffen, bei dem man sich canvas zu Nutze macht. Ein canvas-Element mit festgesetzten height– und width-Attributen behält auch dann sein ursprüngliches Seitenverhältnis bei, wenn eine Dimension im CSS auf die gewünschte Höhe oder Breite angepasst wird. So stellt ein canvas-Element einen skalierbaren Rahmen für SVG Icons im Internet Explorer dar.

Idealerweise wird dieser Workaround zu einer bestehenden Implementierung einer Icon-Komponente hinzugefügt – und irgendwann auch wieder entfernt. Soll eine SVG-Spritemap generiert und inline eingefügt werden, müssen die Höhe und Breite von jedem Icon herausgezogen und als Dimensionen des canvas-Elements des entsprechenden Icons festgelegt werden.

So lässt sich leicht für jedes Icon das richtige Seitenverhältnis beibehalten und SVGs können auch im Internet Explorer problemlos genutzt werden – ohne, dass man sich um eine fehlerhafte Skalierung der Icons sorgen muss.

Aufmacherbild: man drawing a maze with a workaround von Shutterstock / Urheberrecht: fotogestoeber

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -