Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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>
Beispielhafte Darstellung einer SVG-Grafik mit gleichmäßiger Skalierung

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>
Beispielhafte Darstellung einer SVG-Grafik mit ungleichmäßiger Skalierung (Verzerrung)

Beispiel ansehen

Geschrieben von kulturbanause Team

Benutzerbild

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.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →