SVG-Optimierer
Optimiere SVG, entferne Metadaten und Skripte und konvertiere die Ausgabe in React JSX.
SVG-Eingabe
Ziehen Sie SVG-Dateien hier per Drag & Drop
Optionen
Ausgabe
SVG-Hintergrund-CSS
Vorschau
Für die JSX-Ausgabe ist keine Vorschau verfügbar
Warum einen Online-SVG-Optimierer verwenden?
Skalierbare Vektorgrafiken (SVG) sind für modernes Webdesign unerlässlich und bieten gestochen scharfe Bilder in jeder Auflösung. Allerdings enthalten rohe SVG-Dateien, die aus Tools wie Illustrator, Figma oder Sketch exportiert werden, oft unnötige Metadaten, Kommentare und versteckte Attribute, die die Dateigröße aufblähen. Unser SVG Pro-Tool hilft Ihnen Bereinigen, Minimieren und Optimieren von SVGs bei schnelleren Seitenladevorgängen und saubereren Codebasen.
Funktionen für Entwickler
- SVG-zu-JSX-Konvertierung: Konvertiert automatisch Standard-SVG-Attribute (wie
class,stroke-width) in React-kompatibles JSX (className,strokeWidth). Perfekt für Next.js- und React-Apps. - Sicherheitsdesinfektion: Entfernen Sie bösartigen Code wie
<script>-Tags und Inline-Ereignishandler (onclickusw.), um XSS-Angriffe zu verhindern, wenn vom Benutzer hochgeladene SVGs verwendet werden. - CSS-Hintergrundgenerator: Generieren Sie sofort optimierte Daten-URI-Snippets, um SVGs als CSS-Hintergrundbilder zu verwenden.
Optimierungstechniken
- Metadaten entfernen: Entfernen Sie XML-Header, Dokumenttypen und Editor-Metadaten (Adobe Illustrator, Inkscape), die Browser nicht benötigen.
- Saubere Attribute: Entfernen Sie explizite Standardwerte und nutzlose IDs, um die Dateigröße zu reduzieren.
- Struktur minimieren: Entfernen Sie Kommentare und reduzieren Sie Leerzeichen sicher.
Häufig gestellte Fragen
Wie konvertiere ich SVG in eine React-Komponente?
Laden Sie einfach Ihr SVG hoch oder fügen Sie den Code ein und aktivieren Sie dann die Option „In JSX konvertieren“. Das Tool führt CamelCase-Attribute durch und ersetzt class durch className, sodass Sie eine React-Komponente erhalten, die sofort eingefügt werden kann.
Ist die Verwendung dieses SVG-Optimierers sicher?
Ja. SVG Pro läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals auf einen Server hochgeladen, wodurch sichergestellt wird, dass Ihre proprietären Vermögenswerte und Daten privat und sicher bleiben.
Warum ist meine SVG-Datei so groß?
SVG-Dateien enthalten oft „Krümel“, die von Designsoftware übrig geblieben sind, wie etwa ausgeblendete Ebenen, editorspezifische Metadaten und übermäßige Präzision in den Pfaddaten. Durch die Validierung und Minimierung Ihrer SVGs kann die Dateigröße häufig ohne visuelle Verluste um 30–70 % reduziert werden.