SVG steht für Scalable Vector Graphics. Es ist der offene Standard des W3C für Bilder, die als Anweisungen statt als Pixel beschrieben werden: Zeichne hier einen Kreis, folge dieser Kurve, fülle diese Form mit dieser Farbe, setze dieses Wort in diese Schriftart. Da das Bild aus Anweisungen besteht, kann es in jeder Größe dargestellt werden, ohne jemals unscharf oder klötzchenhaft zu werden. Deshalb sind Logos, Icons, Karten und Diagramme so oft SVG.
Wie eine SVG ein Bild speichert
Eine SVG-Datei ist XML: lesbarer Text, den du in jedem Editor öffnen kannst. Ein <path>-Element enthält eine kompakte Zeichenfolge mit Zeichenbefehlen, <rect>, <circle> und <polygon> tun das Naheliegende, <text> enthält echten auswählbaren Text und <g> gruppiert Elemente, damit sie gemeinsam verschoben oder gestaltet werden können. Ein viewBox-Attribut definiert das Koordinatensystem, was dafür sorgt, dass die gesamte Zeichnung sauber skaliert.
Weil es Text ist, lässt sich ein SVG extrem gut komprimieren; ein gzippes SVG (manchmal mit der Erweiterung .svgz) ist oft nur ein Bruchteil seiner ursprünglichen Größe. Da es Text ist, kann ein SVG außerdem mit CSS gestaltet, animiert und skriptgesteuert werden. Ein Browser behandelt es als Teil des Dokuments und nicht als undurchsichtige Bilddatei.
Diese letzte Fähigkeit hat eine sicherheitsrelevante Seite, die du kennen solltest: Ein SVG kann ein <script>-Element enthalten. Überall dort, wo SVG als Benutzer-Upload akzeptiert wird, muss es bereinigt oder so ausgeliefert werden, dass es nicht ausgeführt werden kann. Deshalb lehnen einige Websites SVG ab, obwohl sie jedes Rasterformat akzeptieren.
SVG ist ein ungeeignetes Format für Fotos. Du kannst zwar ein Rasterbild darin einbetten, aber dann hast du ein Pixelbild, das in XML verpackt ist, und keinen der Skalierungsvorteile.
Welche Metadaten eine SVG enthält
SVG hat ein eigenes <metadata>-Element, und da der Standard nicht vorschreibt, was hinein gehört, legen Editoren dort sehr viel ab. Meistens enthält es RDF mit Dublin-Core-Begriffen: dc:title, dc:creator, dc:date, dc:description, dc:rights und eine Lizenz-URI. Ein <title>- und ein <desc>-Element können sowohl im Wurzelelement als auch an jeder einzelnen Form stehen, wo sie zugleich als Zugriffstext für Screenreader dienen.
Dann gibt es noch die eigene Verwaltung des Editors, und die ist meist der größte Teil. Inkscape schreibt einen ganzen eigenen Namensraum: die Fenstergeometrie des Dokuments, Zoomstufe und Cursorposition beim letzten Speichern, Hilfslinien, Rastereinstellungen, Ebenennamen und deren Sichtbarkeit sowie eine inkscape:version-Zeichenfolge. Illustrator bettet ein XMP-Paket mit eigenen Dokument-IDs und der Bearbeitungshistorie ein. Nichts davon zeichnet irgendetwas.
Daraus folgen zwei praktische Punkte. Editor-Daten können leicht den größten Teil der Datei ausmachen, daher halbiert ein SVG-Optimierer vor der Veröffentlichung die Dateigröße oft. Und Ebenennamen sind Text, den du geschrieben hast: <g inkscape:label="client logo v3 REJECTED"> ist im Bild unsichtbar, in der Datei aber klar zu sehen.
Wann du SVG verwenden solltest
Verwende SVG für alles, was gezeichnet und nicht fotografiert ist: Logos, Icons, Diagramme, Charts, Illustrationen, Karten. Es ist die passende Wahl fürs Web, wo eine Datei alle Pixeldichten abdeckt, und für den Druck, wo sie auf jede Größe skaliert werden kann.
Verwende PNG oder JPG für Fotos und alles mit kontinuierlichen Farbabstufungen. Exportiere zusätzlich eine flache Rasterkopie, wenn du ein Bild brauchst, das sich in Software öffnen lässt, die zu alt oder zu eingeschränkt für SVG ist, und entferne die Editor-Metadaten vor der Veröffentlichung, sowohl um die Datei zu verkleinern als auch, weil Ebenennamen nicht immer für die Öffentlichkeit bestimmt sind.