8

There are several good SVG editors around, but I couldn't find one where I can edit the markup itself, and instantly see the changes in the image.

If a program is only able to view the image, but not edit it, it would also be sufficient but only if it re-reads a modified file from disk. The image viewer programs I encountered don't do this. In this case I could use any text editor to edit the markup, and as soon as I save, the changes would be visible without needing to close and re-open the image.

1
  • I thought I was the only one looking for this. Are you on Mac or Windows (or Linux?)
    – Manngo
    Jul 6, 2022 at 4:35

10 Answers 10

5

Inkscape is an open source vector editing program specifically built around SVG. It includes an XML editor which allows you to view and edit the live SVG code of your image.

Open the XML Editor by going to Edit → XML Editor....

enter image description here

3
  • 1
    There is one problem with Inkscape though, and sorry for forgetting to mention it in the question: it uses its own structure when I save the image. This means it doesn't let me to edit the code freely, and if I open a hand-crafted file it changes it to its own structure.
    – vsz
    Sep 2, 2016 at 12:00
  • Yeh thats a fair point. I think you're likely to have that issue in most visual editors, so your best option is probably to find a viewer that will auto update its view and work in a text editor.
    – Cai
    Sep 2, 2016 at 12:23
  • You can also do this with illustrator, with a minimal delay, just place the svg and edit the options to update when file changes...
    – joojaa
    Mar 11, 2017 at 20:21
3

Any plain text editor can edit an svg file.

It's merely XML text.

Just like any plain text editor can edit HTML.

Drag the .svg file to a browser window... open the .svg file in a text edit. Make changes in the text file and save.. refresh the browser window.. BAM.

Heck.. use NotePad if you are on a 'Doze system.. or TextWrangler on a Mac... I use BBEdit.

1
  • 1
    edit markup -> instantly see changes in image. But yeah you can do that too with a browser.
    – joojaa
    Mar 11, 2017 at 22:03
3

Inkscape has a "revert" option, which is intended to allow one to discard changes without closing the file (File > Revert). One can open the file in Inkscape, edit it in the text editor, and then "revert" to the externally edited file. Not instantaneous, but it works for me. Inadvertent saving using Inkscape will destroy your hand-crafted file, but that be prevented by locking all the layers by adding the attribute sodipodi:insensitive="true".

2

The best option that I did find is Atom text editor with the SVG preview package... It works great for me with a good text editor and instant preview... here is the link:

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

0
1

Just use jsfiddle.net, put the SVG data (starting with <svg [insert SVG code]> and ending with </svg>) into the "HTML" section, and run it and it will render it. Make changes, then run it again to view changes.

This doesn't have cheater SVG-syntax autocomplete of course, but it will format the SVG data with colors (also select "Tidy") so it's easier to read and navigate.

1

Although Inkscape the most widely accepted SVG editor, I don't like the fact that it changes the structure of my SVG.

I think the best tool I found is SVG-Edit from Google Archive.

This is also open-source, so you can suggest changes, features or integrate it with your own application with development.

Screenshot of SVG-Edit UI

0

Beware, This answer is deceptively simple,

Adobe Dreamweaver with its live view will edit the XML in realtime.

Tada.

I don't recommend pirating in any shape or form as I pay for the suite, but it's pretty easy to get free all the same.

EDIT,

you could use notepad++ to edit and open the svg in your Web browser. when finishing an edit, save the file and refresh the page in your browser

0

I think https://editsvgcode.com/ might be the closest to what OP described. It's text-based and auto-updates the preview when you edit the code.

2
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Sebastiano
    May 17, 2023 at 8:04
  • @Sebastiano Well, it's a web-based editor. not a downloadable program, so if the link ceases to work, then the answer would be invalid regardless of how much context I provide.
    – kk-
    Dec 11, 2023 at 3:00
0

Might also try SVG Path Editor

0

Boxy SVG is my favorite SVG editor that prioritizes text alongside a GUI for manipulating SVGs. It's also web based which is super handy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.