Gibt es textbasierte SVG-Editoren?

Es gibt mehrere gute SVG-Editoren, aber ich konnte keinen finden, in dem ich das Markup selbst bearbeiten und sofort die Änderungen im Bild sehen kann.

Wenn ein Programm das Bild nur anzeigen, aber nicht bearbeiten kann, würde es auch ausreichen, aber nur, wenn es eine geänderte Datei erneut von der Festplatte liest. Die Bildbetrachterprogramme, denen ich begegnet bin, tun dies nicht. In diesem Fall könnte ich jeden Texteditor verwenden, um das Markup zu bearbeiten, und sobald ich speichere, wären die Änderungen sichtbar, ohne das Bild schließen und erneut öffnen zu müssen.

Ich dachte, ich wäre der Einzige, der danach sucht. Nutzt du Mac oder Windows (oder Linux?)

Antworten (7)

Inkscape ist ein Open-Source-Vektorbearbeitungsprogramm, das speziell für SVG entwickelt wurde. Es enthält einen XML-Editor, mit dem Sie den Live-SVG-Code Ihres Bildes anzeigen und bearbeiten können.

Öffnen Sie den XML-Editor, indem Sie auf Bearbeiten → XML-Editor... gehen .

Geben Sie hier die Bildbeschreibung ein

Es gibt jedoch ein Problem mit Inkscape, und es tut mir leid, dass ich es in der Frage vergessen habe: Es verwendet seine eigene Struktur, wenn ich das Bild speichere. Das bedeutet, dass ich den Code nicht frei bearbeiten kann, und wenn ich eine handgefertigte Datei öffne, ändert sie sie in ihre eigene Struktur.
Ja, das ist ein fairer Punkt. Ich denke, Sie werden dieses Problem wahrscheinlich in den meisten visuellen Editoren haben, also ist Ihre beste Option wahrscheinlich, einen Viewer zu finden, der seine Ansicht automatisch aktualisiert und in einem Texteditor funktioniert.
Sie können dies auch mit Illustrator tun, mit einer minimalen Verzögerung, platzieren Sie einfach das SVG und bearbeiten Sie die Optionen zum Aktualisieren, wenn sich die Datei ändert ...

Jeder einfache Texteditor kann eine SVG-Datei bearbeiten.

Es ist lediglich XML-Text.

So wie jeder einfache Texteditor HTML bearbeiten kann.

Ziehen Sie die .svg-Datei in ein Browserfenster ... öffnen Sie die .svg-Datei in einer Textbearbeitung. Nehmen Sie Änderungen in der Textdatei vor und speichern Sie.. Aktualisieren Sie das Browserfenster.. BAM.

Verdammt ... benutze NotePad, wenn du auf einem Doze-System bist ... oder TextWrangler auf einem Mac ... Ich benutze BBEdit.

Markup bearbeiten -> Änderungen im Bild sofort sehen . Aber ja, das geht auch mit einem Browser.

Inkscape hat eine "Zurücksetzen"-Option, die es einem ermöglichen soll, Änderungen zu verwerfen, ohne die Datei zu schließen (Datei > Zurücksetzen). Man kann die Datei in Inkscape öffnen, sie im Texteditor bearbeiten und dann zur extern bearbeiteten Datei "zurückkehren". Nicht sofort, aber bei mir funktioniert es. Durch versehentliches Speichern mit Inkscape wird Ihre handgefertigte Datei zerstört, aber das können Sie verhindern, indem Sie alle Ebenen sperren, indem Sie das Attribut hinzufügen sodipodi:insensitive="true".

Die beste Option, die ich gefunden habe, ist der Atom-Texteditor mit dem SVG-Vorschaupaket ... Es funktioniert hervorragend für mich mit einem guten Texteditor und sofortiger Vorschau ... hier ist der Link:

https://atom.io/packages/svg-preview

Verwenden Sie einfach jsfiddle.net, fügen Sie die SVG-Daten (beginnend mit <svg [insert SVG code]>und endend mit </svg>) in den Abschnitt "HTML" ein und führen Sie sie aus, und sie werden gerendert. Nehmen Sie Änderungen vor und führen Sie es dann erneut aus, um die Änderungen anzuzeigen.

Dies hat natürlich keine betrügerische SVG-Syntax-Autovervollständigung, aber es formatiert die SVG-Daten mit Farben (wählen Sie auch "Tidy"), damit sie einfacher zu lesen und zu navigieren sind.

Obwohl Inkscape der am weitesten verbreitete SVG-Editor ist, mag ich die Tatsache nicht, dass er die Struktur meiner SVG ändert.

Ich denke, das beste Tool, das ich gefunden habe, ist SVG-Edit von Google Archive .

Dies ist auch Open-Source , sodass Sie Änderungen oder Funktionen vorschlagen oder es mit der Entwicklung in Ihre eigene Anwendung integrieren können.

Screenshot der Benutzeroberfläche von SVG-Edit

Achtung, diese Antwort ist täuschend einfach,

Adobe Dreamweaver mit seiner Live-Ansicht bearbeitet das XML in Echtzeit.

Tada.

Ich empfehle keine Raubkopien in irgendeiner Form, da ich für die Suite bezahle, aber es ist trotzdem ziemlich einfach, kostenlos zu werden.

BEARBEITEN,

Sie könnten Notepad++ verwenden, um das SVG in Ihrem Webbrowser zu bearbeiten und zu öffnen. Wenn Sie eine Bearbeitung abgeschlossen haben, speichern Sie die Datei und aktualisieren Sie die Seite in Ihrem Browser

Gibt es textbasierte SVG-Editoren?
AntwortenHierDatenschutz-Bestimmungen1y, 0v