SVG-Code-Editor & -Viewer Online mit Live-Vorschau

SVG-Code-Editor, Viewer und Vorschau in einem

SVG (Scalable Vector Graphics) ist das XML-Format, das hinter den Icons, Logos und Illustrationen auf den meisten Websites steht. Phoenix Code öffnet .svg-Dateien als lesbaren, bearbeitbaren Code und rendert das Bild daneben, das sich live während der Eingabe aktualisiert.

Es funktioniert auch als SVG-Viewer. Öffnen Sie eine beliebige .svg-Datei, um zu sehen, wie sie tatsächlich aussieht, und inspizieren Sie gleichzeitig das Markup, anstatt Dateien einzeln in einen Browser-Tab zu ziehen.

Und da Phoenix Code ein echter Code-Editor ist, erhalten Sie mehr als nur ein Textfeld zum Einfügen mit Vorschau: Syntax-Hervorhebung, Projekte mit mehreren Dateien, Git-Integration und Claude Code KI-Unterstützung sind alle integriert, sodass Sie die SVGs innerhalb eines echten Website- oder App-Projekts bearbeiten können.

Alles, was Sie zum Bearbeiten von SVG-Dateien benötigen

Bearbeiten Sie Icons von Hand, passen Sie Logos an und bereinigen Sie exportierte Vektoren, ohne eine schwerfällige Design-App öffnen zu müssen.

Live-SVG-Vorschau

Sehen Sie, wie sich das gerenderte Bild während der Eingabe aktualisiert. Ändern Sie eine Füllung, passen Sie einen Pfad an oder ändern Sie die Größe der viewBox und sehen Sie das Ergebnis sofort.

Autovervollständigung für SVG-Tags und -Attribute

Code-Vorschläge für SVG-Elemente und -Attribute während der Eingabe, von path und viewBox bis hin zu Farbverläufen, Filtern und Masken.

Farbfelder & Farbauswahl

Füll- und Konturfarben werden als Inline-Farbfelder neben dem Code angezeigt. Klicken Sie auf eines, um eine Farbauswahl zu öffnen und Farben anzupassen, ohne den Editor zu verlassen.

Unübersichtlichen SVG-Code formatieren

Exportierte SVGs bestehen oft aus einer einzigen langen Zeile. Ein Klick formatiert das Markup zu sauberem, eingerücktem und lesbarem Code um. Zudem werden zusammengehörige Tags beim Bearbeiten gemeinsam umbenannt.

Claude KI-Code-Assistent

Bitten Sie die KI, einen Pfad anzupassen, ein Icon-Set neu einzufärben oder zu erklären, was ein Filter bewirkt. Verwenden Sie Ihren bestehenden Login/Schlüssel; Ihre Dateien bleiben lokal.

Echte Projekte, kein Textfeld

Öffnen Sie einen ganzen Icon-Ordner, bearbeiten Sie mehrere SVG-Dateien nebeneinander und committen Sie Änderungen mit dem integrierten Git. Funktioniert offline in der kostenlosen Desktop-App.

SVG-Dateien online öffnen & anzeigen

Müssen Sie eine SVG-Datei öffnen, die Ihnen jemand geschickt hat? Öffnen Sie sie auf phcode.dev und Sie sehen das gerenderte Bild und seinen Quellcode nebeneinander, ganz ohne Installation und ohne Konto. Es funktioniert als Online-SVG-Viewer und -Öffner.

Wenn Sie mit dem Mauszeiger über eine SVG-Referenz in Ihrem HTML oder CSS fahren, wird eine Miniaturansicht des Bildes mit seinen Abmessungen angezeigt. Dadurch finden Sie das richtige Icon in einem großen Projekt viel schneller.

SVGs online und privat bearbeiten

Es wird nichts auf einen Server hochgeladen. Egal, ob Sie den Browser-Editor oder die Desktop-App verwenden, Ihre SVG-Dateien bleiben auf Ihrem Rechner. Kein Konto, keine Anmeldung, keine Wasserzeichen.

Ein ehrlicher Hinweis: Phoenix Code ist ein Code-Editor, kein Zeichenprogramm. Wenn Sie Formen auf einer Leinwand herumziehen möchten, ist ein visueller Editor wie Inkscape besser geeignet. Wenn Sie jedoch präzise Kontrolle über das Markup wünschen, das mit Ihrem Produkt ausgeliefert wird, ist die direkte Bearbeitung des Codes genau das, worum es geht.

Wie man eine SVG-Datei öffnet und bearbeitet

Von der rohen .svg-Datei zur fertigen Bearbeitung in weniger als einer Minute.

Phoenix Code öffnen

Starten Sie den Editor sofort unter phcode.dev oder installieren Sie die kostenlose Desktop-App für Windows, macOS oder Linux.

Ihre .svg-Datei öffnen

Öffnen Sie den Ordner, der Ihre SVG-Datei enthält, oder ziehen Sie die Datei in den Editor. Sie wird als bearbeitbarer Code mit der Bildvorschau daneben geöffnet.

Bearbeiten mit Live-Vorschau

Ändern Sie Pfade, Farben, Größen oder Text und beobachten Sie, wie sich das gerenderte Bild während der Eingabe aktualisiert.

Speichern und verwenden

Speichern Sie die Datei und fügen Sie sie direkt in Ihre Webseite, App oder README ein. Das von Ihnen bearbeitete Markup ist genau das, was ausgeliefert wird.

Mehr als nur ein SVG-Editor

Phoenix Code beherrscht den gleichen Live-Vorschau-Trick auch für Markdown. Wenn Sie Dokumentationen oder READMEs schreiben, probieren Sie den kostenlosen Online-Markdown-Editor aus oder durchsuchen Sie unsere kostenlosen Entwickler-Tools nach Konvertern, Formatierern und Generatoren.

Häufig gestellte Fragen

Ja. Die Bearbeitung von SVG-Dateien mit Live-Vorschau ist in Phoenix Code vollständig kostenlos, sowohl im Browser unter phcode.dev als auch in der Desktop-App. Der Editor ist Open Source.

Öffnen Sie phcode.dev in Ihrem Browser, öffnen Sie den Ordner mit Ihrer .svg-Datei und klicken Sie darauf. Das gerenderte Bild und der bearbeitbare Quellcode werden nebeneinander angezeigt, ohne dass eine Installation oder ein Konto erforderlich ist.

Ja. Das gerenderte Bild wird während der Eingabe aktualisiert, sodass Sie einen Pfad oder eine Farbe anpassen und das Ergebnis sofort im Vorschaufenster sehen können.

Nein. Phoenix Code bearbeitet den SVG-Quellcode, anstatt eine Zeichenfläche anzubieten. Dadurch ist es ideal, um Icons zu bereinigen, Farben und Pfade anzupassen und die präzise Kontrolle über das Markup zu behalten. Für Freihand-Illustrationen eignet sich ein visuelles Werkzeug wie Inkscape besser.

Jetzt SVG bearbeiten

Ein kostenloser Open-Source-SVG-Code-Editor und -Viewer mit Live-Vorschau, in Ihrem Browser oder auf Ihrem Desktop.

Phoenix Code herunterladen SVG-Editor öffnen