SVG-Grafiken verzerren mit preserveAspectRatio

Von kulturbanause Team

Mit dem SVG-Attribut preserveAspectRatio lässt sich die Skalierung von SVG-Grafiken beeinflussen.

Aktualisiert am 1. Oktober 2023

SVG-Grafiken sind aus dem Web nicht mehr wegzudenken: Icons, Logos und Animationen sind nur einige der Anwendungs-Bereiche von SVG-Grafiken. Mit dem Attribut preserveAspectRatio lässt sich beeinflussen, wie die Grafik in Hinsicht auf ihren Container skaliert.

Das Attribut preserveAspectRatio

Das Attribut preserveAspectRatio ist für die Skalierung von SVG-Grafiken verantwortlich. Es bestimmt, wie die Grafik zu ihrem Container positioniert und skaliert wird. Der Standard-Wert ist xMidYMid, was bedeutet, dass die Grafik in ihrem Seitenverhältnis gleich bleibt und im Container zentriert wird. Beispiele für die verschiedenen Werte findet ihr hier

Verfügbare Werte

• preserveAspectRatio="none": Die Viewbox wird in SVG verzerrt
• preserveAspectRatio="xMinYMin": Die Viewbox wird links oben in SVG positioniert und proportional skaliert
• preserveAspectRatio="xMidYMid": Die Viewbox wird zentriert in SVG positioniert und proportional skaliert
• preserveAspectRatio="xMaxYMax": Die Viewbox wird rechts unten in SVG positioniert und proportional skaliert
• preserveAspectRatio="xMinYMin slice": Die Viewbox wird links oben in SVG positioniert, proportional skaliert und beschnitten

Wichtig für die Verwendung von preserveAspectRatio ist, dass eure SVG-Grafik eine viewBox-Angabe hat.

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" preserveAspectRatio="xMidYMid"><polygon points="40 1.958 52.361 27.003 80 31.019 60 50.515 64.721 78.042 40 65.045 15.279 78.042 20 50.515 0 31.019 27.639 27.003 40 1.958"/></svg>

Mit preserveAspectRatio="none" eine SVG verzerren

Gebt ihr den Wert none ein, legt ihr damit fest, dass sie keiner einheitlichen Skalierung unterliegt und folglich verzerrt werden kann.

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" preserveAspectRatio="none"><polygon points="40 1.958 52.361 27.003 80 31.019 60 50.515 64.721 78.042 40 65.045 15.279 78.042 20 50.515 0 31.019 27.639 27.003 40 1.958"/></svg>

Beispiel ansehen

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.