SVG zu HTML

SVG online in HTML konvertieren

Wählen Sie eine SVG-Datei aus oder fügen Sie ihr Markup ein, um Inline-SVG für eine HTML-Seite zu erzeugen. Prüfen Sie das Ergebnis in der Vorschau, passen Sie die Optimierungseinstellungen an und kopieren Sie den Code. Einlesen, Optimierung und Konvertierung laufen vollständig lokal in Ihrem Browser, ohne dass Ihr SVG an einen Server gesendet wird.

Responsives Inline-SVG vorbereiten

Behalten Sie die viewBox bei, um das Koordinatensystem des SVG zu erhalten. Entfernen Sie feste Breiten- und Höhenangaben, wenn das SVG eine nutzbare viewBox hat, und legen Sie die Größe dann in Ihrem eigenen CSS fest.

SVG-Größe und Einsparungen verstehen

„Originalgröße“ ist die Größe Ihres eingegebenen SVG. „Optimierte SVG-Größe“ ist seine Größe nach der Verarbeitung mit den gewählten Optionen, etwa dem Entfernen von Kommentaren, dem Runden von Koordinaten und dem Minifizieren des Codes. Größen werden in kB angegeben, wobei 1 kB 1.000 Bytes entspricht. „Eingespart“ zeigt die prozentuale Verringerung: Eine Verkleinerung von 10 kB auf 7 kB ergibt 30 %. Ist die Ausgabe größer, etwa wegen lesbarer Formatierung, wird stattdessen „Größenzunahme“ angezeigt. Diese Werte vergleichen das SVG-Markup, nicht die Größe der Exporte als JSX, React, CSS-Data-URI oder Base64.

Nachkommastellen und Einrückung

„Nachkommastellen“ legt fest, wie viele Stellen nach dem Dezimalpunkt Koordinaten und numerische Attribute behalten. Bei 2 Nachkommastellen wird aus 12.34567 der Wert 12.35. Weniger Nachkommastellen können die Dateigröße verringern, aber feine Details verändern; der Standardwert 3 ist ein Ausgangspunkt, prüfen Sie also die Vorschau. „Einrückung“ verwendet 2 Leerzeichen, 4 Leerzeichen oder Tabulatoren, damit HTML- und JSX-Code leichter lesbar wird, ohne das Bild zu verändern. „SVG minifizieren“ entfernt überflüssigen Leerraum aus der Formatierung, um die Ausgabe zu verdichten; solange die Minifizierung aktiv ist, ist die Einrückung deaktiviert.

HTML, JSX, React und SVG-Data-URIs

Die HTML-Ausgabe ist Inline-SVG-Markup und wird als SVG-Datei heruntergeladen. JSX passt Attributnamen und Inline-Styles für React an. „React-Komponente“ verpackt den JSX-Code in eine TypeScript-Funktion, die die üblichen SVG-Props akzeptiert. „CSS-Data-URI“ erzeugt eine background-image-Deklaration; Base64 erzeugt eine codierte SVG-Bild-URI. Die Größenangaben beziehen sich auf das optimierte SVG, nicht auf die größeren codierten Formate. Prüfen Sie die IDs, bevor Sie mehrere Inline-Kopien auf einer Seite verwenden.

Ein statischer, lokaler SVG-Workflow

Die Vorschau ist ein isoliertes Bild und kein ausführbares Seiten-Markup. Skripte, eingebettetes HTML, Animationen, externe Bilder und Stylesheets werden entfernt. Unterstützte Inline-Präsentationsstile und lokale Fragmentverweise bleiben erhalten. Dieses Tool ist für statische Grafiken gedacht; nicht unterstützte Funktionen können ihr Aussehen verändern. currentColor ändert einfarbige Füllungen und Konturen und erbt bei Inline-Verwendung seine Farbe; eine Bildvorschau verwendet ihren eigenen Farbkontext.