Wenn du schon einmal versucht hast, ein Logo zu vergrößern und gesehen hast, wie das Bild unscharf und pixelig wurde, weißt du, wie frustrierend dieses Problem ist. SVG existiert, um genau das zu lösen. Es ist ein Bildformat, das völlig anders funktioniert als JPG und PNG — und diesen Unterschied zu verstehen ist entscheidend, um in jeder Situation das richtige Format zu verwenden.
Was bedeutet SVG?
SVG bedeutet Scalable Vector Graphics — oder "skalierbare Vektorgrafiken" auf Deutsch. Es ist ein offenes Bildformat, standardisiert vom W3C (demselben Konsortium, das die Spezifikationen von HTML und CSS definiert), und wird nativ von allen modernen Browsern unterstützt.
Anders als JPG und PNG, die Bilder als Raster farbiger Pixel speichern, beschreibt SVG das Bild in Textform, mit mathematischen Koordinaten zur Darstellung von Formen, Linien, Kurven und Farben. Eine SVG-Datei ist in der Praxis eine Textdatei — und kann in jedem Code-Editor geöffnet und bearbeitet werden.
Wie funktioniert SVG intern?
Eine SVG-Datei ist in XML geschrieben, einer Auszeichnungssprache ähnlich HTML. Zum Beispiel wird ein roter Kreis in SVG so beschrieben:
Der Browser liest diese mathematischen Anweisungen und rendert das Bild direkt auf dem Bildschirm, wobei die Pixel in Echtzeit berechnet werden. Deshalb kann SVG in jeder Größe angezeigt werden — von einem 16x16-Pixel-Favicon bis zu einem 10-Meter-Plakat — ohne jeglichen Qualitätsverlust.
Was sind die Vorteile von SVG?
- Skalierbar ohne Qualitätsverlust: vergrößere oder verkleinere nach Belieben — das Bild bleibt in jeder Auflösung scharf, auch auf Retina- und 4K-Displays.
- Leichte Dateien: einfache Logos und Icons in SVG sind oft viel kleiner als in PNG, besonders in großen Größen.
- Mit Code bearbeitbar: es ist möglich, Farben, Größen und Animationen direkt über CSS oder JavaScript zu ändern, ohne einen Bildeditor zu benötigen.
- Von Suchmaschinen indexierbar: da der Inhalt Text ist, kann Google den Text innerhalb eines SVG lesen und indexieren.
- Unterstützung für Animationen: es ist möglich, CSS- und SMIL-Animationen direkt in SVG zu erstellen, ohne auf GIFs oder Videos angewiesen zu sein.
- Barrierefreiheit: Titel und Beschreibungen können dem SVG für Screenreader hinzugefügt werden.
Was sind die Einschränkungen von SVG?
- Nicht geeignet für Fotos: Fotografien haben Millionen von Farbvariationen und komplexe Verläufe. Das in Vektoren darzustellen würde riesige und ineffiziente Dateien erzeugen — JPG ist immer die richtige Wahl für Fotos.
- Komplexe Bilder werden schwer: sehr detaillierte Illustrationen mit vielen Formen und Verläufen können große und langsam zu rendernde SVGs erzeugen.
- Lernkurve für manuelle Bearbeitung: SVG direkt im Code zu bearbeiten erfordert Kenntnisse in XML und Vektormathematik. Tools wie Illustrator oder Figma erleichtern diesen Prozess.
💡 Praktische Regel: Nutze SVG für Logos, Icons, Illustrationen, Grafiken, Karten und jede Kunst, die in mehreren Größen angezeigt werden muss. Nutze JPG oder WebP für Fotografien und Bilder mit vielen Details und komplexen Verläufen.
SVG vs. PNG vs. JPG — wann welches verwenden?
| Merkmal | SVG | PNG | JPG |
|---|---|---|---|
| Typ | Vektor | Raster (Pixel) | Raster (Pixel) |
| Skalierbar ohne Verlust | Ja | Nein | Nein |
| Transparenz | Ja | Ja | Nein |
| Ideal für Fotos | Nein | Nein | Ja |
| Ideal für Logos und Icons | Ja | Ja | Nein |
| Bearbeitbar über CSS/JS | Ja | Nein | Nein |
| Von Browsern unterstützt | Ja | Ja | Ja |
Wie man SVG auf Websites und in Anwendungen verwendet
Es gibt drei Hauptwege, ein SVG in eine Webseite einzubinden:
- Als <img>-Tag: die einfachste Methode. Das SVG wird wie jedes andere Bild behandelt, kann aber nicht über CSS oder JavaScript manipuliert werden.
- Inline im HTML: der SVG-Code wird direkt in das HTML der Seite eingefügt. Ermöglicht volle Kontrolle über CSS und JS — Farben, Animationen und Interaktionen. Das ist der bevorzugte Ansatz für interaktive Icons.
- Als CSS-Hintergrund: mit
background-image: url('icon.svg'). Nützlich für dekorative Icons, aber mit eingeschränktem Zugriff über JavaScript.
Wie konvertiert man Bilder zu SVG?
Ein Foto oder PNG in SVG zu konvertieren ist durch einen Prozess namens Vektorisierung möglich, der Pixel in geometrische Formen umwandelt. Das Ergebnis ist am besten für einfache Bilder mit wenigen Farben und klar definierten Kanten — wie Logos auf weißem Hintergrund. Der Bild-Konverter von ImageTools ermöglicht die Konvertierung von Dateien zwischen den wichtigsten Formaten, einschließlich PNG und JPG zu anderen webkompatiblen Formaten.
Konvertiere jetzt deine Bilder
Wandle Dateien schnell und kostenlos zwischen den wichtigsten Bildformaten um, direkt im Browser.
Bild konvertierenIst SVG gut fürs SEO?
Ja. Da SVG ein textbasiertes Format ist, kann Google seinen Inhalt crawlen und indexieren. Zudem sind Logos und Icons in SVG oft kleiner als in PNG, was zu schnelleren Seiten beiträgt — ein direkter Ranking-Faktor bei Google seit der Einführung der Core Web Vitals.
Um SVGs fürs SEO zu optimieren, füge die Attribute title und desc im SVG-Code hinzu, die als Alternativtext für Screenreader und Suchmaschinen dienen.