SVG-Viewer
Online SVG-Code-Editor & Live-Vorschau-Tool
Was ist ein SVG-Viewer?
Der SVG-Viewer ist ein Online-Tool zum Bearbeiten von SVG-Code und zur Live-Vorschau. Es ermöglicht das direkte Eingeben oder Einfügen von SVG-Code und zeigt das gerenderte Ergebnis in Echtzeit an. SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat, das weit verbreitet in der Webdesign-, Icon-Erstellung und Datenvisualisierung eingesetzt wird.
Dieses Tool unterstützt Live-Vorschau, Quellcode-Anzeige, SVG-Datei-Download und mehr.
Anleitung
Grundlegende Verwendung
- SVG-Code im linken Editor eingeben oder einfügen
- Das rechte Panel zeigt die SVG-Rendering in Echtzeit
- Auf "Quelle" klicken, um den formatierten SVG-Quellcode anzuzeigen
- Auf "Herunterladen" klicken, um SVG als Datei zu speichern
- Auf "SVG kopieren" klicken, um den Code in die Zwischenablage zu kopieren
Funktionen
SVG-Beispiele
Kreis
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Rechteck
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Stern
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>Häufig gestellte Fragen
Was ist SVG?
SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat, das vom W3C standardisiert wurde. Im Gegensatz zu Rasterformaten wie PNG und JPG verwendet SVG mathematische Formeln zur Beschreibung von Grafiken und ermöglicht verlustfreie Skalierung auf beliebige Größe.
Welche Vorteile hat SVG?
SVG-Dateien sind klein, verlustfrei skalierbar, unterstützen Animation und Interaktivität, können mit CSS und JavaScript gesteuert werden und sind SEO-freundlich. Ideal für Icons, Logos, Diagramme und responsives Design.
Wie verwendet man SVG auf einer Webseite?
SVG kann über img-Tags, CSS background-image, Inline-SVG (direkt in HTML) oder object/embed-Tags verwendet werden. Inline-SVG ist der flexibelste Ansatz.
Ist dieses Tool sicher?
Völlig sicher. Das gesamte Parsen und Rendern von SVG-Code erfolgt lokal im Browser. Es werden keine Daten an Server hochgeladen.