SVG-Viewer

Online SVG-Code-Editor & Live-Vorschau-Tool

SVG-Code

Zeichen: 0Bytes: 0

SVG-Vorschau

SVG-Vorschau wird hier angezeigt

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.

SVG ist Code und Bild zugleich: Es kann Pfade, Text, Filter, Animationen, externe Referenzen und Styles enthalten. Ein Viewer hilft beim schnellen Prüfen von Form, viewBox, Skalierung und Markup, aber sicherheitsrelevante SVGs sollten vorsichtig behandelt werden, besonders wenn sie aus unbekannten Quellen stammen. Für Einbettung in Webseiten müssen Größe, Zugänglichkeit, Sanitizing und mögliche Skript- oder Fremdressourcen geprüft werden.

Anleitung

So wird’s benutzt

SVG-Code in den linken Editor eingeben oder einfügen
Im rechten Panel wird die SVG-Darstellung in Echtzeit angezeigt
Die Schaltfläche „Quellcode“ zeigt den formatierten SVG-Quellcode an
Die Schaltfläche „Herunterladen“ speichert die SVG-Datei
Die Schaltfläche „SVG kopieren“ übernimmt den Code in die Zwischenablage

SVG-Sicherheit

SVGs möglichst nur aus vertrauenswürdigen Quellen einfügen – SVG kann Skripte, externe Referenzen oder unerwartete Styles enthalten.
Vor dem Herunterladen oder Einbetten viewBox, Abmessungen, Füllungen, Konturen und Textdarstellung in der Zielgröße prüfen.

Anwendungsfälle

SVG-Markup während der Bearbeitung in der Vorschau anzeigenFügen Sie SVG-Code in den hervorgehobenen Editor ein, und die Seite parsed ihn mit DOMParser vor der Darstellung. Gültiger SVG erscheint im Vorschaubereich, Parser-Fehler zeigen einen Ungültig-Zustand an, anstatt unsichere fehlerhafte Ausgabe zu rendern, und eingebettete foreignObject- oder script-Tags werden exakt wie verfasst beibehalten.

SVG-Quellcode inspizieren und teilenDie Syntaxhervorhebung nutzt den lokalen highlight.js-Wrapper für XML, und Ein-/Ausgabe-Byte-Zahlen machen die Asset-Größe sichtbar. Sie können den validierten SVG kopieren oder als image.svg herunterladen für den Einsatz in Design, Dokumentation oder Frontend-Arbeit, wobei die ursprüngliche Einrückung und xml:space-Attribute in der Ausgabe erhalten bleiben.

Ein bekanntes SVG-Beispiel für schnelle Tests ladenDie Beispiel-Schaltfläche fügt einen kleinen SVG-Gradientenkreis mit Text ein, der als Referenzstruktur für defs, Gradienten, Formen, Text, Namensräume und Größenangaben dient. Das ist nützlich, um zu testen, ob Rendering, Kopieren oder Herunterladen funktioniert, einschließlich Fällen, in denen Web-Fonts referenziert werden und auf eine Systemschrift zurückfallen müssen. xml:space="preserve" auf einem <text>-Element verhindert, dass der Renderer Leerzeichen in Titeln oder Monospace-Labels zusammenfasst, sodass SVGs, die in einer Browser-Vorschau korrekt aussehen, in älteren Viewern dennoch mit zusammengefassten Leerzeichen dargestellt werden können.

viewBox-Skalierung vor dem Einbetten in Layouts prüfenFügen Sie das SVG ein und bestätigen Sie, dass viewBox-, width- und height-Attribute in verschiedenen Containergrößen korrekt gerendert werden. SVGs ohne preserveAspectRatio oder mit fehlender viewBox werden beim Einsatz in responsiven CSS-Grids häufig beschnitten oder gestreckt, und ein einzelnes fehlendes abschließendes Nullzeichen in der viewBox kann die gesamte Komposition um einige Pixel verschieben.

SVG auf Skripte und externe Referenzen prüfenBevor Sie ein Icon in ein CMS oder eine Produktivseite exportieren, durchsuchen Sie den Quellcode-Bereich nach <script>-Tags, xlink:href-Verweisen auf externe URLs und onload-Handlern. Das Entfernen oder Sandboxing dieser Elemente durch einen SVG-Sanitizer reduziert das Risiko von Inline-JavaScript oder Pixel-Tracking-Beacons in dem, was wie ein statisches Bild aussieht. Über CDN referenzierte Web-Fonts können beim Herunterladen und Offline-Wiederöffnen des SVG stillschweigend ausfallen, daher sorgt ein font-face-Stack mit generischem Fallback (serif, sans-serif) dafür, dass der Text in der gespeicherten Kopie lesbar bleibt.

Technisches Prinzip

Die SVG-Quelle wird mit new DOMParser().parseFromString(source, 'image/svg+xml') geparst, was ein Document nach XML-Regeln liefert – im Gegensatz zum tolerantem HTML-Parser. Der Parser prüft die Wohlgeformtheit, zeigt bei ungültigem Markup einen <parsererror>-Knoten an und macht den SVG-Baum für Skripte und CSS genau wie den Rest des DOM verfügbar. Elemente wie <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient> und <filter> sind vollwertige Knoten mit eigenen Attributen und Ereigniszielen. Das Koordinatensystem wird durch das viewBox-Attribut gesteuert. viewBox="minX minY width height" definiert den internen Koordinatenraum, und preserveAspectRatio (standardmäßig xMidYMid meet) entscheidet, wie dieser Raum in den gerenderten Viewport abgebildet wird: meet erhält die gesamte viewBox durch Letterboxing, slice füllt den Viewport durch Zuschneiden, und none verzerrt nicht-proportional. Pfadbefehle innerhalb von d verwenden M (moveTo), L (lineTo), C (kubischer Bézier), Q (quadratisch), A (elliptischer Bogen) und Z (closepath); jeder Befehl hat eine absolute Großbuchstabenform und eine relative Kleinbuchstabenform. Die SVG-Sicherheit erfordert explizite Behandlung, da das Format ausführbar ist: <script>, foreignObject mit HTML-Inhalt, xlink:href auf externe URLs sowie onload- und andere Ereignishandler-Attribute können JavaScript im Seitenkontext ausführen, wenn das SVG inline injiziert wird. DOMPurify mit dem SVG-Profil oder ein serverseitiger Sanitizer sind die Standardmaßnahmen bei der Annahme von Drittanbieter-SVG. Die Rasterisierung zu PNG erfolgt durch Zeichnen des SVG (als HTMLImageElement aus einer Blob-URL geladen) auf eine Canvas mit drawImage, gefolgt von canvas.toBlob('image/png') zum Herunterladen.

Parser: new DOMParser().parseFromString(source, 'image/svg+xml') liefert ein striktes XML-Document mit einem <parsererror>-Knoten bei Fehler
viewBox: "minX minY width height" setzt den internen Koordinatenraum; preserveAspectRatio xMidYMid meet/slice steuert Anpassung vs. Zuschneiden
Pfadebefehle: M moveTo, L lineTo, C kubischer Bézier, Q quadratisch, A Bogen, Z closepath; Großbuchstaben = absolut, Kleinbuchstaben = relativ
Sicherheitsfläche: Inline-<script>, foreignObject, xlink:href auf Remote-URLs und onload/onclick-Handler werden als JavaScript ausgeführt
Bereinigung: DOMPurify mit USE_PROFILES: { svg: true } entfernt Skripte und Ereignishandler vor dem Einfügen von Drittanbieter-SVG
PNG-Export: SVG als HTMLImageElement über Blob-URL laden, drawImage auf Canvas, canvas.toBlob('image/png') zum Herunterladen
Browser-Basis: SVG 1.1 in jedem modernen Browser seit 2011; SVG-2-Funktionen (Verbesserungen für Text auf Pfad) sind teilweise implementiert

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>

FAQ

Was macht der Viewer?

Er rendert eingefügtes SVG-Markup, lässt dich zoomen und schwenken, zeigt den Quellcode mit Syntax-Highlighting an und meldet Bildmaße und viewBox. Praktisch zum Inspizieren von Drittanbieter-SVGs, zum Debuggen von Pfaddaten und zur Vorschau von Icons, bevor du sie in ein Projekt aufnimmst.

Wird das SVG hochgeladen?

Nein. Die Seite parst und rendert SVG lokal in deinem Browser – SVG ist einfach Markup, das der Browser bereits darstellen kann. Eingefügter Code geht nie über das Netzwerk.

Warum sieht mein SVG hier anders aus als in meiner Designsoftware?

SVG wird abhängig vom User Agent gerendert. Browser, Figma, Illustrator und Inkscape interpretieren manche Randfälle (Textrendering, Filtereffekte, Mesh-Verläufe, Clip-Paths) unterschiedlich. Der Viewer zeigt, was der Browser tut – also genau das, was deine Endnutzer in HTML sehen werden.

Kann ich das SVG hier bearbeiten?

Du kannst die Quelle links bearbeiten und neu rendern. Für visuelles Bearbeiten (Punkte verschieben, Pfade ändern) nutze einen echten SVG-Editor wie Inkscape, Figma oder Boxy SVG. Diese Seite ist ein Viewer plus schnelle Textbearbeitung.

Wie bekomme ich das SVG in mein Projekt?

Kopiere die Quelle. Die meisten Frontend-Frameworks akzeptieren Inline-SVG direkt in JSX/HTML. Als Hintergrund legst du es in deinen Asset-Ordner und referenzierst es mit url(...). Als Icon-Font lass es durch einen Build-Schritt wie SVGO und einen Sprite-Generator laufen.

Warum ist mein SVG so groß?

Viele SVG-Exporte enthalten Editor-Metadaten (Adobe-Illustrator-XMP, :inkscape:-Namespaces), ungenutzte defs, Kommentare und ausführliche Pfaddaten. Lass es durch SVGO laufen (online oder CLI), um diese Bestandteile zu entfernen – typischerweise 30–70 % kleiner ohne sichtbare Änderung.

Werden externe Ressourcen geladen?

Die meisten Viewer blockieren externe Ladevorgänge (kein Abruf externer <image href>- oder <use href>-URLs) aus Sicherheitsgründen. Bette referenzierte Bitmaps als data:-URIs ein und ersetze <use> mit externem href durch Inline-Kopien, falls dein SVG darauf angewiesen ist.