SVG-Optimierer
BereinigtSVG-Dateien optimieren und bereinigen.
- Icon-Workflow
Input bytes
0
Output bytes
0
Colors
0
ViewBox
—
Colors
fill/stroke/stop-color
Preview an SVG to extract colors.
Preview
No preview yet.
Output SVG
Sanitization
SVG can execute scripts or load external resources. This tool sanitizes the markup before preview and removes risky elements/attributes.
- Removes
<script>,<foreignObject>, and event handler attributes (on*). - Strips external
href/xlink:hrefunless it’s an internal#idreference.
Was ist SVG?
SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat für zweidimensionale Grafiken mit Unterstützung für Interaktivität und Animation. Anders als Rasterformate wie JPEG oder PNG werden SVGs durch mathematische Pfade definiert, wodurch sie ohne Qualitätsverlust auf jede Größe skaliert werden können. Das macht sie perfekt für Logos, Icons und Illustrationen im Web, wo sie auf allem von mobilen Bildschirmen bis zu hochauflösenden Desktop-Monitoren scharf bleiben.
So verwenden Sie dieses Tool
Fügen Sie Ihren SVG-Code in das Textfeld SVG Input links ein. Klicken Sie auf Preview, um die Grafik zu sehen und ihre Farbpalette zu extrahieren. Verwenden Sie die Schaltflächen Optimize oder Minify, um das Markup zu bereinigen und die Dateigröße zu reduzieren. Optional können Sie bestimmte Farben ersetzen, indem Sie neue Werte im Colors-Panel eingeben und auf Apply klicken. Klicken Sie auf Copy oder Download, um Ihr bereinigtes und optimiertes SVG zu speichern.
Häufige Anwendungsfälle
Icon-Verwaltung, um aus Design-Tools wie Figma oder Illustrator exportierte SVGs zu bereinigen. Theming, um die Farben eines Icon-Sets schnell an Ihre Markenpalette anzupassen. Sicherheit, um SVGs aus nicht vertrauenswürdigen Quellen zu bereinigen und potenzielle Skripte oder externe Referenzen zu entfernen. Performance, um SVG-Markup zu minimieren, die Größe von Inline-Grafiken zu reduzieren und die Seitenladezeiten zu verbessern.
Profi-Tipps
Verwenden Sie die Schaltfläche currentColor, um alle expliziten Füllungen und Konturen in currentColor umzuwandeln, sodass Ihr SVG leicht über CSS gestylt werden kann. Optimieren Sie Ihre SVGs immer, bevor Sie sie in der Produktion verwenden, um sicherzustellen, dass sie so klein wie möglich sind. Verwenden Sie beim Erstellen von SVGs in Design-Tools die Funktionen Outline Stroke und Simplify Path, um die Komplexität des generierten Codes vor der Optimierung zu reduzieren.