SVG to Code

SVG-Markup zu HTML / JSX / Vue SFC Code konvertieren

SVG-Markup einfügen und in sauberes HTML-, JSX- oder Vue-Code konvertieren. Behandelt automatisch Attributnamen-Konvertierungen (z.B. class → className in JSX).

Ausgabemodus

Wie man es benutzt

Wählen Sie einen Ausgabe-Modus: HTML, JSX (React) oder Vue Template.
Fügen Sie Ihr SVG-Markup in das Eingabefeld ein.
Lesen Sie den konvertierten Code im Ausgabe-Feld, wo JSX-Modus class zu className umbenennt und Kebab-Case-Attribute zu camelCase konvertiert.
Kopieren Sie die Ausgabe mit der Kopierschaltfläche.
Überprüfen Sie die Live-SVG-Vorschau unter der Ausgabe, um zu bestätigen, dass das Grafik korrekt aussieht.

Beispiele

Das Einfügen einer SVG mit class="icon" und stroke-width="2" im JSX-Modus gibt className="icon" und strokeWidth="2" aus.
Das Wechseln des gleichen Inputs zum Vue Template Modus ersetzt class= mit :class=, während alle anderen Attribute unverändert bleiben.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.