SVG (Scalable Vector Graphics) beschreibt ein Bild durch Formen statt Pixel: Pfade, Kreise, Text, Verläufe und Farben, notiert als XML-Text. Es lässt sich beliebig skalieren, ohne unscharf zu werden, und dominiert deshalb im Web bei Logos, Icons, Illustrationen und Diagrammen. SVG-Dateien bekommt man von Grafikern, aus Icon-Bibliotheken, als Export aus Illustrator, Figma oder Inkscape, aus Diagramm-Werkzeugen und als Schneidedateien für Cricut, Silhouette oder Laserschneider. Jeder aktuelle Browser zeigt SVG an.
Geschichte und Versionen
SVG ist ein Standard des World Wide Web Consortium (W3C). Die Arbeit begann 1996, der erste öffentliche Entwurf erschien im Februar 1999.
- SVG 1.0 wurde im September 2001 W3C-Empfehlung.
- SVG 1.1 folgte im Januar 2003, die Second Edition (August 2011) ist bis heute die Version, an der sich die meiste Software orientiert.
- SVG Tiny 1.2 (Dezember 2008) war ein Profil für Mobiltelefone.
- SVG 2 ist seit Oktober 2018 Candidate Recommendation und wird noch fertiggestellt. Browser beherrschen schon vieles davon, Editoren weniger.
Der Medientyp lautet image/svg+xml. Ein mit gzip komprimiertes SVG trägt die Endung .svgz.
Was ein SVG enthalten kann
- Vektorformen (
path,rect,circle…) mit Füllung, Kontur, Verläufen, Mustern, Beschneidung, Masken und Filtern wie Weichzeichnung oder Schlagschatten. - Echten Text in einer benannten Schrift. Die Schrift selbst steckt meist nicht in der Datei, das Ergebnis hängt also von den Schriften ab, die dort installiert sind, wo das SVG dargestellt wird.
- Rasterbilder, entweder als Base64-Daten eingebettet oder als separate Datei verlinkt.
- CSS, Animation und JavaScript. Weil ein SVG Skripte ausführen kann, lehnen es viele Upload-Formulare, Onlineshops und Mailprogramme aus Sicherheitsgründen ab.
- Größe:
width,heightundviewBoxlegen die Zeichenfläche fest. Ein CSS-Pixel ist 1/96 Zoll, 96 Einheiten ergeben also einen Zoll.
SVG öffnen und bearbeiten
- Ansehen: Datei in einen beliebigen Browser ziehen. Auf dem Smartphone aus der Dateien-App im Browser öffnen.
- Bearbeiten: Inkscape (kostenlos für Windows, macOS und Linux), Adobe Illustrator, Affinity Designer, Figma. Einfachere Dateien schafft LibreOffice Draw.
- Office: Word und PowerPoint in Microsoft 365 fügen SVG als Grafik ein.
- Vorschaubilder im Windows-Explorer: nicht eingebaut. Die kostenlosen PowerToys von Microsoft ergänzen SVG-Vorschau und Miniaturansichten.
- SVG ist Text, jeder Code-Editor öffnet es. Praktisch, um eine Farbe oder Größe von Hand zu korrigieren.
Typische Probleme mit SVG
Text im SVG erscheint in einer anderen Schrift
Die im SVG genannte Schrift ist auf dem Rechner oder im Konverter, der es darstellt, nicht installiert, also wird ersetzt. Vor dem Weitergeben Text in Pfade umwandeln: in Inkscape Pfad → Objekt in Pfad umwandeln, in Illustrator Schrift → In Pfade umwandeln.
Bilder im SVG fehlen
Sie waren nur auf Dateien auf der Festplatte des Urhebers oder im Web verlinkt, nicht eingebettet. Fragen Sie nach einer Version mit eingebetteten Bildern. Unser Konverter hat keinen Internetzugang und kann verlinkte Dateien ebenfalls nicht laden.
SVG in PNG wird unscharf oder zu klein
Ein PNG hat eine feste Pixelzahl. Unser Konverter rendert SVG in PNG bei 150 dpi, aus jedem SVG-Pixel werden so 1,5625 PNG-Pixel. Größen und Details stehen unter SVG in PNG umwandeln.
Website oder Onlineshop akzeptiert kein SVG
Für Bilder im Web ein PNG hochladen, für den Druck, wenn Vektoren scharf bleiben müssen, ein PDF.
PNG oder JPG in SVG umwandeln
Das ist Nachzeichnen, keine Umwandlung. Unser Konverter vektorisiert Rasterbilder nur in Schwarz-Weiß, passend für Logos, Unterschriften und Strichzeichnungen. Farbige Motive besser in Inkscape mit „Bitmap nachzeichnen“ und mehreren Durchgängen vektorisieren.
SVG umwandeln
- SVG in PDF, EPS und PS: bleibt Vektor, für Druckereien und Layoutprogramme.
- SVG in EMF/WMF für ältere Office-Versionen, SVG in DXF für CAD und Laserschneider.
- SVG in PNG (150 dpi, Transparenz bleibt erhalten).
- SVG in JPG, WebP, GIF oder TIFF: in der im SVG festgelegten Größe gerendert und im Zielformat gespeichert. JPG erhält weißen Hintergrund und Qualität 90.
- Animationen und Skripte gehen in allen diesen Formaten verloren, gerendert wird der statische Ausgangszustand.
SVG auf einen Blick
| Entwickler | World Wide Web Consortium (W3C) |
|---|---|
| Erste Version | SVG 1.0, September 2001 |
| Aktuelle Version | SVG 1.1 Second Edition (2011); SVG 2 als Candidate Recommendation |
| Typ | Vektorgrafik, XML-Text |
| Kompression | keine, optional gzip (.svgz) |
| Typische Nutzung | Logos, Icons, Illustrationen, Diagramme, Schneiden und Plotten |
Spezifikationen (englisch): SVG 2 und SVG 1.1 Second Edition beim W3C, Formatgeschichte in der Beschreibung der Library of Congress.