SVG-Grafiken verzerren mit preserveAspectRatio

Von: Robert, Jonas

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

Aktualisiert von 2022 – 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="https://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="https://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:

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing