SVG Online Editors

By mbystedt on May 8, 2019, 10:14:03 PM

As I was updating the SVG Tutorial, I came across two web-based SVG editors: SVG-edit and Method Draw. Both only use JavaScript, HTML5, CSS and SVG. They both seem like decent shape editors but neither supports scripting.


SVG-edit is a feature-rich editor now on version 2.5.1. It was initially released in 2009. It pretty much has everything and the kitchen sink. The import functionality worked with the image that I tried but it was not perfect.

Once you are done, you can save the source or export to a png file. SVG-edit's user interface is best described as a bit of a mess. There are good tooltips if you hover but there's some icons that are unclear and other parts are oddly labeled. Copy does not normally mean duplicate for example.


Method Draw

Method Draw is fork of SVG-edit that claims to offer a better user experience. It did indeed feel a bit slicker and less awkward. It drops the "ribbon" interface for a far easier to understand traditional menu interface. Some of its features like the shape library will also be added to v2.6 of SVG-edit.