SVG-Code als SVG-Datei speichern

Füge SVG-Code ein, prüfe die Grafik in der Vorschau und lade eine bearbeitbare .svg-Datei herunter. Kostenlos und ohne Registrierung.

SVG-Code

Live-VorschauVerarbeitung in deinem Browser

Hier erscheint dein SVG. Füge Code ein oder probiere ein Beispiel aus, um zu beginnen.

Vorschauhintergrund

Dateiname

.svg

Speichern als: image.svg

Füge SVG-Code ein, um zu beginnen.

So speicherst du SVG-Code als Datei

In drei Schritten vom kopierten Code zur eigenständigen Vektordatei.

SVG-Code einfügen

Kopiere das vollständige <svg>-Element einschließlich schließendem Tag, viewBox und aller benötigten Definitionen. Du kannst auch einen einzelnen Markdown-Codeblock mit SVG- oder XML-Code einfügen.

Live-Vorschau prüfen

Das Werkzeug prüft die XML-Syntax und die unterstützten Funktionen. Sieh dir die Grafik an oder bearbeite und formatiere den Code. Mit den Vorschauhintergründen erkennst du helle Grafiken besser, ohne die Datei zu verändern.

Datei benennen und herunterladen

Wähle einen Dateinamen und klicke auf „SVG herunterladen“. Die Datei erhält die Endung .svg. Ihre ursprünglichen Maße, Einheiten und die viewBox bleiben erhalten.

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics. Eine SVG-Datei enthält XML-Code, der Formen, Pfade, Farben und Text beschreibt. Wenn du diesen Code vorliegen hast, kannst du ihn als .svg-Datei speichern und in einem Browser oder einem kompatiblen Designprogramm öffnen. Dieses Werkzeug erstellt aus vollständigem, unterstütztem SVG-Code eine herunterladbare Datei, ohne die Grafik zu rastern.

Warum SVG-Code als SVG-Datei speichern?

Eine eigenständige SVG-Datei lässt sich leichter auf einer Website wiederverwenden, bei einer Projektübergabe als Anhang weitergeben oder in einen Vektoreditor importieren. Unterstützte Vektorformen bleiben bearbeitbar und lassen sich ohne die Verpixelung eines Rasterbilds skalieren. Der Code wird in deinem Browser geprüft und verarbeitet. So kannst du das Ergebnis vor dem Speichern ansehen, ohne ein Konto oder KI-Credits zu benötigen.

Vom Code zur wiederverwendbaren Grafik

Behalte den Quellcode als Vektordatei für den nächsten Arbeitsschritt.

KI-generierten SVG-Code speichern

Du hast SVG-Code aus einem KI-Chat? Füge den vollständigen Code ein, prüfe die Vorschau und speichere die Datei. Die Markierungen eines einzelnen Markdown-Codeblocks werden automatisch entfernt. Ersetze Anweisungen in natürlicher Sprache oder Anwendungskomponenten zunächst durch tatsächlichen SVG-Code.

Ein Icon oder eine Grafik wiederverwenden

Speichere eigenständigen SVG-Code aus einer Icon-Bibliothek oder einem Projekt. Übernimm die benötigten Pfade und Definitionen. Hängt die Grafik von CSS-Klassen einer Website oder externen Dateien ab, ersetze diese Abhängigkeiten zuerst durch unterstützte Inline-SVG-Stile.

Eine bearbeitbare Vektordatei teilen

Gib einem Teammitglied eine benannte .svg-Datei statt einer Nachricht voller XML-Code. Öffne sie in einem kompatiblen Browser oder Designprogramm oder wechsle in den SVGBase-Arbeitsbereich, um SVGs zu bearbeiten oder mit KI zu generieren. Verfügbare Schriftarten und unterstützte Funktionen können sich je nach Anwendung unterscheiden.

Was dieses Werkzeug unterstützt

Füge ein vollständiges statisches SVG mit unterstützten Pfaden, Grundformen, Text, Farbverläufen, Beschneidungspfaden, Masken und Inline-Stilen ein. Ursprüngliche Maße und Einheiten bleiben erhalten. Skripte, Ereignishandler, Style-Blöcke, CSS-Klassen, Filter, eingebettete Bilder, Animationen, use-Elemente und externe Ressourcen werden nicht unterstützt. Sie werden gemeldet, statt stillschweigend entfernt zu werden. Grenzen: 256 KB, 1.500 Elemente, 48 Verschachtelungsebenen und 100.000 Zeichen in den Pfaddaten.

Fragen und Antworten zum Speichern von SVG-Code als Datei

Antworten zum Speichern, zur Vorschau und zur Wiederverwendung deines SVG-Codes.

Wie speichere ich SVG-Code als SVG-Datei?

Füge ein vollständiges <svg>…</svg>-Element in den Code-Editor ein. Sobald die Vorschau bereit ist, wähle einen Dateinamen und klicke auf „SVG herunterladen“. Die heruntergeladene Datei enthält den geprüften SVG-Code, keinen Screenshot der Vorschau.

Kann ich KI-generierten SVG-Code speichern?

Ja, wenn die Ausgabe vollständiger SVG-Code mit unterstützten Funktionen ist. Du kannst einen einzelnen Markdown-Codeblock mit SVG- oder XML-Code direkt einfügen. Hast du nur eine schriftliche Beschreibung des Bildes, erstelle den SVG-Code zuerst im KI-Arbeitsbereich von SVGBase.

Warum ist meine SVG-Vorschau leer?

Prüfe, ob die Grafik innerhalb der viewBox liegt, verwendbare Maße hat und alle benötigten Definitionen enthält. Weiße oder transparente Grafiken sind unter Umständen schwer zu erkennen. Probiere einen dunklen Vorschauhintergrund aus. Fehlende Stile, unsichtbare Formen oder ein leeres SVG können ebenfalls zu einer leeren Vorschau führen.

Brauche ich das vollständige SVG-Element?

Ja. Übernimm das äußere <svg>-Element, das schließende Tag und alle Definitionen, die die Grafik benötigt. Ein einzelner Pfad legt weder die Zeichenfläche noch das Koordinatensystem fest. Fehlt nur der SVG-Namensraum, ergänzt das Werkzeug ihn für die Verwendung als eigenständige Datei.

Kann ich React- oder JSX-Code einfügen?

Dieses Werkzeug akzeptiert standardmäßiges SVG-XML statt einer React-Komponente. Kopiere das gerenderte <svg>-Element oder wandle die Komponente zuerst in eigenständigen SVG-Code um. JSX-Ausdrücke, Komponenten-Wrapper, className und Präsentationsattribute in camelCase müssen vor der Verwendung umgewandelt werden.

Bleibt die heruntergeladene SVG-Datei bearbeitbar und behält sie ihre Größe?

Unterstützte Vektorformen und Text bleiben SVG-Elemente. Vorhandene Angaben zu width, height, physischen Einheiten und viewBox bleiben erhalten. Das Werkzeug zeichnet keine Rasterbilder nach und wandelt Text nicht in Pfade um. Die Textdarstellung hängt weiterhin davon ab, welche Schriftarten in der Anwendung verfügbar sind, mit der du die Datei öffnest.

Sieht die Datei genauso aus wie die Vorschau?

Vorschau und Download verwenden denselben geprüften SVG-Code. Nicht unterstützte Inhalte werden gemeldet und verhindern den Download, statt stillschweigend entfernt zu werden. Ein anderer Vorschauhintergrund fügt der Datei keinen Hintergrund hinzu. Andere Anwendungen können Schriftarten oder unterstützte SVG-Funktionen anders darstellen.

Ist das Speichern kostenlos und wird mein SVG-Code hochgeladen?

Das Speichern einer SVG-Datei ist kostenlos, erfordert kein Konto und verbraucht keine KI-Credits. Dein SVG-Code wird lokal in deinem Browser verarbeitet und für die Umwandlung nicht hochgeladen. Das Werkzeug hält seine Eingabe getrennt von Entwürfen im SVG-Hauptarbeitsbereich.

Dein SVG-Code, bereit als Datei.

Füge deinen Code ein, prüfe die Vorschau und speichere eine bearbeitbare SVG-Datei.

SVG-Datei erstellen