SVG-Viewer
Fügen Sie rohes SVG-Markup ein und sehen Sie das gerenderte Ergebnis sofort in der Vorschau.
Die Vorschau deaktiviert Skripte und externe Referenzen, lässt Sie aber weiterhin viewBox und Größenangaben prüfen.
SVG-Vorschau: Rohcode einfügen und das Ergebnis sofort prüfen
viewBox- und Größenprüfung: Transparenz und potenziell unsichere Inhalte kontrollieren
So wird es verwendet
- SVG-Code einfügen oder eine `.svg`-Datei laden.
- Hintergrund und Zoomstufe wechseln, um die Darstellung zu prüfen.
- viewBox, Größenangaben und Warnungen prüfen und das SVG bei Bedarf speichern.
Beispiel
Einfaches Icon-SVG
Eingabe
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="52" fill="#0ea5e9"/><path d="M36 62l16 16 32-40" fill="none" stroke="#fff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
Ausgabe
Ein blaues rundes Symbol wird gerendert, und im Infobereich wird die viewBox als `0 0 120 120` angezeigt.
FAQ
Wird mein SVG irgendwo hochgeladen?
Nein. Eingefügte SVGs und geladene Dateien bleiben in Ihrem Browser und werden nicht an einen Server gesendet.
Was passiert mit SVGs, die script oder foreignObject enthalten?
Die sichere Vorschau entfernt diese Elemente vor dem Rendern und zeigt im Infobereich eine Warnung an.
Werden SVGs mit externen Bildern oder Schriften exakt gleich dargestellt?
Nicht immer. Externe Referenzen sind deaktiviert, daher kann die Darstellung von der ursprünglichen Umgebung abweichen. Dieses Tool priorisiert eine sichere lokale Prüfung.
Warum wird mein SVG nicht gerendert?
Häufige Ursachen sind ungültiges XML, fehlerhafte Attributwerte oder ein Wurzelelement, das nicht `svg` ist. Prüfen Sie die vom Tool angezeigte Fehlermeldung.
Warum sollte ich den Hintergrund wechseln?
Transparente Bereiche und helle Symbole können je nach Hintergrund sehr unterschiedlich wirken. Deshalb können Sie mit dem Tool schnell Schachbrett-, weißen und dunklen Hintergrund testen.
Hinweise
- Aus Sicherheitsgründen werden externe URL-Referenzen und gefährliche Elemente vor dem Rendern deaktiviert.
- SVGs, die von externen Schriften oder Bildern abhängen, können anders aussehen als in ihrer ursprünglichen Umgebung.
- Sehr große SVG-Dateien schalten automatisch die Live-Vorschau aus und fordern zum manuellen Rendern auf.