Das viewBox-Attribut ist der Schlüssel dazu, warum SVG-Grafiken auf jedem Bildschirm gestochen scharf bleiben – egal ob Briefmarke oder Plakat. Gleichzeitig ist es eines der am häufigsten missverstandenen Konzepte in der Webgrafik. Dieser Ratgeber erklärt, was die viewBox wirklich macht, wie sie mit dem Seitenverhältnis zusammenhängt und wie du die richtigen Werte bestimmst.
Was ist die viewBox überhaupt?
Die viewBox definiert das interne Koordinatensystem einer SVG-Grafik. Sie besteht aus vier Zahlen:
- min-x – die x-Koordinate der oberen linken Ecke
- min-y – die y-Koordinate der oberen linken Ecke
- width – die Breite des sichtbaren Ausschnitts in Benutzereinheiten
- height – die Höhe des sichtbaren Ausschnitts in Benutzereinheiten
Geschrieben sieht das so aus: viewBox="0 0 100 50". Das bedeutet: Das Koordinatensystem beginnt bei (0,0) und ist 100 Einheiten breit und 50 hoch. Wichtig dabei: Diese Einheiten sind keine Pixel. Sie sind abstrakt – erst beim Rendern werden sie auf die tatsächliche Anzeigegröße abgebildet.
Warum SVGs damit verlustfrei skalieren
Hier liegt die eigentliche Stärke. Eine SVG mit viewBox="0 0 100 50" kannst du per CSS auf 200, 800 oder 2000 Pixel Breite setzen – der Browser rechnet das interne Koordinatensystem einfach proportional hoch. Weil alle Linien und Kurven mathematisch beschrieben sind und nicht aus festen Pixeln bestehen, gibt es keine Treppchen und keine Unschärfe. Genau das unterscheidet Vektorgrafik von Rastergrafik.
Mit dem SVG ViewBox Rechner berechnest du aus deinen gewünschten Maßen direkt die passenden viewBox-Werte und das resultierende Seitenverhältnis – ohne im Kopf rechnen zu müssen.
viewBox und Seitenverhältnis
Das Verhältnis von width zu height in der viewBox legt das Seitenverhältnis der Grafik fest. viewBox="0 0 16 9" ergibt ein 16:9-Format, viewBox="0 0 1 1" ein Quadrat. Entscheidend ist: Wenn das Seitenverhältnis der viewBox nicht zum Seitenverhältnis des Anzeigebereichs passt, muss der Browser entscheiden, wie er die Diskrepanz auflöst – und genau dafür gibt es preserveAspectRatio.
preserveAspectRatio kurz erklärt
Dieses Attribut steuert, was passiert, wenn viewBox und Container unterschiedliche Proportionen haben. Standardmäßig (xMidYMid meet) skaliert die Grafik so weit, dass sie komplett hineinpasst, und wird zentriert – ähnlich wie object-fit: contain bei Bildern. Mit slice füllt sie stattdessen den ganzen Bereich und schneidet Überstehendes ab (wie cover). Setzt du none, wird die Grafik verzerrt, um exakt den Container auszufüllen.
width, height und viewBox: das Zusammenspiel
Ein häufiger Fehler ist, width und height am SVG-Element fest in Pixeln zu setzen und dann zu erwarten, dass die Grafik responsiv ist. Besser: Gib eine viewBox an, lass die festen Maße am Element weg oder überschreibe sie per CSS (width: 100%; height: auto;). So bestimmt die viewBox das Seitenverhältnis und CSS die tatsächliche Größe – die Grafik passt sich dann sauber dem Container an.
Ein praktisches Beispiel
Angenommen, du hast ein Icon, das ursprünglich 24 × 24 Pixel groß gezeichnet wurde. Setze viewBox="0 0 24 24". Jetzt kannst du es überall einsetzen – als 16-Pixel-Menü-Icon oder als 96-Pixel-Button – ohne neue Dateien zu erzeugen. Alle Pfadkoordinaten beziehen sich auf das 24er-Raster, die Darstellungsgröße bestimmst du außen herum.
So gehst du vor
Trage im SVG ViewBox Rechner deine Wunschbreite und -höhe ein, und du erhältst die korrekten viewBox-Werte samt Seitenverhältnis. Wenn du zusätzlich Pixelmaße in andere Einheiten umrechnen willst, hilft der Aspect Ratio Rechner, und für responsive Größenangaben lohnt der Viewport Rechner. Alle Frontend-Helfer findest du gesammelt unter kotsch.tech/webtools.
Häufige Fragen
Muss ich immer eine viewBox angeben?
Für skalierbare, responsive SVGs ja. Ohne viewBox ist die Grafik an feste Pixelmaße gebunden und verliert ihren wichtigsten Vorteil. Nur bei reinen Pixel-genauen Einzelgrafiken kannst du darauf verzichten.
Was bedeutet ein negativer min-x- oder min-y-Wert?
Damit verschiebst du den sichtbaren Ausschnitt. viewBox="-10 -10 120 120" zeigt einen Bereich, der 10 Einheiten vor dem Nullpunkt beginnt – nützlich, um etwa Strichbreiten oder Rahmen, die über den Nullpunkt hinausragen, nicht abzuschneiden.
Warum wirkt meine Grafik verzerrt?
Meist passt das Seitenverhältnis der viewBox nicht zu den per CSS gesetzten Maßen, kombiniert mit preserveAspectRatio="none". Lass entweder die feste Höhe weg (height: auto) oder sorge dafür, dass viewBox und Container dasselbe Verhältnis haben.