Was ist SVG? Ein Leitfaden zum Vektorformat

SVG ist ein Bildformat, das statt aus Pixeln aus Zeichenanweisungen besteht. Wird ein Logo, ein Icon oder ein Diagramm als SVG gespeichert, enthält die Datei Befehle wie „zeichne eine Kurve von diesem Punkt zu jenem und fülle sie mit dieser Farbe“. Deshalb bleibt SVG in jeder Größe scharf, ist oft winzig und lässt sich in einem Texteditor öffnen und bearbeiten. Dieser Artikel behandelt den Platz von SVG unter den W3C-Standards, den Aufbau der Datei, die Unterstützung in Browsern und Software, die Sicherheitsrisiken und die Umwandlung zwischen SVG und PNG oder JPG.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basierter W3C-Standard zur Beschreibung zweidimensionaler Vektorgrafiken. Die Dateiendung ist .svg, der MIME-Typ image/svg+xml. Eine mit gzip komprimierte Variante nutzt die Endung .svgz.

Rasterformate (JPG, PNG, WebP) speichern ein Bild als festes Pixelraster; vergrößert man es, werden die Pixel sichtbar. SVG beschreibt Formen mathematisch, und der Browser oder das Programm zeichnet sie in der jeweiligen Bildschirmauflösung neu. Der Bildformat-Leitfaden von MDN nennt SVG eine ideale Wahl für Bilder, die sich als Zeichenbefehle darstellen lassen, besonders wenn die Anzeigegröße unbekannt ist oder schwankt, und weist darauf hin, dass es für Fotos in der Regel nicht geeignet ist.

Geschichte: SVG 1.0, 1.1 und SVG 2

• 4. September 2001: SVG 1.0 wurde als W3C-Empfehlung veröffentlicht.
• 14. Januar 2003: SVG 1.1 wurde zur Empfehlung. Version 1.1 teilte die Sprache in Module auf, was Teilmengen wie mobile Profile leichter definierbar machte.
• 16. August 2011: SVG 1.1 Second Edition erschien. Auf dieser stabilen Version bauen Browser heute auf.
• SVG 2: Laut der Veröffentlichungshistorie des W3C erschienen ab 2012 Arbeitsentwürfe, und der erste Candidate Recommendation Snapshot wurde am 15. September 2016 veröffentlicht. Der neueste Snapshot ist auf den 6. Oktober 2026 datiert; das Dokument befindet sich weiterhin im Stadium der Candidate Recommendation.

SVG 2 baut auf 1.1 Second Edition auf und zielt auf eine bessere Integration mit HTML und CSS. Einige Themen wie Filter, Masken und Schriften wanderten in eigene CSS- und FX-Module. In der Praxis setzen Browser Teile von SVG 2 um, gehen Sie also nicht davon aus, dass jede Funktion überall läuft.

Aufbau einer SVG-Datei

Eine einfache SVG-Datei sieht so aus:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Koordinatensystem: viewBox, width und height

viewBox legt das interne Koordinatensystem der Zeichnung fest (hier 0 bis 100). width und height bestimmen, wie viel Platz die Zeichnung auf der Seite einnimmt. Ein SVG mit viewBox skaliert proportional auf jede Größe, die Sie ihm per CSS geben. Dateien ohne viewBox können beim Skalieren abgeschnitten werden, einer der häufigsten Fehler bei Logos.

Zentrale Elemente

• Formen: rect, circle, ellipse, line, polyline, polygon und path, mit dem sich alles zeichnen lässt.
• Text: text und tspan. Text bleibt markier- und durchsuchbar, fehlt die Schrift aber auf dem anzeigenden Gerät, wird eine Ersatzschrift verwendet.
• Gruppierung und Wiederverwendung: g, defs, symbol, use. Icon-Sets werden oft als symbol-Elemente in einer Datei gebündelt.
• Füllung und Kontur: Volltonfarben, lineare und radiale Verläufe, Muster, Beschneidungspfade, Masken und Filter (Weichzeichner, Schlagschatten).
• Stil und Animation: CSS kann SVG gestalten; CSS-Animationen und SMIL-Animationselemente sorgen für Bewegung.
• Eingebettete Inhalte: image für Rasterbilder, foreignObject für HTML und script für JavaScript.

Farbe, Transparenz, Ebenen und Seiten

Transparenz ist in SVG von Haus aus vorhanden: Alles, was nicht gezeichnet ist, bleibt leer, und opacity sowie fill-opacity legen Halbtransparenz fest. Ebenen werden durch g-Gruppen abgebildet; Inkscape und Illustrator speichern ihre Ebenen auf diese Weise. Farben sind standardmäßig sRGB, und eine Bittiefengrenze im üblichen Sinn gibt es nicht, weil Farben als Zahlen geschrieben werden. SVG ist kein mehrseitiges Dokumentformat; für mehrseitige Zeichnungen passt PDF besser.

Unterstützung in Browsern, Systemen und Software

Laut MDN unterstützen Chrome, Edge, Firefox, Opera und Safari SVG. Sie können es über <img>, als CSS-background-image, inline im HTML oder mit <object> und <iframe> verwenden. Vektorprogramme wie Inkscape, Adobe Illustrator, Affinity Designer und Figma lesen und schreiben SVG, und aktuelle Versionen von Microsoft Office erlauben das Einfügen von SVG-Grafiken.

Anderswo ist die Unterstützung schwach: Viele soziale Netzwerke, E-Mail-Programme, Messenger und Upload-Formulare lehnen SVG ab oder zeigen keine Vorschau. Ein Grund dafür ist das unten beschriebene Sicherheitsrisiko.

Sicherheit: SVG wie ein Dokument behandeln

SVG ist ein XML-Dokument und kann ein script-Element, Ereignisattribute (wie onload) und externe Verweise enthalten. Die MDN-Seite „SVG as an image“ erklärt, dass Browser JavaScript deaktivieren und keine externen Ressourcen wie Bilder oder Stylesheets laden, wenn SVG über <img> oder als CSS-Hintergrund eingesetzt wird. Diese Einschränkungen gelten nicht, wenn die Datei direkt geöffnet oder mit <iframe>, <object> oder <embed> eingebettet wird.

Die praktische Folge: Lässt eine Website Nutzer SVG-Dateien hochladen und liefert sie direkt von der eigenen Domain aus, kann ein in die Datei eingebettetes Skript im Kontext dieser Website laufen (Stored XSS). Typische Gegenmaßnahmen:

• Hochgeladene SVGs durch einen Sanitizer schicken, der script, Ereignisattribute, foreignObject und externe Links entfernt.
• Nutzerdateien von einer separaten Domain, mit strenger Content-Security-Policy oder als Download (Content-Disposition: attachment) ausliefern.
• Wenn Sie den Vektor nicht brauchen, hochgeladene SVGs auf dem Server in PNG umwandeln und nur die Rasterversion veröffentlichen.

Typische Einsatzbereiche

• Logos und Markenelemente: Eine Datei bleibt von der Visitenkarte bis zur Plakatwand scharf.
• Icons in Benutzeroberflächen: per CSS einfärbbar und auf hochauflösenden Bildschirmen nie unscharf.
• Diagramme, Karten und Schaubilder: Bibliotheken wie D3.js zeichnen Daten direkt in SVG-Elemente.
• Favicons: Aktuelle Browser akzeptieren SVG-Favicons über <link rel="icon" type="image/svg+xml">.
• Schneiden und Drucken: Laserschneider, Schneideplotter und Stickmaschinen arbeiten mit Vektorpfaden.

Stärken und Schwächen

Häufige Probleme und ihre Lösung

Eine Website oder App akzeptiert kein SVG

Am einfachsten hilft eine PNG-Kopie. Unser Werkzeug SVG in PNG rendert die Zeichnung in Ihrem Browser in ein transparentes PNG mit der von Ihnen gewählten Pixelbreite. Ihre Datei wird nicht hochgeladen und verlässt Ihr Gerät nie.

Text erscheint in einer anderen Schrift

SVG bettet Schriften standardmäßig nicht ein; fehlt die Schrift auf dem anzeigenden System, wird ein Ersatz verwendet. Im Bildkontext werden externe Schriften ebenfalls nicht geladen. Wandeln Sie Text in Ihrem Designprogramm in Pfade um oder betten Sie die Schrift ein.

Das SVG hat die falsche Größe oder wird auf der Seite abgeschnitten

Ohne viewBox oder mit fest gesetzten width/height verhält sich die Skalierung nicht wie erwartet. Ergänzen Sie am Wurzelelement svg eine viewBox, die die ganze Zeichnung umfasst, und legen Sie die Größe per CSS fest.

Die Datei ist größer als erwartet

Designprogramme schreiben Editor-Metadaten, übermäßig viele Nachkommastellen und ausgeblendete Ebenen in das SVG. Ein Optimierer wie SVGO entfernt sie. Gzip- oder Brotli-Komprimierung auf dem Server verkleinert das textbasierte SVG zusätzlich.

Ich brauche mein PNG-Logo als SVG

Ein Rasterbild lässt sich nicht wirklich in einen Vektor „umwandeln“; Werkzeuge vektorisieren es (Tracing): Formen werden erkannt und als Umrisse neu gezeichnet. Unsere Werkzeuge PNG in SVG und JPG in SVG vektorisieren mit 2 bis 8 Farben. Bei einfachen Logos und Zeichnungen sind die Ergebnisse gut, bei Fotos grob. Bei diesen Werkzeugen wird die Datei über eine sichere Verbindung auf unsere Server hochgeladen, dort vektorisiert und spätestens nach 30 Minuten gelöscht.

Tipps zur Umwandlung

• Zielgröße kennen: Wählen Sie beim Rendern von SVG in PNG die größte Größe, in der das Bild angezeigt wird, und verdoppeln Sie sie für hochauflösende Bildschirme. In unserem Werkzeug kann die längste Seite bis zu 4096 Pixel betragen; lassen Sie die Breite leer, werden kleine Zeichnungen so skaliert, dass die längste Seite 1024 Pixel misst.
• JPG für Fotoinhalte: Enthält das SVG ein Foto und brauchen Sie keine Transparenz, sind JPG oder WebP kleiner als PNG; das PNG können Sie anschließend im Bildkonverter umwandeln.
• Favicons: Ist Ihr Logo ein SVG, akzeptiert der Favicon-Generator es und legt icon.svg mit ins Paket.
• Saubere Vorlage zum Vektorisieren: Wenn Sie aus PNG ein SVG erstellen, starten Sie mit einem hochauflösenden, flächig gefärbten und rauschfreien Bild.

Häufig gestellte Fragen

Was ist der Unterschied zwischen SVG und PNG?

Ein PNG besteht aus einer festen Anzahl Pixel und wird beim Vergrößern unscharf. Ein SVG beschreibt Formen und wird in jeder Größe scharf neu gezeichnet. SVG eignet sich für Logos und Icons, PNG oder JPG für Fotos und Screenshots.

Kann eine SVG-Datei einen Virus enthalten?

SVG ist kein ausführbares Programm, kann aber JavaScript einbetten. Skripte laufen nicht, wenn das SVG als Bild (<img>) angezeigt wird, können aber laufen, wenn die Datei direkt im Browser geöffnet wird. Prüfen Sie SVGs aus unbekannten Quellen in einem Betrachter oder wandeln Sie sie in PNG um, statt sie direkt zu öffnen.

Kann ich SVG in Word oder PowerPoint einfügen?

Aktuelle Versionen von Microsoft Office unterstützen das Einfügen von SVG. Bei älteren Versionen oder wenn Sie die Datei mit anderen Programmen teilen, ist eine PNG-Kopie sicherer.

Verliert man bei der Umwandlung von SVG in PNG an Qualität?

PNG ist verlustfrei, doch die Zeichnung wird auf eine Pixelgröße festgelegt. Wählen Sie eine ausreichend große Breite, bemerken Sie keinen Verlust; vergrößern Sie das PNG später, wird es unscharf.

Unterstützt SVG Animationen?

Ja. Bewegung kann aus CSS-Animationen, SMIL-Animationselementen und JavaScript kommen. Bei der Umwandlung in PNG erhalten Sie ein einzelnes Bild.

Quellen

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 publication history
• MDN: SVG as an image
• MDN: Image file type and format guide