SVG in WebP umwandeln - viel kleiner, weiterhin transparent
WebP ist das Format der Wahl, wenn aus einer SVG Pixel werden sollen und das Ergebnis ins Web geht. Es behält den vollen Alphakanal, den auch PNG bietet, und das bei einem Bruchteil des Gewichts - bei unseren drei Testdateien war die WebP zwischen 81 % und 97 % kleiner als die PNG mit exakt denselben Maßen. Diese Zahlen sind durch dieses Werkzeug gemessen und nicht aus einer Spezifikation zitiert, die vollständige Tabelle steht weiter unten auf dieser Seite, zusammen mit der Erklärung, warum ausgerechnet die Datei am meisten spart, bei der man es am wenigsten erwartet. Die Umwandlung läuft vollständig auf deinem eigenen Gerät, es wird also nichts hochgeladen, nichts steht in einer Warteschlange, und die Datei verlässt deinen Rechner nie. Wähle einen Faktor oder eine exakte Pixelbreite, entscheide über die Transparenz, und die Zeichnung wird in dieser Größe neu aus dem Vektor gerendert.
So verwendest du dieses Tool
SVG hineinziehen
Ziehe eine SVG auf das Feld oben oder klicke zum Auswählen. Bis 5 MB je Datei, auch mehrere gleichzeitig. Jede wird nach ihrem Inhalt geprüft und nicht nach der Endung, bevor überhaupt gerendert wird.
Ausgabegröße festlegen
Wähle einen Faktor von 1×, 2×, 4× oder einen eigenen Wert, oder wechsle zur exakten Größe für eine bestimmte Pixelbreite mit gesperrtem Seitenverhältnis. Die Grafik wird in dieser Größe neu aus dem Vektor gerendert und nicht aus einem kleineren Bild gedehnt, es kommt also echtes Detail hinzu.
Hintergrund behalten oder ersetzen
Transparenz ist voreingestellt, und WebP behält sie exakt, unbemalte Flächen bleiben also durchsichtig. Nimm den Haken heraus, wenn du lieber auf eine feste Farbe flachlegen willst, dann erscheint daneben eine Farbauswahl.
Qualität einstellen
Der Regler steht auf 85, dort ist der Größenvorteil von WebP am größten, ohne sichtbaren Schaden. Unsere Testdatei mit Verlauf lag bei Qualität 90 bei 3.998 Bytes, bei 50 bei 1.872 und bei 20 bei 1.394 - nach unten ist also sehr wenig zu holen.
Umwandeln und herunterladen
Klicke auf „In WebP umwandeln“. Jede Datei zeigt ihren eigenen Fortschritt. Lade sie einzeln herunter oder nimm den ganzen Stapel als ein einziges ZIP-Archiv.
Häufig gestellte Fragen
Wie viel kleiner ist WebP wirklich als PNG?
Wir haben drei Dateien mit 512 Pixeln Breite und Standardeinstellungen gemessen. Ein Strichsymbol ging von 20,8 KB als PNG auf 3,8 KB als WebP, also 81 % weniger. Eine dichte Pixelart-Marke ging von 44,6 KB auf 7,0 KB, 84 %. Eine Illustration mit Verlauf ging von 152,3 KB auf 4,2 KB, ganze 97 %.
Warum spart die Datei mit Verlauf so viel mehr?
Weil ein weicher Verlauf der schlimmste Fall für PNG ist. PNG komprimiert verlustfrei über wiederkehrende Pixelmuster, und ein Verlauf wiederholt fast nichts, also wird beinahe jedes Pixel einzeln gespeichert. WebP beschreibt dieselbe weiche Rampe mit einer Handvoll Koeffizienten - deshalb schrumpfen 152 KB auf 4 KB.
Bleibt die Transparenz erhalten?
Ja, vollständig. WebP führt einen 8-Bit-Alphakanal, transparente und halbtransparente Flächen überleben also genauso wie in PNG - wir prüfen das bei jeder Ausgabe. Weiche Schatten und Teildeckkraft kommen unversehrt an. Das ist der Hauptgrund, WebP gegenüber JPG zu wählen, das gar kein Alpha kennt.
Ist dieses WebP verlustbehaftet oder verlustfrei?
Verlustbehaftet, in der Qualität, die du am Regler einstellst. Das ist Absicht: Verlustfreies WebP schlägt PNG zwar, aber meist nur um 20 bis 30 Prozent, während verlustbehaftetes WebP bei Qualität 85 um 80 Prozent und mehr gewinnt, ohne sichtbaren Unterschied. Der Alphakanal bleibt in beiden Fällen verlustfrei.
Funktioniert WebP überall dort, wo ich es brauche?
Im Web ja. Alle aktuellen Browser unterstützen WebP seit Jahren, Safari seit 2020. Außerhalb des Browsers ist es lückenhafter: Ältere Desktop-Software, Druck-Workflows und manche Upload-Formulare lehnen es weiterhin ab. Prüfe das Ziel vorher und weiche auf PNG aus, wo WebP nicht angenommen wird.
Wann sollte ich PNG statt WebP nehmen?
Wenn die Datei irgendwo hin soll, das WebP nicht annimmt, oder wenn du pixelgenau verlustfreie Ausgabe brauchst - ein Screenshot für eine Dokumentation etwa, oder Grafik, die noch mehrfach bearbeitet und neu gespeichert wird. Wiederholtes verlustbehaftetes Kodieren summiert sich, halte also ein Arbeitsoriginal als PNG oder als SVG bereit.
Welche Qualität soll ich einstellen?
Lass sie bei 85, wenn du keinen Grund für etwas anderes hast. WebP hält bei mittleren Werten deutlich besser durch als JPEG, und der Weg auf 100 verdoppelt die Datei meist für einen Unterschied, den du nicht siehst. Richtung 60 lohnt sich nur bei großen dekorativen Hintergrundbildern.
Meine SVG ist animiert - wird die WebP auch animiert?
Nein. WebP kann zwar Animation, aber die Animation in einer SVG steckt in SMIL-Tags oder CSS, die nur laufen, wenn die Datei als Dokument behandelt wird, nicht als Bild. Beim Rendern wird ein einzelnes Standbild im Ausgangszustand erfasst. Exportiere für Bewegung aus deinem Designprogramm ein Video oder ein animiertes GIF.
Sollte ich nicht einfach die SVG auf meiner Seite verwenden?
Oft ja. Für ein Logo, ein Symbol oder jede flächige Illustration ist die SVG meist kleiner als jedes Rasterbild davon, bleibt in jeder Zoomstufe scharf und lässt sich per CSS umfärben. Wandle in WebP um, wenn du ein Rasterbild fester Größe brauchst: Open-Graph-Bilder, E-Mail oder eine Textur für Canvas und Spiele.
Das könnte dich auch interessieren
Funktioniert etwas nicht? Fehler melden