SVG-Code online prüfen, live umfärben und optimieren

Ob Sie ein <svg>-Icon von Claude oder ChatGPT generieren lassen oder Vektorgrafiken aus SVGRepo und Figma exportieren: Im reinen XML-Quelltext lassen sich Kontraste und Größenverhältnisse kaum beurteilen. Mit einem Browser-Viewer prüfen, färben und optimieren Sie Ihre Grafik in wenigen Sekunden.

Live-Vorschau auf Raster-, hellem und dunklem Hintergrund

Fügen Sie Ihren Code in den SVG-Viewer & Optimierer ein oder legen Sie eine .svg-Datei ab. Das Tool liest die Abmessungen automatisch aus dem viewBox-Attribut aus, sodass auch Icons ohne explizite width- und height-Angaben sofort korrekt dargestellt werden.

Farben per Cursor-Bewegung in Echtzeit ersetzen

Statt HEX-Werte manuell in Dutzenden <path>-Elementen zu suchen:

1. Nutzen Sie die Leiste Erkannte Farben unterhalb der Vorschau im SVG-Viewer & Optimierer.
2. Klicken Sie auf ein Farbfeld und bewegen Sie den Farbwähler, um die Änderung live an der Grafik zu verfolgen.
3. Passende Farbtöne finden Sie vorab mit dem Farbwähler.

XML minimieren und als 2x/4x-PNG exportieren

Über Optimieren entfernen Sie Kommentare, Metadaten und unnötige Leerzeichen mit einem Klick oder kopieren das SVG als Data-URI für CSS. Für Präsentationen und Dokumente wählen Sie die Skalierung 2x oder 4x für scharfe PNG- oder WebP-Exporte oder nutzen ergänzend den Bildkonverter.