SVG viewBox – SVG-Grafiken skalieren, zuschneiden und einpassen

SVG viewBox

Das viewBox-Attribut sagt SVG, welcher Koordinatenrechteckbereich in den sichtbaren viewport eingepasst werden soll. Durch Ändern seiner vier Werte können Sie Grafik skalieren, zuschneiden, den sichtbaren Bereich verschieben oder dasselbe SVG sauber an unterschiedliche Anzeigegrößen anpassen.

Dieser Artikel ist ein praktischer viewBox-Leitfaden. Er setzt voraus, dass SVG canvas, viewport und coordinate system grundsätzlich bekannt sind. Wenn diese Begriffe noch unklar sind, beginnen Sie mit SVG-Koordinatensysteme und Einheiten.

In diesem Artikel lernen Sie:

• Die Syntax viewBox="min-x min-y width height" zu lesen.
• SVG-Grafik durch Ändern von viewBox-Breite und -Höhe zu skalieren.
• SVG-Grafik durch Ändern von min-x und min-y zuzuschneiden oder neu zu positionieren.
• viewBox mit preserveAspectRatio für responsive SVG-Ausgabe zu kombinieren.

Wie viewBox funktioniert

Die SVG-Spezifikation definiert viewBox als Attribut, das ein user coordinate system für den SVG viewport erstellt. Es hat vier durch Leerzeichen getrennte Werte:

viewBox="min-x min-y width height"

Wert	Bedeutung
min-x	X-Koordinate, an der das sichtbare Rechteck beginnt
min-y	Y-Koordinate, an der das sichtbare Rechteck beginnt
width	Breite des sichtbaren Koordinatenrechtecks
height	Höhe des sichtbaren Koordinatenrechtecks

Der viewport ist die Ausgabefläche, die durch width, height, CSS oder das umgebende Layout definiert wird. Das viewBox ist der Koordinatenrechteckbereich, den SVG in diese Ausgabefläche abbildet. Wenn das viewBox kleiner als der viewport ist, wird der ausgewählte Koordinatenbereich vergrößert. Wenn es größer als der viewport ist, wirkt die Grafik kleiner, weil mehr Koordinatenraum in dieselbe sichtbare Fläche eingepasst wird.

<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

• Das Ändern von min-x oder min-y verschiebt das sichtbare Koordinatenrechteck.
• Das Ändern von width oder height ändert den Maßstab.
• Das Ändern aller vier Werte kombiniert Neupositionierung und Skalierung.

Hinweis: In den folgenden Abbildungen ist der viewport grün dargestellt, und der viewBox-Bereich ist blau dargestellt.

Beispiel-SVG in diesem Artikel

Die folgenden Beispiele verwenden dieselbe einfache blumenähnliche SVG-Zeichnung. Nur der viewBox-Wert ändert sich, damit sichtbar wird, wie der Koordinatenrechteckbereich das gerenderte Ergebnis beeinflusst.

<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <g fill="RoyalBlue">
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(90 125 128)" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(-45 125 128)" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(45 125 128)" />
  </g>
  <circle cx="125" cy="128" r="28" stroke="pink" stroke-width="50" stroke-dasharray="3 13" fill="Orange" />
  <circle cx="125" cy="128" r="5" />
</svg>

SVG mit viewBox skalieren

Skalierung mit viewBox wird durch die letzten beiden Werte gesteuert: width und height. Sie definieren, wie viel Koordinatenraum in den viewport eingepasst werden soll.

Mit größerem `viewBox` herauszoomen

Wenn viewBox-Breite und -Höhe größer sind als die viewport-Abmessungen, passt SVG einen größeren Koordinatenbereich in dieselbe Ausgabefläche ein. Das Ergebnis wirkt kleiner, weil mehr vom canvas auf einmal sichtbar ist.

<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

Mit kleinerem `viewBox` hineinzoomen

Wenn viewBox-Breite und -Höhe kleiner sind als die viewport-Abmessungen, vergrößert SVG diesen kleineren Koordinatenbereich, damit er den viewport füllt. Das Ergebnis wirkt hineingezoomt, und Inhalt außerhalb des ausgewählten Rechtecks kann abgeschnitten werden.

<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">

SVG mit viewBox zuschneiden oder neu positionieren

Zuschneiden und Neupositionierung werden durch die ersten beiden viewBox-Werte gesteuert: min-x und min-y. Diese Werte verschieben den Start des sichtbaren Koordinatenrechtecks.

Rechte Seite zuschneiden

Ein negatives min-x verschiebt den ausgewählten Koordinatenrechteckbereich nach links. In diesem Beispiel umfasst das sichtbare Rechteck x-Koordinaten von -100 bis 150, sodass Inhalt rechts abgeschnitten wird.

<svg width="250" height="250" viewBox="-100 0 250 250" xmlns="http://www.w3.org/2000/svg">

Linke Seite zuschneiden

Ein positives min-x verschiebt den ausgewählten Koordinatenrechteckbereich nach rechts. In diesem Beispiel beginnt das sichtbare Rechteck bei der x-Koordinate 100, sodass der linke Teil der Grafik nicht mehr sichtbar ist.

<svg width="250" height="250" viewBox="100 0 250 250" xmlns="http://www.w3.org/2000/svg">

Responsives SVG und preserveAspectRatio

Für responsives SVG behalten Sie viewBox bei und lassen CSS oder den Container die Anzeigegröße steuern:

<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">

Standardmäßig behält SVG das Seitenverhältnis des viewBox bei. Wenn viewport und viewBox unterschiedliche Proportionen haben, steuert das Attribut preserveAspectRatio Ausrichtung und Einpassungsverhalten.

<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">

Verwenden Sie meet, wenn das ganze Bild sichtbar bleiben muss. Verwenden Sie slice, wenn der viewport vollständig bedeckt werden soll und Zuschnitt akzeptabel ist.

So verwenden Sie SVG viewBox

1. Setzen Sie den sichtbaren viewport mit width, height, CSS oder Layout.
2. Wählen Sie den Koordinatenrechteckbereich mit viewBox="min-x min-y width height".
3. Ändern Sie viewBox-Breite und -Höhe, um hinein- oder herauszuzoomen.
4. Ändern Sie min-x und min-y, um den sichtbaren Bereich zuzuschneiden oder neu zu positionieren.
5. Fügen Sie preserveAspectRatio hinzu, wenn viewport und viewBox unterschiedliche Proportionen haben.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
SVG wirkt gestreckt oder gestaucht	Viewport und viewBox haben unterschiedliche Seitenverhältnisse, und das Einpassungsverhalten ist nicht gesteuert	Fügen Sie preserveAspectRatio="xMidYMid meet" hinzu oder wählen Sie einen passenden anderen Wert
Grafik ist unerwartet abgeschnitten	Das viewBox-Rechteck deckt den gewünschten Koordinatenbereich nicht ab	Prüfen Sie min-x, min-y, width und height gegen die Koordinaten der Grafik
SVG skaliert nicht responsiv	Das SVG hat feste Anzeigeabmessungen, aber kein viewBox	Behalten Sie viewBox bei und steuern Sie die Anzeigegröße mit CSS oder Container-Layout
CSS-Größenänderung ändert den Zuschnitt nicht	CSS ändert die viewport-Größe, nicht den ausgewählten Koordinatenrechteckbereich	Ändern Sie die viewBox-Werte, wenn Sie einen anderen Zuschnitt oder Zoombereich brauchen
viewBox wird ignoriert	Anführungszeichen fehlen, Kommas werden falsch verwendet oder die Anzahl der Werte stimmt nicht	Verwenden Sie genau vier durch Leerzeichen getrennte Werte: viewBox="min-x min-y width height"

Schnelle Rezepte

Aufgabe	SVG-Beispiel
Ganzes SVG skalierbar halten	<svg viewBox="0 0 250 250" width="100%" height="auto">
2× hineinzoomen	<svg width="250" height="250" viewBox="0 0 125 125">
2× herauszoomen	<svg width="250" height="250" viewBox="0 0 500 500">
Sichtbaren Bereich nach rechts verschieben	<svg width="250" height="250" viewBox="100 0 250 250">
Ganzes Bild sichtbar halten	<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">
Viewport vollständig füllen, auch mit Zuschnitt	<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice">

FAQ – Häufige Fragen zu viewBox

Was macht das viewBox-Attribut?

Das viewBox-Attribut definiert, welcher Koordinatenrechteckbereich des SVG canvas auf den viewport abgebildet wird. Es steuert Skalierung, Zuschnitt und sichtbare Positionierung, ohne die eigentlichen Formen zu verändern.

Wie unterscheidet sich viewBox von width und height?

width und height definieren die Ausgabegröße des viewport. viewBox definiert den Koordinatenbereich, der in diesen viewport eingepasst wird. Das Ändern von width und height ändert die Anzeigegröße; das Ändern von viewBox ändert, welcher Koordinatenraum gezeigt und wie er skaliert wird.

Brauche ich viewBox für responsives SVG?

In der Regel ja. Ein viewBox gibt dem SVG ein stabiles internes Koordinatensystem, während CSS oder Containergrößen die angezeigte Größe ändern können. Das ist das zuverlässigste Muster für responsive SVG-Grafiken.

Kann viewBox ein SVG zuschneiden?

Ja. Ändern Sie min-x, min-y, width und height, sodass das viewBox nur den Teil des canvas abdeckt, den Sie zeigen möchten. Alles außerhalb dieses ausgewählten Koordinatenrechtecks wird durch den viewport abgeschnitten.

Ändert viewBox path data oder Formkoordinaten?

Nein. viewBox ändert, wie vorhandene Koordinaten auf den viewport abgebildet werden. Es schreibt d, x, y, cx, cy oder andere Geometrieattribute nicht um.

Spezifikation und verwandte Ressourcen

• Der SVG-Spezifikationsabschnitt zum viewBox attribute definiert, wie ein user coordinate rectangle auf den viewport abgebildet wird.
• Der Abschnitt zum preserveAspectRatio attribute erklärt, wie SVG viewBox-Inhalt ausrichtet und skaliert, wenn Seitenverhältnisse unterschiedlich sind.
• Beginnen Sie mit SVG-Koordinatensysteme und Einheiten, wenn Sie das Koordinatenmodell hinter viewBox benötigen.
• Verwenden Sie SVG-Transformationen, wenn Sie vorhandene SVG-Elemente mit dem transform-Attribut verschieben, drehen, skalieren, neigen oder spiegeln möchten.
• Öffnen Sie SVG-Formen, um zu sehen, wie Koordinaten Rechtecke, Kreise, Ellipsen, Linien, polylines und polygons definieren, bevor viewBox ihren Anzeigemaßstab verändert.
• Gehen Sie zu Was ist eine SVG-Datei? für einen breiteren Überblick über SVG-Struktur, Vorteile und Dateiformatgrundlagen.