So lädst du ein SVG-Bild — oder wandelst es um

Ansehen — 19 Sekunden

Vektor raus oder Raster raus

Tutorial · umwandeln

Beobachte, wie die Endung im Dateinamenfeld von .svg auf .png wechselt und die Größenauswahl neben dem Segment erscheint — das Popup bietet nur dann eine Größe an, wenn eine Größe Sinn ergibt.

Was die Aufnahme zeigt

1. Das Bild ist ein SVG, hat also keine feste Größe
2. Wähl das gewünschte Bild
3. Nimm den Vektor, wenn du ihn bearbeiten wirst
4. Oder schalte auf PNG, wenn du ein Raster brauchst
5. Auf deinem Rechner gerendert, in 1×, 2× oder 4×
6. Dasselbe Icon, jetzt als pixelgenaues PNG

Wähle bewusst

Was brauchst du eigentlich?

Diese Entscheidung lohnt sich bewusst zu treffen, denn Umwandeln ist eine Einbahnstraße. Ein Vektor kann später immer ein Raster werden; ein Raster wird nie wieder ein Vektor.

Behalte das SVG, wenn das Ziel eine Website oder App ist, ein Designtool, in dem du die Formen bearbeitest, ein Druck jeder Art oder irgendwo, wo die Größe noch nicht feststeht. Es bleibt in jeder Größe scharf, die Datei ist meist kleiner als ein gleichwertiges PNG, und du kannst es per CSS umgestalten.

Wandle in PNG um, wenn das Ziel kein SVG annimmt — und ziemlich viele tun das nicht. Die meisten E-Mail-Programme, viele ältere CMS-Uploader, manche Chat- und Social-Plattformen und reichlich Foliendesigns lehnen SVG entweder ab oder stellen es unzuverlässig dar. PowerPoint und Keynote sind damit notorisch wechselhaft. Wenn du in ein Dokument einfügst, das auf dem Rechner einer anderen Person identisch aussehen muss, ist PNG die sichere Antwort.

Wandle selten in JPG um, und nur für eine fotografisch anmutende Illustration. JPG kennt keine Transparenz, ein Icon kommt also auf einem vollen Hintergrund heraus, und seine Kompression setzt sichtbare Artefakte an genau die harten Kanten, aus denen Icons bestehen. Für alles mit flacher Farbe und scharfen Kanten ist PNG kleiner und sauberer zugleich.

Auf beiden Wegen laden

Die ersten zwei Schritte sind gemeinsam; am Formatsegment trennen sie sich.

1. Popup öffnen und das Bild finden. Klick auf den Button in der Symbolleiste und blättere zur gewünschten Grafik. Es klappt, egal ob das Bild eine <img>-Quelle, Inline-Markup oder ein CSS-Hintergrund ist.
2. Für den Vektor einfach laden. Lass das Format auf SVG, tipp einen Dateinamen und drück Aktuelles laden. Du bekommst das Original-Markup mit repariertem Namensraum.
3. Für ein Raster erst das Format wechseln. Drück PNG oder JPG im Segment. Daneben erscheint eine Größenauswahl, und die Endung im Dateinamenfeld passt sich an.
4. Größe wählen, dann laden. 1×, 2× oder 4× der intrinsischen Größe des Vektors. Die Umwandlung läuft auf deinem Rechner, auf einem Canvas, und das Ergebnis lädt wie alles andere.

Wovon der Größenfaktor ein Vielfaches ist

Er skaliert die eigene intrinsische Größe des Vektors — sein width und height, falls angegeben, sonst die Ausdehnung seiner viewBox. Ein 24×24-Icon in 4× ergibt also ein 96×96-PNG. Gibt der Vektor gar keine Größe an, was bei Sprite-Symbolen häufig ist, greift ein sinnvolles Quadrat statt der 300×150, auf die ein nacktes Canvas zurückfiele.

In der Praxis: 2× ist die richtige Voreinstellung für alles, was auf einem Bildschirm erscheint, denn es deckt Retina-Displays ab. 4× ist für Druck oder eine groß dargestellte Grafik. 1× ist dafür, wenn du eine exakte Pixelgröße treffen musst und weißt, was du tust.

Transparenz

PNG behält den transparenten Hintergrund; JPG kann das nicht und füllt ihn. Wenn du ein Icon in JPG umwandelst und dahinter einen unerwarteten weißen oder schwarzen Kasten bekommst, ist das kein Fehler — das Format kann Transparenz nicht ausdrücken. Nimm PNG.

Die Umwandlung passiert hier, nicht anderswo

Das sei klar gesagt, denn „SVG-zu-PNG-Konverter“ ist sonst eine Kategorie von Websites, die verlangt, dass du deine Datei hochlädst. Hier wird der Vektor in ein Canvas im Popup gezeichnet und als Bild zurückgelesen. Es ist dasselbe bereinigte Markup, das auch ein Download erzeugen würde, gerendert über ein abgeschottetes Bildelement, damit nichts darin ausgeführt wird. Nichts wird hochgeladen, und die Umwandlung funktioniert auch ohne Netzverbindung.

Wenn die Umwandlung scheitert

Ein Fall bricht sie zuverlässig: ein SVG, das in sich ein Rasterbild von anderer Herkunft einbettet. Das auf ein Canvas zu zeichnen „vergiftet“ es, und der Browser verweigert danach das Zurücklesen der Pixel — eine Sicherheitsregel, keine Grenze der Erweiterung. Du bekommst eine entsprechende Meldung. Der Vektor selbst lädt weiterhin einwandfrei; nur die Rasterumwandlung kann nicht fortfahren.

SVG behalten für

Web, Apps, Designtools, Druck — überall, wo die Endgröße nicht feststeht.

Umwandeln für

E-Mail, Foliensätze, ältere CMS-Uploader und überall, wo SVG abgelehnt wird.

Größen

1×, 2× oder 4× der intrinsischen Größe des Vektors. 2× passt zu den meisten Bildschirmen.

Wo

Auf deinem Rechner, auf einem Canvas. Zum Umwandeln wird nichts hochgeladen.

Gut zu wissen

Häufig gefragt