SVG in WebP umwandeln
Wandeln Sie eine Vektordatei in ein WebP um, genau in der Pixelbreite, die Ihr Layout braucht. Praktisch, wenn ein CMS keine SVG-Uploads zulässt, eine Social-Media-Vorschau eine Bitmap verlangt oder eine Illustration so viele Pfade hat, dass der Browser sie nur langsam zeichnet.
Bild-Konverter
oder JPG, JPEG, JPE …-Dateien hierher ziehen ·
Max. 95 MB pro Datei· Bis zu 20 Dateien· Gelöscht nach 30 Minuten
Dateien werden auf unseren Servern verarbeitet und nach 30 Minuten gelöscht.
85 hält Fotos optisch identisch mit dem Original. Senken Sie den Wert nur, wenn Sie eine kleinere Datei brauchen.
JPG, BMP und EPS unterstützen keine Transparenz. Transparente Pixel werden mit dieser Farbe gefüllt.
Hex-Farbe hinter transparenten Pixeln, z. B. #FFFFFF.
Dieses Format enthält nur ein einzelnes Bild. Wählen Sie GIF oder WebP als Ausgabe, wenn die Animation erhalten bleiben soll.
Ein Symbol mit mehreren Größen enthält mehrere Auflösungen in einer Datei; Browser und Betriebssysteme wählen die passende.
Die ursprünglichen Abmessungen beibehalten oder eine Seite eingeben; das Seitenverhältnis bleibt erhalten.
Pixel für die oben gewählte Seite.
Prozentsatz der ursprünglichen Abmessungen.
sRGB passt für Bildschirme und das Web. Behalten Sie das Original für Druck-Workflows; Graustufen verwerfen die Farbe.
Nur Metadaten, 0 behält den ursprünglichen Wert. Drucker und einige Portale lesen diese Zahl; die Pixelmaße ändern sich dadurch nicht.
So verwenden Sie dieses Tool
- 1
SVG hochladen
Fügen Sie bis zu 20 .svg-Dateien hinzu, die Sie aus Figma, Illustrator, Inkscape oder einer Diagrammbibliothek exportiert haben, je höchstens 95 MB.
- 2
Ausgabebreite festlegen
Größe des Ausgabebilds ändern beginnt bei einer Breite von 1200 px; setzen Sie den Wert auf das Doppelte der Breite, die das Bild auf der Seite einnimmt. Qualität steht auf 90, oder aktivieren Sie unter Erweiterte Einstellungen die Option Verlustfrei für flache Logos und Icons.
- 3
In WebP umwandeln
Klicken Sie auf Umwandeln in WebP und laden Sie die Dateien oder ein ZIP-Archiv herunter. Transparente Bereiche bleiben transparent.
Wie wandle ich SVG in WebP in einer bestimmten Größe um?
Laden Sie das SVG hoch, stellen Sie Größe des Ausgabebilds ändern auf die gewünschte Breite in Pixeln ein (standardmäßig 1200 px) und klicken Sie auf Umwandeln in WebP. Der Vektor wird in dieser Breite neu gezeichnet, es wird also nichts hochskaliert oder unscharf.
Wann eine SVG zu einem WebP werden sollte
SVG wurde 2001 zur W3C-Empfehlung und ist für die meisten Logos und Icons das richtige Format: ein paar Kilobyte Text, die bei jedem Zoom scharf bleiben. Probleme beginnen, sobald eine Datei Ihren eigenen Code verlässt. WordPress und viele gehostete Shop-Baukästen lehnen SVG-Uploads ab, Linkvorschauen auf Facebook, LinkedIn und X werden als Bitmaps abgerufen, und Designtools exportieren Illustrationen mit eingebetteten Rastereffekten, die aus einer Vektordatei mehrere Megabyte Markup machen.
WebP, 2010 von Google veröffentlicht und seit Version 14 im Jahr 2020 auch von Safari unterstützt, ist das Bitmap-Format für genau diese Aufgabe: bei gleichem Aussehen kleiner als PNG, mit echtem Alphakanal. Wenn Sie das SVG direkt in der Endgröße als WebP rendern, entfällt der übliche Umweg über einen großen PNG-Export. Falls Sie die Gegenrichtung brauchen, erklärt unsere Seite zu WebP in SVG, warum dafür eine Vektorisierung nötig ist statt einer Umwandlung.
SVG in WebP: Größen für gängige Web-Platzierungen
1200 × 630 px
Open-Graph-Linkvorschau
Bild, das beim Teilen der Seite angezeigt wird
1920 × 1080 px
Hero-Illustration in voller Breite
Deckt die meisten Desktop-Bildschirme bei 1× ab
1600 × 900 px
Blogspaltenbild bei 2×
Für eine 800 px breite Inhaltsspalte
400 × 100 px
Header-Logo bei 2×
Für einen Logoplatz von 200 × 50 px
SVG
Scalable Vector Graphics
SVG ist ein XML-basiertes Vektorformat, das das W3C 2001 standardisiert hat. Statt Pixeln beschreibt es Formen, Pfade und Text, bleibt daher in jeder Größe scharf und ist bei Logos und Icons meist winzig. Es unterstützt Transparenz, CSS-Formatierung, Skripte und Animation, und jeder Browser stellt es nativ dar. Für Fotos ist SVG ungeeignet, und komplexe Illustrationen können langsam rendern. Illustrator, Inkscape, Figma und Browser können es öffnen und bearbeiten.
- Komprimierung
- –
- Transparenz
- Ja
- Animation
- Ja
- Eingeführt
- 2001 · W3C
WEBP
WebP-Bild
WebP ist ein Bildformat, das Google 2010 veröffentlichte, damit Webseiten schneller laden. Es unterstützt verlustbehaftete und verlustfreie Kompression, Alpha-Transparenz und Animation in einem einzigen Format. Verlustbehaftete WebP-Dateien sind bei ähnlicher Bildqualität meist 25–35 % kleiner als JPEGs, verlustfreies WebP ist meist kleiner als PNG. Alle aktuellen Browser unterstützen es, manche ältere Desktop-Software, Druckdienste und Upload-Formulare lehnen es aber noch ab. Windows, macOS und die meisten modernen Bildbearbeitungen öffnen WebP-Dateien.
- Komprimierung
- Verlustbehaftet oder verlustfrei
- Transparenz
- Ja
- Animation
- Ja
- Eingeführt
- 2010 · Google
SVG wird in WebP umgewandelt, um ein leichtes Bitmap mit fester Größe für Orte zu erhalten, die keine Vektordateien annehmen oder sie langsam darstellen, etwa ein CMS, eine Social-Media-Vorschau oder eine stark besuchte Landingpage; WebP in SVG ist eine Vektorisierung, kein Formatwechsel.
Wie die SVG gerastert wird und was Sie prüfen sollten
Der Konverter liest Breite, Höhe und viewBox des SVG und zeichnet jeden Pfad in der von Ihnen gewählten Breite; die Höhe ergibt sich aus dem Seitenverhältnis. Da das Zeichnen in der Endgröße erfolgt, werden dünne Linien und kleine Schrift einmal und im richtigen Maßstab geglättet. Ein späteres Hochskalieren eines kleinen PNG sieht nie so sauber aus.
Schriften sind die übliche Überraschung. Wenn das SVG eine Schriftart nennt, die weder eingebettet noch in Pfade umgewandelt ist, wird eine Ersatzschrift verwendet und die Zeilenlängen ändern sich. Wandeln Sie den Text vor dem Export in Ihrem Designtool in Pfade um. Externe Bilder, die im SVG per URL verlinkt sind, werden nicht abgerufen; betten Sie sie ein oder reduzieren Sie die Grafik vorher.
SVG in WebP umwandeln: Was Sie tun und lassen sollten
| Empfohlen | Vermeiden |
|---|---|
| In der doppelten angezeigten CSS-Breite rendern | Einfache Inline-Icons umwandeln, die als SVG kleiner sind |
| Verlustfrei für flache Logos mit wenigen Farben verwenden | Mit 4000 px für einen 600-px-Platz rendern |
| Das SVG-Original für künftige Größen aufbewahren | WebP in E-Mail-Newslettern versenden |
| WebP mit width- und height-Attributen ausliefern, um Layout-Verschiebungen zu vermeiden | Live-Text erwarten: Das WebP besteht aus Pixeln, nicht aus markierbarer Schrift |
Fragen zu SVG in WebP
Welche Pixelbreite sollte ich beim Umwandeln von SVG in WebP wählen?
Nehmen Sie die Breite, in der das Bild in CSS-Pixeln angezeigt wird, und verdoppeln Sie sie, damit es auf hochauflösenden Smartphone- und Laptop-Displays scharf bleibt. Eine Illustration in einer 800-px-Spalte sollte mit 1600 px gerendert werden. 3× lohnt sich im Web selten, weil die Datei wächst, der sichtbare Gewinn aber klein ist.
Ist WebP für eine Website besser als SVG?
Nicht bei einfachen Logos, Icons und Diagrammen: Ein sauberes SVG ist winzig und in jeder Größe scharf, behalten Sie es also. WebP ist besser bei komplexen Illustrationen mit Verläufen, Filtern oder Tausenden von Pfaden und überall dort, wo nur Bitmaps erlaubt sind, etwa bei Social-Media-Vorschauen oder einem CMS ohne SVG-Unterstützung.
Behält das WebP den transparenten Hintergrund meiner SVG?
Ja. WebP hat einen vollständigen Alphakanal, sowohl im verlustbehafteten als auch im verlustfreien Modus, daher bleiben Bereiche ohne Füllung im SVG transparent. Die Kanten von Formen werden gegen die Transparenz geglättet und sehen auf jeder Hintergrundfarbe richtig aus.
Verlustbehaftetes oder verlustfreies WebP für Vektorgrafiken?
Verlustfrei eignet sich für flache Logos, Icons und Diagramme mit wenigen einfarbigen Flächen; sie lassen sich sehr gut komprimieren und behalten perfekt saubere Kanten. Verlustbehaftet mit Qualität 85 bis 90 passt zu Illustrationen mit Verläufen, Schatten oder Texturen, bei denen verlustfreie Dateien schwer werden. Probieren Sie beides an einer Datei aus und behalten Sie das kleinere Ergebnis, das sauber aussieht.
Warum kann ich keine SVG in WordPress hochladen?
WordPress lässt SVG nicht als Upload-Typ zu, weil ein SVG Skripte enthalten kann. WebP wird seit Version 5.8 aus dem Jahr 2021 akzeptiert; mit der Umwandlung erhalten Sie also eine Datei, die die Mediathek ohne Sicherheits-Plugin annimmt. Wer echte Vektoren braucht, kann SVG weiterhin über ein bereinigendes Plugin freischalten.
Kann ich das WebP in einem E-Mail-Newsletter verwenden?
Besser nicht. Mehrere E-Mail-Programme, darunter Outlook für Windows auf dem Desktop, zeigen WebP nicht an, und Gmail stellt auch kein SVG dar. Rendern Sie die Grafik für E-Mails stattdessen mit SVG in PNG.
