Ratgeber
Was ist eine SVG-Datei?
SVG steht für Scalable Vector Graphics. Eine SVG-Datei beschreibt ein Bild mit Formen und Koordinaten statt mit Pixeln und bleibt deshalb in jeder Größe scharf.
Was ist SVG für ein Dateityp?
Eine SVG-Datei ist eine Textdatei in XML. Statt die Farbe jedes Pixels zu speichern, enthält sie Anweisungen: Zeichne hier einen Kreis, einen Pfad durch diese Punkte, fülle ihn mit dieser Farbe. Dein Browser oder Grafikprogramm liest diese Anweisungen und zeichnet das Bild in der Größe, in der es angezeigt wird.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Dieses Beispiel ist eine vollständige SVG-Datei: ein limettengrüner Kreis auf einer Fläche von 100 × 100 Einheiten. Weil es Text ist, lässt sich eine SVG-Datei in einem Code-Editor öffnen, durchsuchen, komprimieren und von Hand ändern.
SVG ist ein offener Standard des World Wide Web Consortium und wurde 2001 erstmals veröffentlicht (W3C). Alle aktuellen Browser zeigen das Format ohne Plugins an.
SVG-Datei: Endung und Medientyp
SVG-Dateien haben die Endung .svg und den Medientyp image/svg+xml. Die komprimierte Variante .svgz ist dieselbe Datei, mit gzip gepackt. Auch manche Software für Schneideplotter und einige Schrift-Tools arbeiten mit SVG, das Format ist dabei dasselbe.
Wofür wird eine SVG-Datei verwendet?
- Logos und Icons auf Websites und in Apps, weil eine einzige Datei auf jeder Bildschirmdichte scharf aussieht.
- Illustrationen, Diagramme und Karten, die vergrößert oder groß gedruckt werden.
- Animationen und interaktive Grafiken, denn jede Form lässt sich mit CSS gestalten oder mit JavaScript verändern.
- Schneideplotter und Lasercutter, die den Umrissen der Formen folgen.
- Favicons in modernen Browsern.
Für Fotos ist SVG ungeeignet. Ein Foto hat fließende Tonwerte, für die Millionen winziger Formen nötig wären. JPG und WebP speichern es wesentlich effizienter.
SVG-Datei öffnen
Jeder Webbrowser öffnet eine SVG-Datei: Zieh die Datei in ein Fenster von Chrome, Firefox, Safari oder Edge. Um den Code neben dem Bild zu sehen, nimm unseren SVG-Viewer. Zum Bearbeiten der Zeichnung eignet sich ein Vektorprogramm wie Inkscape (kostenlos), Figma oder Adobe Illustrator. Unter Windows zeigt der Datei-Explorer mit einer Erweiterung Miniaturansichten von SVG-Dateien an, auf dem Mac zeigt die Übersicht sie mit der Leertaste an.
Unterschied zwischen PNG und SVG
| SVG | PNG | |
|---|---|---|
| Besteht aus | Formen und Koordinaten | Pixeln |
| Skalierung | In jeder Größe scharf | Unscharf beim Vergrößern |
| Transparenz | Ja | Ja |
| Als Text bearbeitbar | Ja | Nein |
| Geeignet für | Logos, Icons, Diagramme | Screenshots, detailreiche Bilder, Stellen, die kein SVG annehmen |
Beide Richtungen sind möglich: Der Konverter PNG in SVG zeichnet Pixel als Formen nach, und der Konverter SVG in PNG rendert Formen in der gewünschten Größe zu Pixeln.