Zum Hauptinhalt springen

SVG zu React

Konvertieren Sie SVG in React, JSX oder TSX

Verwandeln Sie SVG-Dateien in JSX-Markup, eine importbereite React-Komponente in TypeScript oder JavaScript oder ein Modul, das SVG als String exportiert. Der Konverter behebt JSX-Attribute, konvertiert Inline-Stile, behält viewBox bei und unterstützt Batch-Downloads.

Dateien hier ablegen

Standardwerte für neue Dateien werden bearbeitet

Ausgabe

Ein vollständiges Modul: die Imports, die Komponente und der Export.

Modul

Benennt die Komponente, die exportierte Konstante und die erzeugte Datei. Standard ist der Dateiname in PascalCase.

Sprache

Umhüllt die Komponente, damit eine ref das svg-Element erreicht.

Verteilt React.SVGProps<SVGSVGElement> auf das Wurzelelement svg, nach den Attributen aus der Datei.

Export
Optimierung

Wendet die sichere Optimierungsvorgabe an, bevor die Ausgabe erzeugt wird.

Entfernt Breite und Höhe am Wurzelelement, damit sich die Komponente über CSS oder die übergebenen Props skaliert. Die viewBox bleibt immer erhalten.

Styling

Ersetzt jede Füllung und Kontur, die eine Farbe benennt, sodass die Grafik die CSS-Eigenschaft color erbt. fill="none" bleibt unangetastet.

Vorschau

Keine Vorschau. Dateien hinzufügen und auswählen, um Ergebnisse zu sehen.

Noch keine Dateien. Dateien oben ablegen oder DATEIEN AUSWÄHLEN klicken.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektor-Bildformat. Anstelle von Pixeln beschreibt eine SVG-Datei Formen, Pfade, Füllungen und Konturen mathematisch und kann daher in jeder Größe ohne Qualitätsverlust gerendert werden.

SVG ist das Standard-Vektorformat für das Web. Es wird von allen modernen Browsern nativ unterstützt und lässt sich mit CSS gestalten oder mit JavaScript beziehungsweise SMIL animieren. Für Logos, Icons und Illustrationen ist es oft kompakt; komplexe SVG-Dateien können jedoch groß werden.

Wann sollte man SVG in React umwandeln

Bundler sind sich uneinig, was der Import einer .svg-Datei liefert: eingebettetes Markup, eine URL oder ohne den passenden Loader schlicht gar nichts. Eine Komponente, die neben Ihrem übrigen Code im Projekt liegt, umgeht das. Aus dem Icon wird gewöhnliches JSX, das typgeprüft wird, sich per Tree-Shaking entfernen lässt und Props annimmt wie jede andere Komponente. Die Umwandlung erledigt außerdem, was JSX verlangt und rohes SVG nicht mitbringt: aus stroke-width wird strokeWidth, aus class wird className, aus xlink:href wird xlinkHref, und aus einem Inline-Style-String wird ein Objekt. Schalten Sie currentColor verwenden ein, dann erben alle Füllungen und Konturen die CSS-Eigenschaft color, sodass eine einzige Komponente jede Farbe abdeckt, in der Sie sie einsetzen.

So wandeln Sie eine SVG online in React um

  1. 1

    SVG-Dateien ablegen oder DATEIEN AUSWÄHLEN klicken, um sie der Warteschlange hinzuzufügen. Bis zu 40 auf einmal.

  2. 2

    JSX, React Component oder SVG String wählen, dann Komponentennamen, Sprache und die Option currentColor festlegen. Der erzeugte Code aktualisiert sich, sobald Sie die Optionen ändern.

  3. 3

    Den Code aus der Vorschau kopieren oder auf ALLE SPEICHERN klicken, um pro SVG eine Datei herunterzuladen, gebündelt als ZIP, wenn die Warteschlange mehr als eine Datei enthält.

Datenschutz: Ihre Dateien verlassen den Browser nicht

Die Konvertierung erfolgt lokal in Ihrem Browser mit JavaScript und WebAssembly. Es erfolgt kein Datei-Upload oder eine serverseitige Konvertierung, sodass die von Ihnen hinzugefügten Dateien auf Ihrem Gerät verbleiben.

Die lokale Verarbeitung trägt zum Schutz vertraulicher Logos, interner Dokumente und unveröffentlichter Kundengrafiken bei. Seiten und Konvertierungscode werden zwischengespeichert, während Sie sie verwenden, sodass bereits geöffnete Tools ohne Netzwerkverbindung weiterarbeiten können.

Häufige Fragen

Worin unterscheiden sich die drei Ausgaben?

JSX liefert das nackte svg-Markup, das Sie in eine bereits vorhandene Komponente einfügen. React Component liefert ein vollständiges Modul samt Imports und Export, fertig zum Speichern als HomeIcon.tsx oder HomeIcon.jsx. SVG String (TypeScript) ist ein .ts-Modul, das das Markup als einfachen String exportiert, zum Einsetzen in HTML, E-Mail-Vorlagen oder alles, was nicht React ist.

Nimmt die Komponente Props wie className und onClick an?

Ja, solange Props-Spread aktiv ist. Die Komponente nimmt React.SVGProps<SVGSVGElement> entgegen und verteilt sie auf das Wurzelelement svg, und zwar nach den Attributen aus der Datei. Damit greifen className, style, onClick, width und aria-label und überschreiben, was die Datei vorgegeben hat. Schalten Sie zusätzlich forwardRef ein, dann erreicht eine ref das svg-Element selbst.

Was ändert die Option currentColor verwenden?

Jede Füllung und jede Kontur, die eine Farbe benennt, wird durch currentColor ersetzt. Die Grafik zeichnet dann in der Farbe, die die CSS-Eigenschaft color ergibt, und color="red" an die Komponente zu übergeben funktioniert. fill="none" bleibt unangetastet und bedeutet weiterhin "nicht zeichnen". Standardmäßig ist die Option aus, denn eine mehrfarbige Illustration wird beim Einschalten auf eine Farbe reduziert.