Füge ein SVG ein oder öffne es, um es neben seinem Code zu sehen. Bearbeite es live, prüfe es auf hellem, dunklem und kariertem Hintergrund, untersuche Pfadbefehle, bereinige es und exportiere PNG oder eine React-Komponente.
Füge SVG-Code ein oder öffne eine .svg-Datei, und das Bild erscheint neben seinem Code. Bearbeite den Code, und die Vorschau wird beim Tippen neu gezeichnet. Wechsle den Hintergrund, um transparente Bereiche zu prüfen, zoome hinein, liste jeden Pfadbefehl auf, entferne Editor-Ballast und lade das Ergebnis dann als SVG, PNG oder React-Komponente herunter.
Was du exportieren kannst
Codeansicht und Live-Vorschau nebeneinander. Es wird nichts hochgeladen: Die Datei wird von deinem eigenen Browser gelesen und gezeichnet, und die Vorschau wird als Bild angezeigt, sodass kein Skript im SVG ausgeführt werden kann.
Jeder moderne Browser öffnet SVG-Dateien direkt, zeigt aber nur das Bild. Um Code und Bild zusammen zu sehen, öffne die Datei in diesem Viewer über die Schaltfläche Datei öffnen oder ziehe sie auf das Codefeld.
Nein. Die Datei wird von deinem Browser gelesen und lokal gezeichnet. Nichts, was du hier öffnest oder eingibst, wird an einen Server gesendet.
Die häufigsten Ursachen sind ein fehlendes Attribut xmlns="http://www.w3.org/2000/svg" am svg-Element, eine viewBox, die an der Zeichnung vorbeizeigt, oder weiße Formen auf weißem Hintergrund. Probiere den Karomuster-Hintergrund aus und prüfe die Fehlerzeile unter der Vorschau.
Kommentare, die XML-Deklaration, den Doctype, Metadatenblöcke, editorspezifische Attribute aus Tools wie Inkscape, Sketch und Serif sowie leere Gruppen. Außerdem rundet er Dezimalzahlen auf die gewählte Genauigkeit. Er führt keine Pfade zusammen und ändert keine Formen, die Zeichnung sollte also gleich aussehen.
Kopiere die JSX-Ausgabe. Sie wandelt Attribute in React-Namen um, etwa stroke-width in strokeWidth und class in className, macht aus style-Strings Objekte und reicht alle Props, die du der Komponente gibst, an das svg-Element weiter.
Bewegen zu
Linie zu
Horizontale Linie
Vertikale Linie
Kubische Kurve
Glatte kubische Kurve
Quadratische Kurve
Glatte quadratische Kurve
Bogen
Pfad schließen
ein <script>-Element
ein on…-Event-Attribut
einen javascript:-Link
ein <foreignObject> mit HTML darin
Weiß
Dunkel
Karomuster
Das Markup ist kein gültiges XML.
Das Wurzelelement ist nicht <svg>.
Füge Markup ein, das mit <svg beginnt und mit </svg> endet.
Diese Datei ist größer als 5 MB. Öffne ein kleineres SVG.
{name} geöffnet.
Die Vorschau wurde noch nicht geladen, daher gibt es noch nichts zu exportieren.
PNG mit {w} × {h} gespeichert.
Code
Datei öffnen
Beispiel
SVG-Code
{bytes} Bytes · {n} Pfad
{bytes} Bytes · {n} Pfade
Dieses SVG enthält {parts}. Die Vorschau hier ist sicher, aber füge es nicht als Inline-HTML in eine Seite ein, ohne das zu entfernen.
Vorschau
Zoom
Vorschau deines SVG
Von deinem Browser gerendert. Skripte im SVG werden hier nicht ausgeführt.
Pfad-Inspektor
Dieses SVG enthält keine path-Elemente.
Pfad {n}
Befehle in Pfad {n}
Befehl
Zahlen
(relativ)
Wähle einen Pfad, um ihn in der Vorschau hervorzuheben und seine Befehle aufzulisten.
Bereinigen und exportieren
Nachkommastellen
Bereinigt: {before} auf {after} Bytes.
Bereinigen
SVG herunterladen
Als JSX kopieren
Kostenlos starten · Keine Kreditkarte nötig