1

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.

3

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

  • 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 '16 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 '16 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 '17 at 20:21
1

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.

  • edit markup -> instantly see changes in image. But yeah you can do that too with a browser. – joojaa Mar 11 '17 at 22:03
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.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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