SVG ohne Qualitätsverlust skalieren

Skalieren heißt bei Vektorgrafik etwas anderes als bei Fotos. Ein Bild wird vergrößert, indem neue Pixel entstehen. Eine Zeichnung wird vergrößert, indem dieselben Koordinaten auf eine größere Fläche abgebildet werden. SVG ohne Qualitätsverlust skalieren ist deshalb weniger eine Technik als eine Frage der richtigen Stelle im Dokument.

Der Vektor-Editor arbeitet auf dieser Ebene, weil er die Geometrie bearbeitet und nicht die gerasterte Ansicht. Was dabei passiert, lässt sich an drei Werten ablesen, die in fast jeder SVG-Datei stehen.

Der viewBox ist der eigentliche Hebel

Ganz oben im Wurzelelement stehen viewBox und oft auch width und height. Die viewBox beschreibt den Koordinatenraum des Inhalts, die beiden anderen Werte die Anzeigegröße. Ein Symbol mit viewBox="0 0 24 24" und width="240" wird mit zehn Gerätepixeln pro Nutzereinheit dargestellt. Ändere nur width, und die Grafik wird größer, ohne dass sich ein einziger Pfad ändert.

Das ist der Grund, warum eine SVG-Datei für alle Größen reicht. Die Datei enthält keine Auflösung, sondern ein Verhältnis. Wer die Datei auf 2.400 Pixel bringt, skaliert ein 24-Einheiten-Symbol um den Faktor hundert. Die Datei bleibt dabei gleich groß.

Was Skalierung sichtbar verändert

Nicht alles im Dokument ist relativ. Eine Kontur von einer Nutzereinheit erscheint bei hundertfacher Anzeige einhundert Pixel breit. Das ist konsistent, denn die ganze Zeichnung wächst mit. Trotzdem kann es unerwünscht sein, wenn feine Linien bei kleiner Darstellung verschwinden und bei großer alles dominieren.

Bei Text liegt der Effekt anders. Er skaliert zwar mit der Zeichnung, bleibt aber von Schriften abhängig, die beim Betrachter vorhanden sein müssen. Fehlt die Schrift, kann ein Zeilenumbruch an einer völlig anderen Stelle liegen als in deiner Ansicht.

Und es gibt kein objektiv richtiges Verhalten. Eine Skizze mit dünnen Linien will relativ mitskalieren, ein technisches Symbol mit festem Rahmen oft nicht. Die Entscheidung hängt am Motiv, nicht am Werkzeug.

Und dann sind da die eingebetteten Bilder. Ein Raster in einer SVG hat eine eigene, feste Auflösung. Wird die Grafik darüber hinaus vergrößert, bleibt das Bild bei seiner Punktzahl und wird weich. Der Editor repariert das nicht, er kann keine Bildpunkte erfinden, die nie in der Datei standen.

Kunstfläche und Objekte sind zwei Dinge

Ein häufiges Missverständnis betrifft die Kunstfläche. Wer die Zeichenfläche vergrößert, verschiebt den Rahmen, aber nicht die Objekte darin. Die Grafik sitzt anschließend in einer größeren Fläche, was beim Export als PNG zu einem Rand führt, den niemand wollte.

Umgekehrt gilt: alles auswählen und dann skalieren vergrößert auch Konturen und Abstände, und das ist meistens genau richtig. Zwei getrennte Arbeitsschritte, zwei getrennte Werkzeuge, und die Verwechslung kostet regelmäßig einen Export.

Konkrete Größen zum Nachrechnen

Für Bildschirmarbeit ist DIN A4 bei 96 dpi etwa 793,7 × 1.122,5 Pixel groß, gerechnet als Millimeter geteilt durch 25,4 mal 96. Für eine Druckvorgabe bei 300 ppi sind es 2.480 × 3.508 Pixel.

Die Umrechnung dahinter ist immer dieselbe. Ein Zoll entspricht 96 CSS-Pixeln, ein Millimeter ist ein Fünfundzwanzigstel Zoll, und das mal 96 ergibt die Pixelzahl. Wer in Millimetern denkt, muss für die Bildschirmvorschau also umrechnen; wer in Pixeln denkt, hat es leichter.

Diese Zahlen sind der Maßstab für die Frage, ob eine Skalierung überhaupt nötig ist. Eine SVG, die auf einer Website in 320 Pixel Breite erscheint, braucht keine 3.000 Pixel. Die Grafik braucht eine saubere viewBox und sonst nichts. Wer stattdessen eine riesige Datei exportiert und sie im Browser herunterskalieren lässt, verschenkt Ladezeit.

Wann du wirklich neu exportieren musst

Ein Neu-Export ist nur dann nötig, wenn das Zielformat ein Raster ist. Für ein PNG in 800 Pixel Breite musst du die Grafik in dieser Größe rendern lassen, sonst wird ein größeres Bild nachträglich verkleinert oder ein kleineres hochgezogen. Beides kostet Qualität.

Innerhalb der SVG gibt es dagegen keinen Grund, für jede Zielgröße eine eigene Datei zu führen. Eine Datei, mehrere width-Werte, ein Aufruf. Das ist der eigentliche Gewinn.

Wer den Einstieg sucht, findet den Ablauf unter SVG-Dateien im Browser bearbeiten. Wenn es nicht um Größe, sondern um Dateigewicht geht, ist SVG für das Web vorbereiten der passende Anschluss.