SVG

Ein normales Foto besteht aus Millionen winziger farbiger Punkte. Vergrößert man es stark, sieht man diese Punkte als Klötzchen. SVG geht einen anderen Weg. Die Datei speichert keine Punkte, sondern eine Beschreibung: ein Kreis mit diesem Mittelpunkt, eine Linie von hier nach dort, diese Fläche in Rot. Beim Anzeigen rechnet das Programm diese Beschreibung frisch in Bildpunkte um, passend zur gewünschten Größe. Deshalb bleibt ein SVG scharf, egal ob es als kleines Symbol auf dem Handy oder als Plakat gedruckt wird. Die Abkürzung steht für Scalable Vector Graphics, also skalierbare Vektorgrafik.

Warum Logos fast immer als SVG vorliegen

Ein Firmenlogo muss auf einer Visitenkarte funktionieren und auf einer Hauswand. Mit einem Punkteraster bräuchte man dafür viele Versionen in verschiedenen Auflösungen. Ein SVG genügt für alle Fälle. Genau deshalb liefern Unternehmen ihre Logos und Symbole heute standardmäßig in diesem Format aus.

Dazu kommt die Dateigröße. Ein einfaches Icon aus zwanzig Linien braucht als SVG oft nur wenige Kilobyte. Dieselbe Grafik als hochaufgelöstes Punktebild kann leicht hundertmal so groß sein. Auf Webseiten mit dutzenden Symbolen macht das einen spürbaren Unterschied bei der Ladezeit.

Ein dritter Punkt ist die Barrierefreiheit. Weil in einem SVG einzelne Bestandteile benannt werden können, lesen Vorleseprogramme für blinde Menschen die Beschreibung vor. Ein Punkteraster ist für solche Programme dagegen eine undurchsichtige Fläche.

Text statt Pixel: was in der Datei steht

Öffnet man ein SVG in einem Texteditor, sieht man lesbaren Code. Er ist in derselben Sprachfamilie geschrieben wie Webseiten selbst. Eine Zeile könnte lauten: zeichne einen Kreis mit Radius 50 an Position 100, 100, gefüllt in Blau. Der Browser liest diese Anweisungen und zeichnet das Bild.

Das wichtigste Bauteil heißt Pfad. Ein Pfad ist eine Folge von Punkten, zwischen denen gerade Strecken oder gebogene Kurven verlaufen. Aus Pfaden lässt sich jede Form zusammensetzen, auch komplizierte Buchstaben oder Landkarten. Farben, Linienstärken und Transparenz werden separat als Eigenschaften angegeben.

Weil das Ganze Text ist, kann man es nachträglich verändern. Ein Programm kann die Farbe eines Icons per Befehl umstellen, ohne die Grafik neu zu zeichnen. Es lassen sich auch Bewegungen definieren, etwa ein Ladekreis, der sich dreht. Der Nachteil dieser Offenheit: Ein SVG darf Programmcode enthalten. Deshalb prüfen seriöse Webseiten hochgeladene SVG-Dateien, bevor sie sie anzeigen.

Vom Icon auf der Webseite bis zum KI-Bildgenerator

Im Alltag begegnet dir SVG meist unbemerkt. Fast jedes Symbol auf einer modernen Webseite ist eines: das Lupensymbol der Suche, das Warenkorb-Icon, die Länderflaggen im Sprachmenü. Auch die Diagramme in Online-Artikeln über Aktienkurse sind häufig SVGs, weil sie beim Zoomen scharf bleiben.

In Designprogrammen wie Figma oder Inkscape ist SVG das übliche Austauschformat. Wer eine Grafik von einem Programm ins andere bringen will, exportiert sie als SVG. Für Fotos taugt das Format dagegen nicht. Ein Gesicht besteht nicht aus klaren Formen, sondern aus feinen Farbverläufen. Dafür bleiben Formate wie JPEG oder PNG die richtige Wahl.

In der KI-Welt taucht SVG seit einiger Zeit in Tests für Sprachmodelle auf. Man bittet ein Modell, den Code für ein Bild zu schreiben, etwa für ein Fahrrad oder ein Einhorn. Weil das Modell dabei nicht malt, sondern Anweisungen formuliert, zeigt sich, ob es räumliche Zusammenhänge wirklich versteht. Frühe Modelle produzierten dabei Fahrräder mit Rädern an falscher Stelle. Die Aufgabe gilt inzwischen als beliebter Gradmesser für Fortschritt.