SVG-Koordinatensysteme und Einheiten – Viewport und viewBox

All SVG content is drawn inside SVG viewports. Every SVG viewport defines a drawing region characterized by size (width, height), and an origin, measured in abstract user units. ( W3C)

Der Canvas ist der unbegrenzte Raum, in dem SVG-Elemente platziert werden. Der sichtbare Teil dieses Canvas, der durch Bildschirm, Container oder Layout begrenzt wird, heißt Viewport. Wer SVG präzise layouten und responsiv skalieren möchte, muss das Zusammenspiel von Canvas, Viewport und viewBox verstehen.

Was dieser Artikel erklärt

• Der Canvas ist der abstrakte SVG-Zeichenraum.
• Der Viewport ist der sichtbare Bereich, der durch width und height definiert wird.
• Das initiale Koordinatensystem beginnt bei (0,0) in der linken oberen Ecke.
• SVG verwendet Benutzereinheiten für Koordinaten und Längen.
• Die viewBox kann ein anderes Benutzerkoordinatensystem für Skalierung, Zoom und Positionierung erzeugen.

Canvas vs. Viewport

Der Canvas ist eine abstrakte, unbegrenzte Ebene, die beliebige Koordinaten enthalten kann, positive ebenso wie negative. Alle SVG-Inhalte werden innerhalb eines Viewports angezeigt. Dieser Viewport definiert einen Bereich auf dem Canvas und wird durch Größe und Ursprungspunkt beschrieben. Der Standardursprung ist (0,0). Der Bereich des Viewports wird über die Attribute width und height am äußersten <svg>-Element festgelegt.

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

Der Code oben zeigt, wie width und height des SVG-Viewports gesetzt werden. Das Bild ist durch ein 900 × 500 Pixel großes „Fenster“ sichtbar. Ein solcher Viewport heißt initialer Viewport.

Initiales und Benutzerkoordinatensystem

Sehen wir uns an, wie SVG Positionen und Größen von Objekten für das Zeichnen beschreibt.

Das Standardkoordinatensystem in SVG ähnelt stark dem in HTML. Es funktioniert wie eine zweidimensionale x-y-Ebene. Das initiale SVG-Koordinatensystem wird im initialen SVG-Viewport eingerichtet, mit dem Ursprung (0,0) in der linken oberen Ecke. Positive x-Werte gehen nach rechts, positive y-Werte nach unten. Für (x, y)-Koordinaten sowie Breiten- und Höhenwerte können cm, mm, in, em, ex, pt, pc und px verwendet werden. Die Standard-SVG-Einheit ist Pixel.

Wichtig ist die Unterscheidung zwischen dem initialen SVG-Koordinatensystem und dem Benutzerkoordinatensystem des Viewports. Das äußerste <svg>-Element kann ein viewBox-Attribut haben. Wenn dieses Attribut fehlt, entspricht das Benutzerkoordinatensystem dem initialen Koordinatensystem.

Das viewBox-Attribut definiert ein Benutzerkoordinatensystem, das vom initialen Koordinatensystem abweichen kann. Die viewBox besteht aus vier Parametern:

• min-x – X-Koordinate des linken Randes der viewBox.
• min-y – Y-Koordinate des oberen Randes der viewBox.
• width – Breite des viewBox-Rechtecks.
• height – Höhe des viewBox-Rechtecks.

Die Attributwerte müssen in Anführungszeichen stehen: viewBox="min-x min-y width height".

Der Viewport ist wie ein Fenster, durch das Sie SVG-Inhalt betrachten. Die viewBox ist ebenfalls ein ausgewählter Sichtbereich, kann aber zusätzlich zum Zoomen verwendet werden. Betrachten wir ein Beispiel:

    <svg width="900" height="500" viewBox="220 125 450 250" xmlns="http://www.w3.org/2000/svg">
    </svg>

In diesem Code definiert viewBox einen bestimmten Canvas-Bereich: ein Rechteck mit dem Ursprungspunkt (220,125), einer Breite von 450 und einer Höhe von 250. Anschließend wird das SVG-Bild auf diesen Bereich zugeschnitten und so skaliert, dass es den gesamten Viewport ausfüllt.

Die Abbildung links zeigt den unbegrenzten SVG-Dokument-Canvas, den initialen SVG-Viewport und die Benutzer-viewBox. Die Abbildung rechts zeigt das Ergebnis der Anwendung des viewBox-Attributs.

Durch die Verwendung des viewBox-Attributs entspricht eine Einheit des Benutzerkoordinatensystems zwei Einheiten des initialen Viewports. Es findet also eine Skalierung statt. Durch Ändern der Parameter des viewBox-Attributs können Sie das ursprüngliche Bild skalieren, ausschneiden und entlang der Koordinatenachsen verschieben. Zusätzlich kann das SVG-Koordinatensystem gedreht, geneigt und gespiegelt werden.

SVG-Koordinaten und Einheiten lesen

1. Beginnen Sie mit dem äußeren <svg>-Element und prüfen Sie width und height.
2. Behandeln Sie (0,0) als linke obere Ecke des initialen Viewports.
3. Lesen Sie x-Werte als Bewegung nach rechts und y-Werte als Bewegung nach unten.
4. Prüfen Sie, ob eine viewBox vorhanden ist, denn sie kann Benutzerkoordinaten auf den Viewport neu abbilden.
5. Verwenden Sie die Koordinatenattribute der einzelnen Elemente, etwa x, y, cx, cy, points oder path-Befehle, um Inhalt zu platzieren.

Häufige Fehler und Korrekturen

Problem	Ursache	Korrektur
SVG-Inhalt wird abgeschnitten	Die viewBox definiert einen kleineren Bereich als der gezeichnete Inhalt	Erhöhen Sie width und height der viewBox oder passen Sie min-x / min-y an
SVG wirkt gestreckt	Das Seitenverhältnis der viewBox passt nicht zum Viewport	Verwenden Sie proportionale viewBox-Abmessungen oder steuern Sie die Skalierung mit preserveAspectRatio
Objekte erscheinen zu groß oder zu klein	Der Maßstab des Benutzerkoordinatensystems wird falsch verstanden	Berechnen Sie viewBox-Einheiten im Verhältnis zur Viewport-Größe neu
Inhalt ist unerwartet verschoben	Falsche Werte für min-x oder min-y in viewBox	Passen Sie die Ursprungswerte an, damit der gewünschte Bereich ausgerichtet ist
Nach Änderung der viewBox passiert nichts	Im definierten Bereich liegt kein sichtbarer SVG-Inhalt	Prüfen Sie, ob gezeichnete Elemente innerhalb der viewBox-Grenzen liegen

Schnelle Rezepte

Aufgabe	SVG-Beispiel
Festen Viewport definieren	<svg width="400" height="200"></svg>
SVG skalierbar machen	<svg width="400" height="200" viewBox="0 0 400 200"></svg>
In einen bestimmten Bereich zoomen	<svg width="400" height="200" viewBox="100 50 200 100"></svg>

FAQ – SVG-Koordinaten und Einheiten

Was ist der Unterschied zwischen SVG-Viewport und viewBox?

Der Viewport ist der sichtbare Ausgabebereich, der meist durch width, height, CSS oder den Layout-Container definiert wird. Die viewBox definiert, welches Koordinatenrechteck in diesen Viewport abgebildet wird.

Warum verläuft die y-Achse in SVG nach unten?

Das initiale SVG-Koordinatensystem beginnt bei (0,0) in der linken oberen Ecke. Positive x-Werte bewegen sich nach rechts, positive y-Werte nach unten, ähnlich wie in vielen Bildschirmkoordinatensystemen.

Was sind SVG-Benutzereinheiten?

Benutzereinheiten sind die Koordinateneinheiten innerhalb der SVG-Zeichnung. Ohne viewBox entspricht eine Benutzereinheit normalerweise einem CSS-Pixel; mit viewBox werden Benutzereinheiten skaliert, damit sie in den Viewport passen.

Warum macht eine Änderung der viewBox SVG-Inhalt größer oder kleiner?

SVG skaliert das viewBox-Rechteck so, dass es den Viewport ausfüllt. Eine kleinere viewBox zeigt weniger Benutzereinheiten und lässt den Inhalt größer erscheinen; eine größere viewBox zeigt mehr Benutzereinheiten und lässt den Inhalt kleiner erscheinen.

Spezifikation und verwandte Ressourcen

• Das SVG-Spezifikationskapitel Coordinate systems, transformations, and units definiert SVG-Koordinatensysteme, Viewports, Benutzereinheiten, Transformationen und Längeneinheiten.
• Der Abschnitt zum viewBox-Attribut erklärt, wie SVG ein Benutzerkoordinatenrechteck auf einen Viewport abbildet.
• Der Abschnitt Units beschreibt Benutzereinheiten, CSS-Einheiten und Regeln für Längenumrechnung.
• Lesen Sie weiter mit SVG viewBox für praktische Beispiele zu Skalierung, Zuschnitt, Positionierung und responsivem SVG.
• Verwenden Sie SVG-Transformationen, wenn Sie vorhandene SVG-Grafik mit dem Attribut transform verschieben, drehen, skalieren, neigen oder spiegeln müssen.
• Öffnen Sie SVG-Formen, um zu sehen, wie Koordinaten Rechtecke, Kreise, Ellipsen, Linien, Polylinien und Polygone definieren.
• Gehen Sie zu SVG Path Data für path-Befehle, die Koordinaten verwenden, darunter M, L, H, V, C, Q und A.