What does the SVG Preview tool do?

It renders SVG markup live as you type, shows extracted attributes (width, height, viewBox), and produces a data: URI you can paste straight into CSS or HTML. Useful for debugging SVG icons, gradients, and viewBox math without spinning up a project.

Is the preview sandboxed?

Yes. The SVG renders inside a sandboxed iframe to isolate it from the rest of the page. Inline JavaScript inside the SVG won't run.

Can I download or copy the SVG?

Yes — copy the raw SVG text or the URL-encoded data: URI from the controls in the header.

SVG-Vorschau / Editor

Schachbrett-Hintergrund

Breite: 200Höhe: 200viewBox: 0 0 200 2007 Elemente

SVG-Quelltext

Vorschau

Technische Details

So funktioniert die SVG-Vorschau / der Editor

Was das Tool macht

Die SVG-Vorschau / der Editor rendert SVG-Markup live, während Sie es bearbeiten, und extrahiert Metadaten (width, height, viewBox, Elementanzahl) zur schnellen Prüfung. Ein Schalter fügt einen karierten Hintergrund hinzu, damit Sie transparente Bereiche klar erkennen. Das Tool erzeugt außerdem eine URL-kodierte Data-URI, die sich direkt in CSS background-image oder in HTML-src-Attributen verwenden lässt.

Häufige Anwendungsfälle für Entwickler

Icon-Designer testen viewBox-Berechnungen und Strichstärken in unterschiedlichen Größen. Frontend-Entwickler prüfen, ob ein manuell bearbeitetes SVG-Icon nach der Optimierung (manuell oder via SVGO) weiterhin korrekt gerendert wird. E-Mail-Entwickler erzeugen kompakte Data-URI-Versionen von Markenlogos zum Inline-Einbetten in HTML. Lehrende zeigen, wie Attribute wie preserveAspectRatio und overflow das Rendering beeinflussen.

Datenformate, Typen oder Varianten

Eingabe ist rohes SVG-XML-Markup. Ausgabe ist dasselbe SVG, gerendert in einem sandboxed iframe, plus eine URL-kodierte Data-URI (data:image/svg+xml;charset=utf-8,…). Die Kennzahl zur Elementanzahl zählt jedes öffnende Tag (einschließlich defs, g, Gradients und ähnlicher verschachtelter Elemente) und gibt so einen groben Eindruck der Komplexität. Extrahierte Attributwerte werden in Rohform angezeigt.

Häufige Fallstricke und Sonderfälle

Externe Ressourcen, auf die über `use`- oder `image`-Elemente mit href verwiesen wird, werden innerhalb des sandboxed iframes nicht geladen. Inline-JavaScript in script-Elementen wird durch die Sandbox blockiert — Animationen sollten auf SMIL oder CSS-Keyframes basieren. SVGs, die von einer bestimmten Schrift abhängen, die nicht systemweit installiert ist, fallen auf eine Standardschrift zurück; betten Sie Fonts ein oder verwenden Sie Systemschriften für Vorschauen.

Wann dieses Tool statt Code verwenden

Verwenden Sie das Browser-Tool für einmaliges Icon-Design, Debugging oder zum Erzeugen von Data-URIs. Für Produktions-Assets lassen Sie SVGs mit SVGO und einer abgestimmten Konfiguration laufen, um Metadaten zu entfernen und Markup zu minifizieren, und nutzen Sie ein Sprite-System oder eine saubere Bundler-Integration, um Icons in Ihrer App zu laden, statt überall Data-URIs inline einzubetten.