Was ist eine SVG-Datei?

SVG ist ein reines Textformat, das sich in jedem Editor öffnen lässt. Es speichert Formen und Koordinaten statt Bildpunkte und bleibt deshalb in jeder Größe scharf — ein Logo auf Plakatgröße verliert nichts. Eingesetzt wird es für das Web, Logos und Strichzeichnungen und die Bearbeitung.

Die Endung lautet .svg, der volle Name Scalable Vector Graphics. Beides sagt weniger aus als das, was die Datei halten kann — und davon handelt der Rest dieser Seite.

W3C hat es 2001 veröffentlicht. Die Spezifikation ist SVG 1.1.

Das Alter ist aus einem praktischen Grund interessant: je älter ein Format, desto mehr Programme hatten Zeit, es zu lernen.

Sie ist vollständig veröffentlicht, das Format lässt sich also aus dem Dokument umsetzen statt durch Nachsehen. Deshalb taucht es in so vielen Programmen auf, und deshalb gehen Dateien von vor zwanzig Jahren heute noch auf. Veröffentlicht heißt allerdings nicht lizenzfrei: Wo ein Format einen Codec einpackt, ist die Patentfrage eine eigene, die der Standard nicht mitbeantwortet.

SVG speichert seinen Inhalt exakt. Erneutes Speichern ändert nichts, es lässt sich also beliebig oft öffnen, bearbeiten und wieder ablegen, ohne dass sich Schaden ansammelt — genau das macht es zu einem Arbeitsformat und nicht zu einem Ausgabeformat.

SVG führt einen Alphakanal mit, ein Logo behält also seine weichen Kanten über allem, was dahinterliegt, statt in einem weißen Kasten anzukommen.

SVG kann eine Animation speichern statt eines stehenden Bildes. Das ist vor dem Umwandeln wichtig: Ein Ziel, das nur ein Bild hält, behält das erste und lässt den Rest fallen — meist ohne es zu sagen.

Arbeiten kann es in RGB.

Acht Bit je Kanal ist das, was ein Bildschirm zeigt und was fast jedes Ausgabeformat mitbringt.

SVG legt die Bestandteile eines Bildes getrennt ab statt zusammengerechnet — das macht es zur Arbeitsdatei. Fast jedes Format, in das es sich umwandeln lässt, legt sie zusammen, und das ist nicht umkehrbar. Behalte das Original mit Ebenen.

Inkscape, Adobe Illustrator und Figma lesen es, und die meisten Programme derselben Art ebenfalls.

Wenn eine Datei nicht aufgeht, liegt es selten am Format — häufiger daran, dass das Programm älter ist als das Format. Die Umwandlung in etwas Älteres ist der verlässliche Weg daran vorbei, und dafür gibt es den Rest dieser Website.

Jeder aktuelle Browser liest es.

Damit lässt es sich bedenkenlos auf eine Seite stellen oder an eine Nachricht hängen, ohne sich zu fragen, was die Gegenseite installiert hat.

SVG ist zum Öffnen und Ändern gedacht. Behalte die Datei in diesem Format, solange die Arbeit läuft, und exportiere daraus, wann immer eine fertige Fassung gebraucht wird.

Eine SVG ist ein XML-Dokument. Wer sie in einem Texteditor öffnet, findet lesbare Anweisungen: einen Kreis an dieser Koordinate mit diesem Radius zeichnen, diesen Pfad mit dieser Farbe füllen, diesen Text an diese Stelle setzen. Es gibt keine Bildpunkte in der Datei, an keiner Stelle.

Genau diese Eigenschaft unterscheidet SVG von jedem anderen Bildformat auf dieser Seite. Sie lässt sich in einer Versionsverwaltung vergleichen, von Hand bearbeiten, von einem Skript erzeugen, mit demselben gzip komprimieren, das auch HTML komprimiert, und durchsuchen. Und eine beschädigte SVG lässt sich meist durch Lesen diagnostizieren — bei einer defekten PNG geht das nicht.

Die Datei beschreibt Formen statt eines Rasters aus Farbwerten, also zeichnet der Renderer sie bei jeder gewünschten Größe neu. Ein Logo, das bei 24 Pixeln angezeigt und meterbreit gedruckt wird, stammt aus derselben Datei und ist bei beidem exakt.

Deshalb ist SVG die richtige Antwort für Logos, Icons, Diagramme und Illustrationen — und die falsche für Fotografien. Ein Foto hat keine Formen, die sich beschreiben ließen: Eine Umwandlung nach SVG erzeugt entweder eine riesige Datei aus lauter farbigen Rechtecken oder eine posterisierte Annäherung, und keins von beidem war gewünscht.

Zwei Attribute steuern, wie sich eine SVG in einem Layout verhält. width und height geben ihr eine Eigengröße, viewBox definiert das Koordinatensystem, in dem die Formen gezeichnet sind. Ist ein viewBox vorhanden, skaliert die Zeichnung auf jede Box, die die Seite ihr gibt.

Fast jede Beschwerde über eine SVG in der falschen Größe führt hierher zurück. Eine Datei mit festen Maßen und ohne viewBox ignoriert CSS-Größenangaben und bleibt bei dem, was das Designprogramm exportiert hat. Einen passenden viewBox nachzutragen ist meist eine Ein-Zeilen-Korrektur und macht aus einer Exportdatei ein brauchbares Element.

Eine SVG mit Text verweist auf ihre Schriftarten nur mit dem Namen, genau wie eine Webseite. Fehlt die Schriftart auf dem Zielgerät, ersetzt der Renderer sie durch etwas anderes, Zeichenbreiten ändern sich, und ein sorgfältig positionierter Schriftzug verschiebt sich oder läuft über.

Die übliche Absicherung ist, Text in Pfade zu wandeln: Jeder Buchstabe wird zur Kontur. Das garantiert das Aussehen überall und macht den Text dauerhaft unbearbeitbar und nicht mehr durchsuchbar. Bei einem Logo ist das der richtige Tausch, bei einem Diagramm mit Achsenbeschriftung oder einer gepflegten Zeichnung nicht — dort lohnt sich eine parallel gehaltene Version mit echtem Text.

Steht die SVG direkt im HTML-Quelltext statt über ein img-Tag eingebunden, werden ihre Elemente Teil der Seite. CSS kann einen Pfad beim Hover umfärben, ein Stylesheet ein Icon für den Dunkelmodus anpassen, JavaScript einzelne Teile animieren.

Über img oder als CSS-Hintergrund geladen gilt nichts davon — die SVG wird isoliert gerendert, und die Seite kommt nicht an sie heran. Diese Unterscheidung entscheidet über die Einbindungsart, und sie ist der Grund, warum dieselbe Datei an einer Stelle einer Website gestaltbar und an einer anderen völlig starr sein kann.

Weil eine SVG ein Dokument statt eines Bildes ist, kann sie script-Elemente, externe Referenzen und Links enthalten. Von der eigenen Domain ausgeliefert und direkt geöffnet, läuft dieses Skript mit den Rechten der Seite — ein Cross-Site-Scripting-Weg, den eine PNG schlicht nicht hat.

Deshalb lehnen viele Uploadformulare SVG grundsätzlich ab, und eine Seite, die trotzdem welche von Nutzern annimmt, sollte sie bereinigen statt ihnen zu vertrauen. Auch als Empfänger lohnt sich das Wissen: Eine SVG aus unbekannter Quelle steht näher an einer HTML-Datei als an einem Bild, und sie im Browser zu öffnen ist kein neutraler Vorgang.

Beim Umwandeln in PNG, JPG oder ein anderes Pixelformat rendert unser Werkzeug die Datei im Browser mit einer eigenen Rendering-Engine statt mit der Zeichenfläche des Browsers selbst, damit das Ergebnis auf jedem Gerät gleich aussieht. Ohne eigene Breitenangabe entsteht ein Bild mit 1.024 Pixeln Breite, die Höhe folgt aus dem viewBox; der Hintergrund ist dabei vollständig transparent, bis eine Hintergrundfarbe gewählt wird.

Für den umgekehrten Weg — aus einem Rasterbild eine SVG machen — zeichnet der Konverter das Bild als Flächen einheitlicher Farbe nach. Das trifft ein flächiges Logo gut und eine Fotografie schlecht: Ein Screenshot mit Text kann als Vektordatei ein Vielfaches der Ausgangsgröße erreichen, weil jede Kante nachgezogen werden muss. Ob das Ergebnis kleiner oder größer als das Original wurde, zeigt die Seite vor dem Herunterladen an.