SVG-Vorschau und -Inspektor

Füge ein SVG ein oder lege es ab und sieh es sofort gerendert, mit einem Statistikpanel für Abmessungen, viewBox, Elementaufschlüsselung, eindeutige Farben und Sicherheits-Flags. Die Vorschau läuft in einem Sandbox-iframe mit deaktivierten Skripten und ohne same-origin-Zugriff, sodass bösartige SVGs keinen Code ausführen können. Exportiere das Bild als SVG oder PNG, wechsle zwischen weißem, schwarzem oder transparentem Karomusterhintergrund oder öffne die Quellansicht, um das Markup zu prüfen.

Spezifikationen

• SVG 2 Specification
• MDN: SVG

Haeufige Anwendungsfaelle

• Ein SVG-Icon oder eine Illustration vor dem Einbetten schnell prüfen
• Ein nicht vertrauenswürdiges SVG auf eingebettete Skripte oder Event-Handler prüfen
• viewBox und intrinsische Abmessungen eines SVG überprüfen
• Eindeutige Farben in einem SVG zählen (nützlich für Paletten-Extraktion oder Optimierung)
• Ein SVG auf farbigem oder transparentem Hintergrund in ein PNG konvertieren
• Elementaufschlüsselung prüfen, um unerwartete <script>- oder <foreignObject>-Nutzung zu erkennen

Funktionen

• Sandbox-Live-Vorschau — das SVG wird in einem iframe mit sandbox="" gerendert, sodass Skripte und Event-Handler nicht ausgeführt werden können
• Hintergrundumschalter: Weiß, Schwarz oder transparentes Karomuster
• Statistikpanel: Abmessungen, viewBox, Seitenverhältnis, Byte-Größe, Elementanzahl, wichtigste Elemente, eindeutige Farben
• Sicherheits-Flags heben SVGs mit <script>, Event-Handlern, externen Referenzen oder Animationen hervor
• Export als SVG oder hochauflösendes (2×) PNG — der gewählte Hintergrund wird in den PNG-Export eingebrannt
• Vollbild-Vorschau für Detailprüfungen
• Quellansicht mit Syntax-Hervorhebung
• Das normalisierte SVG in die Zwischenablage kopieren

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Tipps

• Bevorzuge viewBox gegenüber fixen width/height-Werten, damit das Bild sauber skaliert
• Wenn die Badges Skripte oder Event-Handler aufleuchten, würde das SVG beim Einbetten Code ausführen — entferne sie, bevor du ihm vertraust
• Der Karomusterhintergrund hilft, unbeabsichtigte Transparenz zu erkennen; wechsle zu Weiß oder Schwarz, um den Look auf verschiedenen Seiten zu prüfen
• Der PNG-Export wird mit 2×-Auflösung gerendert; verwende den SVG-Export, um die Vektorqualität zu bewahren
• Externe Referenzen (http://-hrefs) werden in der Sandbox-Vorschau nicht geladen — das ist beabsichtigt