Viewport und viewBox – SVG-Koordinatensystem

Aus SELFHTML-Wiki
(Weitergeleitet von SVG/Längenangaben)
Wechseln zu: Navigation, Suche

SVG-Grafiken bestehen nicht aus einzelnen Bildpunkten, sondern aus mathematisch beschriebenen Formen. Dadurch lassen sie sich ohne Qualitätsverlust vergrößern oder verkleinern und eignen sich besonders für responsive Webseiten.

Wie bei einem Blatt Papier wird in SVG auf eine Zeichenfläche (engl. canvas – nicht zu verwechseln mit dem gleichnamigen Element) gezeichnet. Diese ist theoretisch unbegrenzt groß. Sichtbar ist jedoch nur der Ausschnitt, der durch den Viewport festgelegt wird. Mit der viewBox bestimmst du, welcher Bereich der Zeichenfläche im Viewport angezeigt wird und wie er auf die verfügbare Größe skaliert wird. Teile des canvas außerhalb des Viewports werden abgeschnitten und sind nicht sichtbar.

In diesem Kapitel lernst du das Zusammenspiel von Viewport, viewBox und dem SVG-Koordinatensystem kennen. Sie bilden die Grundlage für nahezu jede SVG-Grafik.

SVG-Viewport

Fenster eines Flugzeugs
Fenster im Flugzeug - man sieht nur einen Ausschnitt

Der Viewport bezeichnet den sichtbaren Ausschnitt einer größeren Fläche. Er lässt sich mit einem Blick aus einem Fenster vergleichen: Die Landschaft kann sich weit außerhalb des Fensters erstrecken, sichtbar ist jedoch nur der Ausschnitt, der durch das Fenster begrenzt wird.

Auch in SVG gibt es einen solchen sichtbaren Bereich. Die Zeichenfläche einer Grafik kann größer sein als der aktuell angezeigte Ausschnitt. Der SVG-Viewport legt fest, welcher Bereich der Grafik sichtbar ist.

Aufgabe: Verändere die Größe des Wrappers.
SVG mit festen Größen, nicht skalierbar ansehen …
<svg width="600" height="450">
  <!-- SVG-Objekte, die auf die SVG-Leinwand gezeichnet werden-->
</svg>

Die Größe des SVG-Viewports wird mit den Attributen width und height des äußeren <svg>-Elements festgelegt. Er beschreibt die sichtbare Fläche, in der die Grafik dargestellt wird.

Die viewBox legt dagegen das interne Koordinatensystem der SVG-Grafik fest. Sie bestimmt, welcher Ausschnitt der Zeichenfläche im Viewport angezeigt wird und wie die Koordinaten auf die tatsächliche Größe des Viewports skaliert werden.

Der äußere Container dieses Beispiels ist veränderbar. Die SVG selbst bleibt jedoch 650 × 450 CSS-Pixel groß. Die gezeichneten Formen behalten ihre Koordinaten aus der viewBox bei und werden innerhalb des SVG-Viewports dargestellt.

viewBox – das SVG-Koordinatensystem

Oft liegt eine SVG-Grafik in einem eigenen Koordinatensystem vor, soll aber in unterschiedlich große Bereiche einer Webseite eingefügt werden. Dafür wird nicht die Grafik selbst verändert, sondern nur der sichtbare Ausschnitt und die Skalierung angepasst.

Mit dem viewBox-Attribut wird festgelegt, welcher Bereich des SVG-Koordinatensystems im Viewport angezeigt wird. Die vier Werte der viewBox beschreiben die Position und Größe dieses Ausschnitts.[1] [2] Dadurch kann eine SVG-Grafik unabhängig von der tatsächlichen Größe des <svg>-Elements skaliert, verschoben oder beschnitten werden.

Teleskop
Mit einem Teleskop kanst du das Bild skalieren und zoomen.

Syntax

<svg viewBox="0 0 650 450">

Folgende Angaben sind nötig:

  • min-x: x-Koordinate des neuen Koordinatensystems (obere linke Ecke)
  • min-y: y-Koordinate des neuen Koordinatensystems (obere linke Ecke)
  • width: Breite
  • height: Höhe (Negative Angaben oder ein Wert 0 bei der Breite oder Höhe verhindern ein Rendern des svg-Elements)

Die Angaben können durch Komma oder Leerzeichen getrennt werden.

Mit viewBox wird ein Rechteck im SVG-Koordinatensystem festgelegt. Dieses Rechteck wird anschließend auf den SVG-Viewport abgebildet, der durch die Attribute width und height des <svg>-Elements bestimmt wird.

Dadurch entstehen zwei unterschiedliche Bezugssysteme:

  • Der SVG-Viewport beschreibt die tatsächliche Anzeigefläche des <svg>-Elements.
  • Die viewBox beschreibt das Koordinatensystem, in dem die Grafik gezeichnet wird.

Für die weitere Gestaltung der SVG-Grafik werden die Koordinaten der viewBox verwendet.

Aufgabe: Verändere die Größe des Wrappers.
responsives SVG mit viewBox-Attribut ansehen …
svg {
  display: block;
  width: 100%;
  aspect-ratio: 650 / 450;
}

Die SVG-Grafik wird als Block-Element dargestellt und nimmt die gesamte verfügbare Breite ihres Elternelements ein.

  • display: block; verhindert, dass die SVG wie ein Inline-Element behandelt wird und beispielsweise eine kleine Lücke unterhalb der Grafik durch die Textzeile entsteht.
  • width: 100%; passt die Breite der SVG automatisch an die verfügbare Breite des Elternelements an.
  • aspect-ratio: 650 / 450; legt das Seitenverhältnis der Grafik fest. Die Höhe wird vom Browser automatisch so berechnet, dass das Verhältnis von Breite zu Höhe erhalten bleibt.

Die viewBox erstellt ein Rechteck, das bei "0,0" beginnt und eine Breite von 650 sowie eine Höhe von 450 hat. Dieses wird in das eigentliche Koordinatenystem, dessen Werte vom Browser berechnet werden, transformiert.

Beachte: Im XML-Kontext wird das Attribut in CamelCase geschrieben, HTML5 ist case-insensitiv.

Benutzereinheiten – was bedeuten die Zahlen im Koordinatensystem?

In SVG können Längenangaben mit oder ohne Maßeinheit angegeben werden. Eine dimensionslose Zahl (engl. unitless value) wird als SVG-Benutzereinheit interpretiert.

Beispiel 
  <rect x="20" y="20" width="100" height="50">

Die Zahlen in diesem Beispiel beziehen sich auf das aktuelle SVG-Koordinatensystem. Welche tatsächliche Größe eine Benutzereinheit besitzt, hängt davon ab, wie dieses Koordinatensystem auf den SVG-Viewport abgebildet wird.

Ohne eine viewBox entspricht eine Benutzereinheit in der Regel einem CSS-Pixel. Durch die viewBox kann das Koordinatensystem der Grafik jedoch unabhängig von der tatsächlichen Größe des SVG-Viewports skaliert werden.

Beim Rendern führt der Browser deshalb automatisch eine Transformation durch:

  • Das Viewport-Koordinatensystem beschreibt die tatsächliche Anzeigefläche des <svg>-Elements.
  • Das Benutzer-Koordinatensystem beschreibt die Zeichenfläche der SVG-Grafik und wird durch die viewBox festgelegt.

Der Browser berechnet beim Darstellen automatisch die passende Umrechnung zwischen beiden Koordinatensystemen.

Anwendungsbeispiele

Erinnerst du dich an diese Beispiele aus den vorhergehenden Kapiteln?

Flagge Frankreich ansehen …
<svg width="300" height="200" viewBox="0 0 3 2">
  <desc>Flagge Frankreichs</desc>
  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />
  <rect x="1" y="0" width="1" height="2" fill="white" />
  <rect x="2" y="0" width="1" height="2" fill="#EF4531" />  
</svg>

viewBox="0 0 3 2" bedeutet, dass …

  • ein Bereich mit einem Benutzer-Koordinatensystem von 0,0 bis 3,2 spezifiziert wird.
  • die SVG-Grafik auf diesen Bereich zugeschnitten wird
  • der Bereich (in einem Zoom-in-Effekt) in den Viewport skaliert wird

Die Breite der viewBox beträgt 3 Benutzereinheiten, die Breite des Viewports 300 CSS-Pixel. Deshalb wird jede Benutzereinheit auf 100 CSS-Pixel skaliert.


SVG-Uhr: Viewbox mit verschobenem Ursprung ansehen …
<svg viewBox="-100 -100 200 200">
  <circle id="clockface" r="98" />
  <circle id="origin"    r="2" />
</svg>

viewBox="-100 -100 200 200" …

  • Koordinatenbereich: x = -100 bis +100, y = -100 bis +100
  • Ursprung (0,0) liegt in der Mitte
  • Kreise können symmetrisch um den Ursprung gezeichnet werden

Ergebnis: Durch die Wahl des Ursprungs in der Mitte wird das Zeichnen kreisförmiger Grafiken deutlich einfacher.

viewBox-Animation

Mit einer dynamischen Änderung des viewBox-Attributs sind Pan & Zoom-Effekte (engl. für Schwenken und Zoomen) möglich – etwa Kamerafahrten über eine Landkarte, bei denen du aus einer Übersicht herauszoomen, über die Karte schweben und am Ziel wieder hineinzoomen kannst.

Zoom & Pan ansehen …
<div id="controls">
<button data-view="125 375 1050 800">Schlafen</button>
<button data-view="1875 375 1050 800">Büro</button>
...

<button data-view="0 0 3000 2000">Unser Haus</button>
</div>
<svg id="house" viewBox="0 0 3000 2000">

Das viewBox-Attribut lässt sich nicht mit CSS animieren. Für Pan-&-Zoom-Effekte kommen daher SMIL oder wie hier JavaScript zum Einsatz.

Siehe auch:

  • Standalone-SVGs
    • Viewport und viewBox
    • Zoom in und out
     
  • interaktive Landkarten
     
  • Mouse and More
    • Event-Modelle für Touch- und Maus-Aktionen
    • Region of Interest
    • SVG-Zoom
     

preserveAspectRatio

Mit dem preserveAspectRatio-Attribut kann das gewünschte Seitenverhältnis festgelegt werden. Bei allen Elementen außer bei image wird preserveAspectRatio ohne ein zuvor gesetztes viewBox-Attribut ignoriert.[3]


Skaliert oder mit „richtigen“ Proportionen? ansehen …
<svg width="100%" height="100%">
	<defs>
		...
	</defs>		
	<rect x="0" y="0" width="100%" height="100%" fill="url(#grid)" />
		
	<svg id="interactive" viewBox="0 0 100 100"  width="50%" height="50%" preserveAspectRatio="meet">
		<rect x="0" y="0" width="100" height="100" fill="url(#linear-gradient)" />
		<path d="M0,0  l100,100 m-100,0 l100,-100" /> 
    </svg>
</svg>

Im SVG befindet sich ein weiteres SVG mit einer Grafik. Über preserveAspectRatio kann festgelegt werden, ob diese in „richtigen“ Proportionen dargestellt wird oder über die gesamte Fläche skaliert wird.

Insbesondere falls du bereits mit CSS-Hintergrundbildern gearbeitet hast, kannst du dir die Funktion dieses Attributs anhand der Eigenschaften background-position und background-size vorstellen:

preserveAspectRatio-Schlüsselwort vergleichbar mit Hintergrundbild-Eigenschaft
none background-size: 100% 100%;
xMinYMin background-position: top left;
xMidYMin background-position: top;
xMaxYMin background-position: top right;
xMinYMid background-position: left;
xMidYMid background-position: center;
xMaxYMid background-position: right;
xMinYMax background-position: bottom left;
xMidYMax background-position: bottom;
xMaxYMax background-position: bottom right;
meet background-size: contain;
slice background-size: cover;

Fazit: Koordinatensystem und Längenangaben in SVG

Das wichtigste Konzept beim Arbeiten mit SVG ist das Benutzer-Koordinatensystem. Zeichnungen werden nicht in Pixeln, sondern in einem eigenen Koordinatensystem beschrieben. Das viewBox-Attribut legt fest, welcher Ausschnitt dieses Koordinatensystems sichtbar ist und ermöglicht dadurch skalierbare Grafiken sowie Effekte wie Pan und Zoom.

Für die meisten SVG-Grafiken haben sich folgende Vorgehensweisen bewährt:

  • Verwende für Zeichnungen möglichst einheitslose Zahlenwerte. Sie beziehen sich direkt auf das SVG-Koordinatensystem und lassen sich zusammen mit der viewBox flexibel skalieren.
  • Setze die viewBox so, dass sie den eigentlichen Zeichenbereich sinnvoll beschreibt. Dadurch bleibt die Grafik unabhängig von der späteren Anzeigengröße.
  • Verwende feste Längeneinheiten wie px nur, wenn eine Größe bewusst an die Darstellung im Browser gekoppelt sein soll.
  • Gehe mit Prozentangaben sparsam um. Bei SVG beziehen sie sich nicht immer auf dieselbe Größe: Manche Werte verwenden die Breite oder Höhe der viewBox, andere die normalisierte Diagonale.
  • Denke bei Konturen daran, dass sich stroke-width beim Skalieren der SVG mit verändert. Falls Linien unabhängig vom Zoom immer gleich breit bleiben sollen, kann vector-effect="non-scaling-stroke" verwendet werden.

Mit diesem Wissen kannst du SVG-Grafiken erstellen, die sich verlustfrei skalieren lassen und sich flexibel an unterschiedliche Ausgabemedien anpassen.

Die folgenden Abschnitte behandeln einige Sonderfälle, die im Alltag seltener benötigt werden, aber für ein vollständiges Verständnis der SVG-Längenangaben hilfreich sind.

Anhang

Einige SVG-Elemente (linearGradient, radialGradient, pattern, clipPath, mask und filter) können statt des Benutzer-Koordinatensystems den Begrenzungsrahmen (bounding box) eines Elements als Koordinatensystem verwenden. Darauf wird in den jeweiligen Tutorials näher eingegangen.

Größen und Langenangaben in SVG

Neben einheitslosen Zahlenwerten können SVG-Attribute auch Längenangaben mit Einheiten wie px, em, rem, cm oder in verwenden. Diese entsprechen den aus CSS bekannten Längeneinheiten.

In der Praxis werden jedoch meist einheitslose Werte verwendet, da sie direkt im Koordinatensystem der Grafik liegen und sich gemeinsam mit der viewBox skalieren.

Prozentangaben

Prozentangaben (1%) können in SVG überall verwendet werden. Der Bezugswert für 100‍ ‍% ist je nach Eigenschaft immer:

  • bei x, x1, x2, cx, dx, rx, refX, width, markerWidth die Breite der viewBox,
  • bei y, y1, y2, cy, dy, ry, refY, height, markerHeight die Höhe der viewBox,
  • Bei einigen anderen Längenangaben, beispielsweise r (Radius), stroke-width oder stroke-dasharray, bezieht sich ein Prozentwert auf die normalisierte Diagonale der viewBox.

Wenn keine viewBox angegeben ist, gelten die Maße der Bildfläche in der die Grafik angezeigt wird (Element SVG) als Bezugswert.

Laut Definition[4] ist bei einem quadratischen Bild die normalisierte Diagonale (auch Quadratischer Mittelwert )so lang wie die Höhe und Breite des Bildes. Der Bezugswert hat dabei ein Maximum. Er sinkt bei anderen Seitenverhältnissen bis auf 71 % der langen Bildseite.

Beispiel 
<circle
  cx="50%"
  cy="50%"
  r="10%"
  stroke-width="2%"
/>

Die Prozentwerte beziehen sich auf …

  • cx="50%" → 50% der viewBox-Breite
  • cy="50%" → 50% der viewBox-Höhe
  • r="10%" → 10% der normierten Diagonale
  • stroke-width="2%" → 2% der normierten Diagonale

Weblinks

  1. ↑ W3C: ViewBoxAttribute
  2. ↑ MDN: viewBox
  3. ↑ sarasoueidan.com: Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
  4. ↑ W3C: SVG2 Units


deutsch

Abgerufen am 4.08.2026
von "http://wiki.selfhtml.org/wiki/Viewport_und_viewBox_%E2%80%93_SVG-Koordinatensystem"