Kostenloser SVG-Optimierer und -Konverter: SVG minimieren und bereinigen (Batch), SVG in PNG, JPG konvertieren, JSX oder Daten-URI reagieren, Pfade bearbeiten, ViewBox zuschneiden, neu einfärben, Sprites erstellen sowie Wellen-, Blob-, Muster-, Mesh-Gradienten- und Rauschgeneratoren. Kein Upload.
Ein kostenloser, privater SVG-Arbeitsbereich mit 23 Tools. Optimieren und verkleinern Sie SVGs im SVGO-Stil (stapelweise, mit Vorher-/Nachher-Prüfungen), bereinigen Sie Figma- und Illustrator-Exporte und konvertieren Sie SVG in PNG, JPG, WebP, React-Komponenten oder Daten-URIs. Sie können außerdem Dateien validieren, Pfade bearbeiten, die ViewBox zuschneiden, neu einfärben, Sprites erstellen und Wellen, Kleckse, Muster, Netzverläufe, Körnungstexturen und Trennlinien generieren – alles in Ihrem Browser.
SVG Forge vereint die SVG-Jobs, die Sie normalerweise auf fünf Websites verteilen würden, auf einer Seite: einen SVGO-ähnlichen Optimierer mit Batch-ZIP-Export, einen Minifier, Cleaner und Formatter; Konverter von SVG zu PNG, JPG, WebP, React-Komponenten und Daten-URIs; ein Validator; ein visueller Pfadeditor, ein ViewBox-Cropper, ein Farbersetzer und ein Sprite-Builder; und zehn Generatoren für Wellen, Kleckse, Muster, Netzverläufe, Korntexturen und Abschnittstrenner. Jedes Ergebnis kann mit einem Klick an das nächste Tool übergeben werden. Sie können einen Blob generieren, ihn neu einfärben, optimieren und als React-Komponente exportieren, ohne ihn zwischen Registerkarten zu kopieren und einzufügen.
Merkmale
23 SVG-Tools: optimieren, konvertieren, bearbeiten und generieren
Optimierer im SVGO-Stil: 21 Umschalter, Voreinstellungen, Batch-ZIP und visuelle Unterschiede
SVG in PNG, JPG und WebP in jeder Größe, einschließlich eines 16–512 Pixel großen Symbolsatzes
SVG to React / React Native Component (TSX oder JSX)
Daten-URI-Encoder und -Decoder, CSS-Hintergrund und CSS-Maskenausgabe
Validator: Sicherheit, Zugänglichkeit, Größe und GZIP-Bericht
Pfadeditor mit Ankerpunkten, Abs↔Rel-Konvertierung und Anpassung an das Symbol
ViewBox-Zuschnitt auf Inhalt, Farbaustausch (Farbton, Graustufen, aktuelle Farbe) und Sprite-Builder
So verwenden Sie SVG-Optimierer, Konverter und Generator
1
Wählen Sie ein Werkzeug
Wählen Sie in der Seitenleiste (oder in der Auswahl auf Mobilgeräten) zwischen „Optimieren“, „Konvertieren“, „Bearbeiten“ oder „Generieren“. Jedes Tool verfügt außerdem über einen eigenen Link, z. B. #svg-to-png.
2
Fügen Sie Ihr SVG hinzu
Fügen Sie Markup ein, laden Sie eine oder mehrere .svg-Dateien hoch oder ziehen Sie sie per Drag-and-Drop oder lesen Sie aus der Zwischenablage. Generatoren beginnen mit einem vorgefertigten Design, das Sie zufällig auswählen können.
3
Anpassen und prüfen
Passen Sie Voreinstellungen, Schieberegler und Schalter an. Die Vorschau wird live aktualisiert und der Optimierer zeigt das Original und das Ergebnis nebeneinander mit Byte- und GZIP-Einsparungen.
4
Exportieren oder übergeben
Kopieren Sie es als SVG, React, Daten-URI, Base64 oder CSS, laden Sie .svg herunter, exportieren Sie PNG/JPG/WebP oder senden Sie das Ergebnis mit „Öffnen in…“ direkt an ein anderes Tool.
Häufige Anwendungsfälle
Optimieren und verkleinern Sie Symbole und Illustrationen vor der Auslieferung an die Produktion
Bereinigen Sie aufgeblähte SVG-Exporte aus Figma, Illustrator, Inkscape oder Sketch
Komprimieren Sie einen ganzen Symbolordner stapelweise und laden Sie ihn als ZIP herunter
Konvertieren Sie ein SVG-Logo in PNG für E-Mail, soziale Medien oder einen Favicon-Satz
Verwandeln Sie SVG-Symbole in typisierte React- oder React Native-Komponenten
Kleine Symbole in CSS als kleinstmöglichen Daten-URI einbetten
Beschneiden Sie den leeren Raum um eine SVG-Datei, indem Sie die ViewBox an den Inhalt anpassen
Färben Sie eine SVG-Datei in eine Markenpalette um oder ändern Sie sie in die aktuelle Farbe
Bündeln Sie Symbole in einem wiederverwendbaren <symbol>-Sprite
Erstellen Sie Wellen-, Klecks-, Mesh-Verlaufs- und Körnungshintergründe für Landingpages
Detaillierte Anleitung
Welches SVG-Tool benötige ich?
Beginnen Sie mit dem Job, nicht mit dem Werkzeugnamen. Um eine Datei zu verkleinern, verwenden Sie „Optimieren“. Um eine SVG-Datei irgendwo zu verwenden, die eine Bitmap, Code oder CSS benötigt, verwenden Sie Convert. Um eine vorhandene SVG-Datei zu reparieren oder neu zu gestalten, verwenden Sie Bearbeiten. Um neue Grafiken aus Schiebereglern zu erstellen, verwenden Sie „Generieren“.
Hintergründe, Heldenabschnitte, Trennwände und dekorative Formen
Wie der SVG-Optimierer funktioniert und welche Einstellungen sicher sind
Der Optimierer analysiert Ihre Datei im Browser in ein echtes XML-Dokument und wendet 21 auf SVGO basierende Optimierungen an. Jeder einzelne kann ein- oder ausgeschaltet werden und drei Voreinstellungen (Balanced, Maximum, Clean only) decken die häufigsten Fälle ab. Eine visuelle Prüfung nebeneinander zeigt das ursprüngliche und das optimierte Rendering, sodass Sie vor dem Herunterladen sicherstellen können, dass sich nichts geändert hat. Sie können Dutzende Dateien auf einmal ablegen und sie als eine einzige ZIP-Datei zurückerhalten. Typische Exporte aus Illustrator, Inkscape oder Figma verkleinern sich um 30–70 %, und es wird eine GZIP-Größe angezeigt, da diese tatsächlich von Ihrem Server gesendet wird.
Optimierung
Was es bewirkt
Visuelles Risiko
Editordaten und Metadaten entfernen
Löscht Inkscape-, Sodipodi-, Illustrator-, Sketch- und Figma-Namespaces, <Metadaten> und Kommentare
Keiner
Zahlen runden / Pfade komprimieren
Rundet Koordinaten auf die von Ihnen gewählte Genauigkeit und schreibt Pfaddaten in die kürzere absolute oder relative Form um
Keine bei 2–3 Dezimalstellen; Überprüfen Sie die kleinen Symbole bei 0–1
Entfernen Sie nicht verwendete Defs und IDs
Löscht Farbverläufe, Clippfade und IDs, auf die nichts verweist
Keiner
Gruppen reduzieren / Standardeinstellungen entfernen
Entpackt leere <g>-Wrapper und entfernt Werte wie fill-opacity="1"
Keiner
Stile → Attribute, Farben kürzen
style="fill:#ffffff" wird zu fill="#fff"
Keine (wird automatisch übersprungen, wenn ein <style>-Block vorhanden ist)
Responsiv (Tropfenbreite/-höhe)
Behält nur die viewBox bei, sodass CSS die Größe steuert
Das Layout kann sich ändern, wenn Sie sich auf die feste Größe verlassen haben
<title>/<desc> entfernen
Entfernt zugängliche Namen
Optisch nicht, aber es schadet Benutzern von Bildschirmleseprogrammen
Bereinigen Sie SVG-Code, der aus Figma, Illustrator oder Inkscape exportiert wurde
Design-Tools ergänzen SVG-Exporte mit Generatorkommentaren, XML-Deklarationen, Editor-Namespaces, Layer-IDs wie Layer_1 und SVGID_1_, leeren Gruppen, aktivierten Hintergrundstilen und Zahlen mit sechs Dezimalstellen. Der SVG Cleaner entfernt diesen Schmutz, sorgt dafür, dass Ihr Markup eingerückt und lesbar bleibt, was nützlich ist, wenn Sie die Datei von Hand bearbeiten oder animieren. Der Optimierer geht für die Produktion noch weiter und der Validator listet genau auf, was darin enthalten ist (Elementanzahl, Farben, Schriftarten, eingebettete Bitmaps, Skripte und externe Links), sodass Sie erkennen können, warum eine Datei umfangreich oder unsicher ist, bevor Sie sie verwenden.
SVG zu PNG, React-Komponente oder Daten-URI: Welches Format soll verwendet werden?
SVG ist die beste Wahl für Symbole und Illustrationen im Web. An einigen Stellen ist jedoch noch eine Bitmap oder ein Code erforderlich. Die Konverter bearbeiten jeden Fall ohne einen Upload.
Export
Verwenden Sie es wann
Notizen
PNG / WebP
E-Mail, soziale Beiträge, App Stores, Favicons, überall dort, wo SVG nicht akzeptiert wird
Beliebige Größe bis zu 8192 Pixel, transparenter Hintergrund, Batch-ZIP und ein One-Click-Icon-Set mit 16–512 Pixeln
JPG
Orte, die ein kleines, undurchsichtiges Bild benötigen
Wählen Sie die Hintergrundfarbe, die die Transparenz ersetzt
Reagieren / Native reagieren
Symbole innerhalb einer React-, Next.js- oder Expo-Codebasis
CamelCase-Attribute, Stilobjekte, {...props}, optionale aktuelle Farbe und eine zugängliche Titel-Requisite
Daten-URI (URL-codiert)
Kleine, in CSS oder HTML eingebettete Symbole ohne zusätzliche Anforderung
Normalerweise etwa 30 % kleiner als Base64. Mit der CSS-Maskenausgabe können Sie die Farbe mit der Hintergrundfarbe neu einfärben
SVG-Sprite
Viele Symbole werden auf einer Website wiederverwendet
Eine Datei mit <symbol>s, auf die mit <use href="#id"> verwiesen wird
Die Generatoren erzeugen saubere, handbearbeitbare SVG-Exporte anstelle von Bitmap-Exporten. Mit SMIL können geschichtete Wellen und sich verändernde Blobs animiert werden, was innerhalb von <img>- und CSS-Hintergründen ohne JavaScript funktioniert. Der Mustergenerator exportiert 16 nahtlose Motive entweder als einzelne Kachel zur Hintergrundwiederholung oder als vollständige Leinwand. Die Mesh-Verlaufs- und Rauschgeneratoren erzeugen den weichen Verlauf und die Filmkörnung, die bei modernen Landingpages beliebt sind, und der Formteiler verfügt über ein fertig einfügbares HTML- und CSS-Snippet für Abschnittskanten. Jede Ausgabe kann als SVG, React, Daten-URI oder CSS kopiert oder nach PNG exportiert werden.
Das Parsen, Optimieren, Rasterisieren und Komprimieren erfolgt in Ihrem Browser mit Standard-Web-APIs (DOMParser, Canvas und CompressionStream). Ihre Kunstwerke erreichen nie einen Server, daher funktionieren die Tools auch für Kundenarbeiten unter NDA. Vorschauen werden über ein isoliertes <img> gerendert, sodass alle Skripte in einer SVG-Datei, die Sie einfügen, nicht ausgeführt werden können und der Optimierer <script>-Tags und Ereignishandler entfernen kann, bevor Sie eine Datei auf Ihrer Site einbetten.
Häufig gestellte Fragen
Welche SVG-Tools sind enthalten?
Dreiundzwanzig, gruppiert in vier Bereiche. Optimieren: Optimierer, Minifizierer, Reiniger, Formatierer und Pfadvereinfacher. Konvertieren: SVG in PNG/JPG/WebP, SVG in React, Daten-URI und Viewer & Validator. Bearbeiten: Pfadeditor, ViewBox & Crop, Color Replacement und Sprite Generator. Erzeugen: Welle, Klecks, Muster, Netzverlauf, Rauschen, Formteiler, Polygon, Stern, Spirale und Kringel.
Wie optimiere ich eine SVG-Datei kostenlos?
Öffnen Sie den Optimierer, fügen Sie Ihre SVG-Datei ein oder fügen Sie eine oder mehrere .svg-Dateien ein und wählen Sie eine Voreinstellung (ausgewogen, maximal oder nur sauber) oder schalten Sie eine der 21 Optimierungen um. Das Tool zeigt Originalgrößen, optimierte und gezippte Größen sowie eine visuelle Überprüfung nebeneinander. Kopieren Sie dann das Ergebnis, laden Sie es herunter oder laden Sie jede Datei als ZIP herunter.
Wie erstelle ich eine SVG-Welle oder einen SVG-Blob?
Verwenden Sie den Wellen- oder Blob-Generator, passen Sie die Schieberegler (Ebenen, Amplitude, Komplexität, Zufälligkeit) und Farben an, und der Vektor wird live aktualisiert. Klicken Sie auf „Zufällig“, um Variationen zu erkunden, aktivieren Sie die Animation für einen Morphing-Effekt und kopieren Sie dann die SVG-Datei oder exportieren Sie sie.
Kann ich das SVG als CSS-Hintergrund oder Daten-URI erhalten?
Ja. Jedes Ergebnis verfügt über Exportregisterkarten für rohes SVG, React, einen kompakten URL-codierten Daten-URI, Base64 und eine sofort einfügbare CSS-Regel sowie .svg- und PNG/JPG/WebP-Downloads. Das Daten-URI-Tool erstellt außerdem ein CSS-Masken-Snippet und kann einen Daten-URI zurück in SVG dekodieren.
Was entfernt der SVG-Reiniger?
XML-Deklarationen, DOCTYPE, Kommentare, <metadata> und Editor-Namespaces und Attribute von Inkscape, Sodipodi, Illustrator, Sketch, Serif und Figma. Dadurch bleibt das Markup eingerückt und lesbar, sodass es die richtige Wahl ist, wenn Sie die Datei dennoch manuell bearbeiten möchten.
Wird mein SVG auf einen Server hochgeladen?
Nein. Alles, einschließlich Optimierung, PNG-Rendering und ZIP-Erstellung, läuft lokal in Ihrem Browser. Ihre Dateien verlassen nie Ihr Gerät, sodass sie privat und sofort verfügbar sind.
Wie verkleinere oder optimiere ich eine SVG-Datei?
Fügen Sie Ihre SVG-Datei ein oder laden Sie sie hoch. Der Optimierer entfernt Editor-Metadaten, Kommentare, nicht verwendete Definitionen und redundanten Code, rundet Zahlen und komprimiert Pfaddaten (wie SVGO). Dadurch wird eine Datei häufig um 30–70 % verkleinert, ohne dass sich ihr Aussehen ändert, und alles wird in Ihrem Browser ausgeführt.
Wie bereinige ich unordentlichen SVG-Code aus Figma oder Illustrator?
Design-Tools fügen Aufblähungen wie Generatorkommentare, Layer-IDs, leere Gruppen und Zahlen mit sechs Dezimalstellen hinzu. Fügen Sie den Export in den Cleaner (hält ihn lesbar) oder den Optimizer (kleinste Ausgabe) ein, um ein kompaktes, webfähiges Markup zu erhalten.
Kann ich eine SVG-Datei in eine Daten-URI konvertieren?
Ja. Verwenden Sie für jedes Ergebnis das Daten-URI-Tool oder die Registerkarte „Daten-URI“. Es verwendet URL-Kodierung, die normalerweise etwa 30 % kleiner als Base64 ist, und bietet Ihnen außerdem Base64, eine CSS-Hintergrundregel und ein <img>-Tag.
Wie konvertiere ich SVG in PNG mit transparentem Hintergrund?
Öffnen Sie SVG als PNG/JPG, fügen Sie Ihre Datei(en) hinzu, wählen Sie PNG und einen Maßstab (z. B. 4×) oder eine genaue Breite oder Höhe und lassen Sie den transparenten Hintergrund eingeschaltet. Sie können viele SVGs stapelweise in eine ZIP-Datei konvertieren, stattdessen JPG oder WebP auswählen oder den Symbolsatz zum Exportieren von PNGs mit 16–512 Pixeln für Favicons und App-Symbole auswählen.
Wie konvertiere ich eine SVG-Komponente in eine React-Komponente?
Fügen Sie die SVG-Datei in SVG to React (JSX) ein, benennen Sie die Komponente und wählen Sie TypeScript oder JavaScript, React oder React Native. Attribute werden in CamelCase konvertiert, Inline-Stile werden zu Objekten und {...props} wird im Stammverzeichnis verteilt. Sie können auch die Farben auf „currentColor“ umstellen und eine barrierefreie Titel-Requisite hinzufügen.
Wird sich durch die Optimierung das Aussehen meiner SVG-Datei ändern?
Nicht mit der Standardvoreinstellung „Balanced“. Bei jeder darin enthaltenen Optimierung werden nur unsichtbare Daten entfernt oder Werte entsprechend neu geschrieben. Bei sehr geringer Genauigkeit (0–1 Dezimalstelle) können Punkte auf winzigen Symbolen leicht verschoben werden, weshalb der Optimierer das Original und das Ergebnis vor dem Herunterladen nebeneinander anzeigt.
Wie entferne ich den leeren Raum um eine SVG-Datei?
Öffnen Sie „ViewBox & Crop“, fügen Sie die SVG-Datei ein und klicken Sie auf „Auf Inhalt zuschneiden“. Das Tool misst die tatsächlichen Grenzen der Zeichnung, legt eine enge viewBox mit der von Ihnen gewählten Auffüllung fest und kann die Breiten- und Höhenattribute aktualisieren oder entfernen.
Wie kann ich die Farben einer SVG-Datei ändern?
Der Color Replacementer erkennt jede Füll-, Strich- und Verlaufsfarbe (hex, rgb(), hsl() und benannte Farben) und listet auf, wie oft jede einzelne erscheint. Sie können sie einzeln neu zuordnen, Farbton, Sättigung und Helligkeit für die gesamte Datei verschieben, in Graustufen konvertieren oder invertieren oder alles durch currentColor ersetzen, sodass das Symbol Ihrer CSS-Textfarbe folgt.
Was ist ein SVG-Sprite und wie verwende ich es?
Ein Sprite ist eine SVG-Datei, die viele Symbole als <symbol>-Elemente enthält. Fügen Sie Ihre Symbole zum Sprite-Generator hinzu und verweisen Sie dann auf jedes einzelne mit <svg><use href="#icon-id"/></svg>. Das Tool kann interne IDs voranstellen, um Farbverlaufskonflikte zu vermeiden und Farben in „currentColor“ umzuwandeln, und es generiert den Verwendungscode für Sie.
Ist es sicher, eine SVG-Datei aus einer unbekannten Quelle einzufügen?
Ja. Vorschauen werden in einem isolierten <img> gerendert, wo Skripte nicht ausgeführt werden können. Der Validator markiert <script>-Tags, Ereignishandler und externe Links, und der Optimierer entfernt standardmäßig Skripte und Handler, bevor Sie die Datei auf einer Site einbetten.
Kann ich die erzeugten Wellen und Blobs animieren?
Ja. Die Wave- und Blob-Generatoren verfügen über einen Animate-Schalter, der einen eigenständigen SMIL-Morph hinzufügt. Es wird in Browsern innerhalb von <img>, CSS-Hintergründen und Inline-SVG abgespielt, ohne dass JavaScript oder CSS erforderlich ist.
