SVG-Vorschau

SVG-Dateien anzeigen und Quellcode betrachten

Dateien verlassen Ihr Gerät nicht
Läuft im Browser
Kostenlos, ohne Anmeldung, ohne Wasserzeichen

SVG-Dateien hier ablegen oder klicken zum Auswählen

Unterstützt SVG, SVGZ · Einfügen mit Strg+V / ⌘V geht auch

Oder SVG-Code einfügen

Tipp: SVG-Code lässt sich überall auf der Seite mit Strg+V / ⌘V einfügen.

So verwenden Sie: SVG-Vorschau

Öffnen Sie SVG-Dateien oder eingefügten Code und prüfen Sie sie gefahrlos: zoomen, verschieben, Hintergrund wechseln, dazu Darstellungsgröße, width, height, viewBox und Elementzahl. Den Quellcode bearbeiten Sie mit Live-Vorschau; Skripte in der Datei werden nie ausgeführt.

Ziehen Sie SVG- oder SVGZ-Dateien auf die Seite, oder fügen Sie Code unter „Oder SVG-Code einfügen“ ein und klicken Sie auf „SVG hinzufügen“. Strg+V funktioniert überall auf der Seite.

Wechseln Sie den Hintergrund zwischen „Schachbrett“, „Weiß“ und „Schwarz“ und zoomen Sie per Schaltfläche, Strg/⌘ + Mausrad oder mit den Tasten + − 0 1; ziehen verschiebt, Doppelklick passt ein.

Lesen Sie unter „Details“ Darstellungsgröße, width, height, viewBox, Dateigröße und Elemente ab. Über der Grafik zeigt der Mauszeiger die Koordinaten in SVG-Einheiten.

Bearbeiten Sie den Code unter „Quellcode“. Die Vorschau folgt beim Tippen, Syntaxfehler werden mit Zeile und Spalte gemeldet.

Klicken Sie unter „Export“ auf „SVG herunterladen“ oder „Data-URI kopieren“.

Häufige Fragen

Ist es sicher, ein SVG unbekannter Herkunft zu öffnen?

Ja. Das SVG wird nur als Bild angezeigt, Skripte und Event-Handler darin laufen also nie, und verlinkte Dateien im Web (Bilder, Schriften, Stylesheets) werden nicht geladen. Hochgeladen wird nichts.

Warum erscheint mein SVG hier, aber nicht im Browser-Tab oder in einem img-Tag?

Vermutlich fehlt die xmlns-Deklaration. Die Vorschau ergänzt sie automatisch und zeigt einen Hinweis; klicken Sie auf „Im Code ergänzen“, um den Quellcode zu korrigieren, und laden Sie ihn dann herunter.

Warum wird die Größe als 300 × 150 angezeigt?

Das SVG hat weder width/height noch eine viewBox, deshalb gilt der Browser-Standard. Fehlen nur width und height, stammt die Größe aus der viewBox.

Was liefert „Data-URI kopieren“?

Einen URL-kodierten data:image/svg+xml-String, den Sie direkt in CSS background-image oder ein img-src einsetzen können. Für Base64 oder eine kleinere Datei nutzen Sie den SVG-Optimierer.

Kann ich .svgz-Dateien öffnen?

Ja. Gzip-komprimierte SVGZ-Dateien werden im Browser entpackt, und „SVG herunterladen“ speichert den Code als normale .svg-Datei.