Was ist eine SVG-Datei und wie konvertiert man sie?

Du lädst ein Logo oder ein Icon herunter, und auf deinem Computer landet es als logo.svg. Du öffnest es in einem normalen Bildbetrachter, und nicht einmal eine Vorschau erscheint. Du versuchst, es irgendwo hochzuladen, wo eine "normale" Bilddatei erwartet wird, und die Seite lehnt es ab. Eine SVG-Datei ist nicht defekt, sie ist einfach eine grundlegend andere Art von Bilddatei als ein JPG oder PNG, und diesen Unterschied zu kennen ist der Schlüssel, um sie richtig zu nutzen.

Was SVG eigentlich ist#

SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafiken), und der Name beschreibt genau, was es ist: ein Bild, das aus mathematischen Formen (Linien, Kurven, Punkten, Füllungen) aufgebaut ist, nicht aus einem Raster farbiger Pixel. Ein JPG oder PNG speichert ein Bild als feste Anordnung von Pixelwerten, weshalb du beim Hineinzoomen irgendwann blockige Quadrate siehst. Ein SVG speichert stattdessen Anweisungen zum Zeichnen der Formen, sodass ein Betrachter das Bild in jeder beliebigen Größe neu zeichnen kann, von einem 16-Pixel-Favicon bis zu einem wandgroßen Banner, jedes Mal mit perfekt scharfen Kanten.

Im Kern ist eine SVG-Datei reiner Text, genauer gesagt XML, weshalb du sie in einem Texteditor öffnen und die Formdefinitionen tatsächlich lesen kannst. Das bedeutet auch, dass sich SVGs extrem gut komprimieren lassen und winzig klein sein können: Ein einfaches Icon ist oft nur wenige Kilobyte groß, kleiner als das entsprechende PNG.

Warum SVG bei Logos und Icons überall auftaucht#

Drei Eigenschaften machen SVG zur Standardwahl für fast alles außer Fotos:

• Unendliches Skalieren ohne Qualitätsverlust. Ein Logo muss auf einer Visitenkarte genauso scharf aussehen wie auf einem Plakat. Eine einzige SVG-Datei deckt beides ab; ein Rasterformat bräuchte für jede Größe eine eigene, hochauflösende Datei.
• Winzige Dateigrößen bei einfachen Formen. Icons in flachen Farben, Logos und Strichzeichnungen werden als Vektorpfade viel effizienter kodiert als als Pixelraster.
• Mit Code bearbeitbar und stylebar. Weil SVG textbasiert ist, lassen sich Farben, Konturen und sogar Animationen direkt mit CSS und JavaScript steuern, was kein Rasterbild kann.

Deshalb werden bei fast jeder Website das Logo, die Navigationsicons und Illustrationen als SVG ausgeliefert, während Fotos immer als JPG oder WebP kommen. Vektor- und Rasterformate konkurrieren nicht um dieselbe Aufgabe, sie sind für völlig unterschiedliche Inhalte gebaut.

Wobei SVG schlecht ist#

Die Stärke von SVG ist zugleich seine Grenze: Es funktioniert nur bei Bildern, die aus beschreibbaren Formen bestehen. Ein Foto eines Sonnenuntergangs hat keine sauberen Pfade, die sich beschreiben lassen, nur Millionen einzelner Pixelwerte, weshalb Fotos auf Rasterformate wie JPG angewiesen bleiben. Der Versuch, ein Foto in SVG zu "konvertieren", macht es weder kleiner noch schärfer; das Ergebnis ist entweder eine aufgeblähte Datei voller winziger Formen oder eine unscharfe, angenäherte Nachzeichnung, die Details verliert. Nutze SVG für Grafiken, die du gezeichnet hast, und Rasterformate für alles, was du fotografiert hast.

Wie man ein SVG in PNG oder JPG konvertiert#

Eine Vektordatei in eine Rasterdatei umzuwandeln, nennt man Rasterisieren: die Formen in einer bestimmten Pixelgröße zu rendern und das Ergebnis in einem Pixelraster festzuhalten. Rasterisieren musst du ein SVG immer dann, wenn du es irgendwohin schickst, wo nur "normale" Bilder verstanden werden, etwa bei einem Social-Media-Upload, einer E-Mail-Signatur oder einem alten Formular, das .svg-Uploads ablehnt.

Die zuverlässigste kostenlose Methode braucht keine Software-Installation:

1. Öffne die SVG-Datei in einem Browser (Chrome, Firefox und Edge rendern SVG alle nativ, du musst die Datei nur in einen neuen Tab ziehen).
2. Klicke mit der rechten Maustaste auf das gerenderte Bild und wähle "Bild speichern unter", dabei PNG auswählen.
3. Manche Browser speichern es nur in der Standardgröße des SVG. Für eine bestimmte Pixelgröße öffne das SVG in einem kostenlosen Tool wie Figma oder Inkscape, das den Export in jeder gewünschten Auflösung erlaubt.

Sobald du das PNG hast, passiert meist eines von zwei Dingen. Ist die Datei größer als für das Web nötig, lauf sie durch Bild komprimieren, um sie zu verkleinern, ohne die Qualität sichtbar zu verändern, denn selbst ein in hoher Auflösung exportiertes Icon kann mehr Bytes tragen als nötig. Baust du aus einem Logo ein Favicon, wandelt PNG zu ICO dieses exportierte PNG in das .ico-Format um, das Browser und Lesezeichenleisten erwarten; exportiere das SVG dafür vorher mit mindestens 256x256 Pixeln, damit das Icon in jeder von Windows und Browsern angeforderten Größe scharf bleibt.

SVG vs. PNG vs. JPG im Überblick#

Wenn du PNG gegen ein anderes Rasterformat für deine eigenen Bilder abwägst, geht unser WebP-Format erklärt genauer auf diesen Vergleich ein; die Vektor-gegen-Raster-Frage hier ist eine separate Entscheidung, die getroffen wird, bevor du überhaupt bei PNG oder JPG ankommst.

Ist es sicher, eine SVG-Datei zu öffnen?#

Größtenteils ja, mit einer Einschränkung, die man kennen sollte: Weil SVG auf XML basiert und Browser das Einbetten eines <script>-Tags innerhalb einer SVG erlauben, kann eine böswillige SVG technisch gesehen ausführbaren Code enthalten. Bei einem Logo aus einer vertrauenswürdigen Quelle ist das selten ein Problem, aber genau deshalb blockieren manche E-Mail-Programme und CMS-Plattformen SVG-Uploads standardmäßig, und deshalb solltest du eine SVG aus einer nicht vertrauenswürdigen Quelle nach Möglichkeit nicht direkt in einem Browser-Tab öffnen. Eine solche SVG zunächst mit einem Tool in PNG umzuwandeln, das nur Pixel rasterisiert und keine eingebetteten Skripte ausführt, umgeht dieses Risiko vollständig.

Häufig gestellte Fragen#

Welches Programm öffnet eine SVG-Datei? Jeder moderne Webbrowser (Chrome, Firefox, Safari, Edge) öffnet und zeigt eine SVG-Datei direkt an, wenn du sie in einen neuen Tab ziehst, und Designtools wie Figma, Inkscape und Adobe Illustrator öffnen sie zum Bearbeiten.

Kann ich eine SVG kostenlos in PNG umwandeln? Ja, die SVG in einem Browser zu öffnen und das gerenderte Bild zu speichern, oder sie aus einem kostenlosen Tool wie Inkscape oder Figma in der gewünschten Pixelgröße zu exportieren, wandelt sie ohne kostenpflichtige Software in PNG um.

Warum lässt mich eine Website keine SVG-Datei hochladen? Viele Upload-Formulare und CMS-Plattformen blockieren SVG gezielt, weil es ausführbaren Skriptcode einbetten kann, ein Sicherheitsrisiko, das Rasterformate nicht haben, weshalb sie verlangen, das SVG zuerst in PNG oder JPG umzuwandeln.

Ist SVG besser als PNG? SVG ist besser für Logos, Icons und Illustrationen, weil es sich auf jede Größe skalieren lässt, ohne unscharf zu werden, und dabei klein bleibt; PNG ist besser für Fotografien, Screenshots und jedes Bild mit durchgehenden Pixeldetails, die sich nicht als Formen beschreiben lassen.

Verliert die Umwandlung von SVG in PNG an Qualität? Es geht kein Detail verloren, wenn du das PNG groß genug für den vorgesehenen Zweck exportierst, aber das entstehende PNG ist dann auf diese Auflösung festgelegt und wird beim weiteren Vergrößern unscharf, anders als das ursprüngliche SVG.

Kann ich die Farben einer SVG-Datei bearbeiten? Ja, weil SVG reiner Text ist, lassen sich seine Farben und Formen direkt in einem Texteditor, in einem Designtool wie Figma oder Inkscape oder, wenn es in eine Webseite eingebettet ist, dynamisch mit CSS bearbeiten.

Ob du ein in jeder Größe scharfes Icon brauchst oder einfach nur ein PNG, das ein Formular akzeptiert: Eine SVG umzuwandeln braucht nur einen Exportschritt. Sobald du die Rasterdatei hast, erledigen Bild komprimieren und PNG zu ICO den Rest: kostenlos, privat und komplett im Browser. Oder stöbere durch alle Dateiformat-Guides im Blog.