SVG-Datei: Was das Format kann und wie du es auf deiner Website einsetzt

Was eine SVG-Datei ist

SVG steht für Scalable Vector Graphics. Das Format ist ein offener Standard des W3C, also derselben Organisation, die auch HTML und CSS betreut.

Der technische Kern: Eine SVG-Datei ist Text. Genauer gesagt XML. Wenn du eine SVG-Datei in einem Texteditor öffnest, siehst du keine Binärdaten, sondern lesbare Anweisungen — etwa einen Kreis mit Mittelpunkt, Radius und Füllfarbe.

Daraus ergeben sich die Eigenschaften, die das Format ausmachen:

• Verlustfrei skalierbar — jede Größe wird neu berechnet, es gibt keine Treppenstufen
• Meist sehr klein — bei einfachen Grafiken oft nur wenige Kilobyte
• Durchsuchbar und indexierbar — Text im SVG bleibt Text
• Per CSS und JavaScript veränderbar — Farben lassen sich im Browser umschalten, Elemente animieren
• Versionierbar — weil es Text ist, funktioniert Git damit sinnvoll

SVG vs. PNG und JPG: wann welches Format

Die Formate konkurrieren nicht, sie lösen verschiedene Aufgaben.

Die Faustregel ist einfach: Alles, was aus klaren Formen und Flächen besteht, gehört ins SVG. Logos, Icons, Diagramme, Illustrationen, Karten. Alles mit Farbverläufen und Bildrauschen — also Fotos — gehört ins JPG oder in ein modernes Rasterformat.

Der Grenzfall sind komplexe Illustrationen mit vielen tausend Pfaden. Dort kann eine SVG-Datei größer werden als das entsprechende PNG, weil jeder einzelne Pfad beschrieben werden muss. Im Zweifel beide Varianten exportieren und die Dateigrößen vergleichen.

SVG-Dateien öffnen

Wie du eine SVG-Datei öffnest, hängt davon ab, was du damit vorhast.

Nur ansehen: Jeder moderne Browser stellt SVG dar. Datei per Drag-and-Drop ins Browserfenster ziehen, fertig — kein zusätzliches Programm nötig. Das ist der schnellste Weg.

Bearbeiten (grafisch): Dafür braucht es ein Vektorprogramm. Inkscape ist kostenlos und plattformübergreifend verfügbar, Adobe Illustrator ist der kommerzielle Standard, Figma und Affinity Designer sind weitere verbreitete Optionen.

Bearbeiten (Code): Weil SVG Text ist, funktioniert jeder Texteditor. Für kleine Korrekturen — eine Farbe ändern, eine Größe anpassen — ist das oft schneller als der Umweg über ein Grafikprogramm.

Ein häufiges Ärgernis unter Windows: Der Datei-Explorer zeigt für SVG-Dateien standardmäßig keine Vorschaubilder, sondern nur ein generisches Symbol. Das liegt am Betriebssystem, nicht an den Dateien. Es gibt Erweiterungen, die das nachrüsten.

SVG-Dateien erstellen

Es gibt drei Wege, und sie unterscheiden sich stark im Aufwand.

Aus einem Grafikprogramm exportieren. Der übliche Weg. In Inkscape ist SVG das native Format, in Illustrator und Figma exportierst du entsprechend. Achte beim Export darauf, ob eingebettete Rasterbilder mitgehen — die machen die Datei groß und heben den Vorteil des Formats auf.

Direkt schreiben. Für einfache Formen praktikabel. Ein Kreis, ein Rechteck, ein Pfad — das lässt sich in wenigen Zeilen von Hand notieren. Für alles Komplexere wird es schnell unübersichtlich.

Aus einer Rastervorlage nachzeichnen. Wenn nur ein PNG oder JPG vorliegt, kann eine automatische Vektorisierung helfen (in Inkscape „Bitmap nachzeichnen"). Das Ergebnis ist bei klaren Formen brauchbar, bei Fotos praktisch nie.

Ein Schritt, der oft vergessen wird: SVG-Dateien vor dem Hochladen optimieren. Exporte aus Grafikprogrammen enthalten regelmäßig überflüssige Metadaten, Kommentare und leere Gruppen. Tools wie SVGO entfernen das und halbieren die Dateigröße nicht selten.

Umwandeln: SVG zu PNG und zurück

Die beiden Richtungen sind unterschiedlich schwer.

SVG zu PNG ist unproblematisch. Jedes Vektorprogramm kann in ein Rasterformat exportieren, und du bestimmst dabei die Zielauflösung. Weil das SVG die Vorlage bleibt, kannst du jederzeit in anderer Größe neu exportieren. Typischer Anlass: Plattformen, die kein SVG akzeptieren — manche Social-Media-Dienste, E-Mail-Clients oder ältere Systeme.

PNG zu SVG ist keine echte Umwandlung, sondern eine Nachzeichnung. Ein Rasterbild enthält keine Pfadinformationen; die müssen erst errechnet werden. Bei einem zweifarbigen Logo mit klaren Kanten funktioniert das ordentlich. Bei einem Foto entsteht ein unbrauchbares Gebilde aus tausenden Flächen, das größer ist als das Original.

Wenn du ein Logo als SVG brauchst und nur ein PNG hast: Frag zuerst nach der Originaldatei. Nachzeichnen ist immer die zweitbeste Lösung.

Ein Hinweis zu Online-Konvertern: Sie sind bequem, bedeuten aber, dass du deine Datei auf einen fremden Server hochlädst. Bei einem öffentlichen Logo ist das unkritisch. Bei internen Grafiken, Kundenmaterial oder unveröffentlichten Entwürfen ist ein lokales Programm die bessere Wahl.

SVG in die Website einbinden

Hier gibt es mehrere Wege, und die Wahl hat Folgen.

Als normales Bild über den img-Tag. Der einfachste Weg. Das SVG verhält sich wie jedes andere Bild, wird separat geladen und vom Browser gecacht. Nachteil: Du kannst die Grafik nicht per CSS von außen verändern.

Inline direkt im HTML. Der SVG-Code steht mitten im Dokument. Damit lassen sich einzelne Elemente per CSS einfärben oder per JavaScript animieren — praktisch für Icons, die auf Hover die Farbe wechseln. Nachteil: Der Code wird bei jedem Seitenaufruf mitgeladen und nicht separat gecacht.

Als CSS-Hintergrund. Sinnvoll für dekorative Elemente, die nicht zum Inhalt gehören.

Die praktische Regel: Icons, die sich verändern sollen, inline einbinden. Logos und Grafiken, die überall gleich aussehen, als img — dann greift das Browser-Caching.

Zur Ladezeit: SVG-Dateien sind Text und lassen sich deshalb sehr gut komprimieren. Ist auf dem Server Gzip- oder Brotli-Kompression aktiv, schrumpfen sie oft auf ein Viertel. Das ist Standard bei aktuellen Hosting-Umgebungen, aber nicht selbstverständlich — ein Blick in die Server-Konfiguration lohnt sich, weil er bei allen textbasierten Dateien wirkt, nicht nur bei SVG.

Ein weiterer Punkt, der regelmäßig übersehen wird: Manche Server liefern SVG-Dateien mit falschem MIME-Type aus. Korrekt ist image/svg+xml. Stimmt der Typ nicht, zeigen Browser die Datei unter Umständen als Text an oder bieten sie zum Download an, statt sie darzustellen.

Sicherheit: das Problem mit SVG-Uploads

Dieser Punkt fehlt in den meisten SVG-Ratgebern, ist aber für jeden relevant, der eine Website betreibt.

SVG ist XML — und XML kann Skripte enthalten. Eine SVG-Datei darf laut Spezifikation script-Elemente und Event-Handler enthalten. Wird sie direkt im Browser aufgerufen oder inline eingebunden, führt der Browser diesen Code aus.

Das ist kein theoretisches Problem. Wenn deine Website Datei-Uploads erlaubt — Profilbilder, Kundenlogos, Anhänge — und SVG akzeptiert, kann darüber Schadcode eingeschleust werden. Der klassische Fall ist Cross-Site-Scripting: Ein Angreifer lädt ein präpariertes SVG hoch, ein anderer Nutzer ruft es auf, der Code läuft in dessen Browser-Sitzung.

Was in der Praxis hilft:

• SVG-Uploads bereinigen, bevor sie gespeichert werden. Bibliotheken wie DOMPurify entfernen Skripte und Event-Handler zuverlässig.
• Hochgeladene SVG als img einbinden, nicht inline. Im img-Tag führen Browser keine Skripte aus.
• Uploads von einer separaten Domain ausliefern, damit selbst ausgeführter Code nicht auf die Hauptsitzung zugreifen kann.
• Content-Security-Policy setzen, die Skriptausführung einschränkt.
• Im Zweifel keine SVG-Uploads zulassen. Wenn Nutzer nur Profilbilder hochladen, reichen JPG und PNG.

Für SVG-Dateien aus eigener Produktion — dein Logo, deine Icons — besteht dieses Risiko nicht. Das Problem entsteht ausschließlich bei Dateien aus fremder Quelle.

Häufige Fragen

Wie öffne ich eine SVG-Datei?

Zum Ansehen reicht jeder Browser: Datei ins Fenster ziehen. Zum grafischen Bearbeiten brauchst du ein Vektorprogramm wie Inkscape (kostenlos) oder Adobe Illustrator. Weil SVG-Dateien Textdateien sind, lassen sie sich auch in jedem Texteditor öffnen und bearbeiten.

Ist SVG besser als PNG?

Für Logos, Icons und Grafiken mit klaren Formen ja, weil SVG verlustfrei skaliert und meist kleiner ist. Für Fotos nein — dort ist SVG ungeeignet. Die Formate lösen unterschiedliche Aufgaben.

Kann ich ein Foto in SVG umwandeln?

Technisch ja, sinnvoll nein. Die automatische Nachzeichnung erzeugt aus einem Foto tausende Farbflächen. Das Ergebnis ist größer als das Original und sieht schlechter aus. SVG ist für Formen gedacht, nicht für Bildrauschen.

Sind SVG-Dateien gut für SEO?

Sie helfen indirekt: kleinere Dateien bedeuten kürzere Ladezeiten, und Ladezeit ist ein Rankingfaktor. Text innerhalb einer SVG-Datei ist außerdem für Suchmaschinen lesbar. Wie bei jedem Bild gehört ein aussagekräftiges alt-Attribut dazu.

Warum wird meine SVG-Datei auf der Website nicht angezeigt?

Häufigste Ursache ist ein falscher MIME-Type auf dem Server — korrekt ist image/svg+xml. Andere mögliche Gründe: fehlende Größenangaben im SVG selbst, ein fehlerhaftes viewBox-Attribut oder eine Server-Konfiguration, die SVG-Dateien blockiert.

Kann eine SVG-Datei gefährlich sein?

Ja, wenn sie aus fremder Quelle stammt. SVG kann JavaScript enthalten, das beim Öffnen im Browser ausgeführt wird. Bei eigenen Dateien ist das unkritisch. Wer Uploads auf seiner Website zulässt, sollte SVG-Dateien vor dem Speichern bereinigen oder das Format ausschließen.

Fazit

SVG ist das richtige Format für alles, was aus Formen besteht und in verschiedenen Größen scharf bleiben soll — Logos, Icons, Diagramme. Für Fotos ist es die falsche Wahl.

Beim Einsatz auf der eigenen Website zählen drei Dinge: Dateien vor dem Hochladen optimieren, den passenden Einbindungsweg wählen (inline für veränderbare Icons, img für alles andere), und bei Uploads aus fremder Quelle die Sicherheitsfrage nicht übergehen. Der letzte Punkt kostet wenig Aufwand und verhindert ein Problem, das andernfalls leicht übersehen wird.