SVG-edit is a free web-based scalable vector graphics (SVG) editor. The editor is available in a stable version 2.4 called Arbelos, with a newer version 2.5 called Bicorn waiting in the wings. For the purposes of this post though, I was using version 2.4.
SVG is an open, industry-standard XML-based format for vector graphics developed by the W3C. Its acceptance is growing fast. Most vector editors these days can import and export SVG, and modern browsers (such as Firefox and Opera) can display it directly without requiring any plugins. If you’re a die-hard Internet Explorer user, note that SVG-edit only works if you have installed the Google Chrome Frame plugin.
When it comes to the drawing tools, this editor obviously won’t match up to Illustrator (nor is it trying to) but it still provides useful tools and many of the features that you would expect from a vector graphics editor including free-hand drawing, shapes, color and gradient picker. Drawing is easy, as is moving and transforming objects. You can change fill and stroke color and opacity and stroke thickness.
The menu and toolbar icons are a little clunky to look at but they do what they’re supposed to do.
Likewise the Layers “palette” is a simple box which you pull out from the side of the screen. It looks a little lonely when you’re used to other programs which fill half your screen with palettes, but again it does what it says on the tin and you can easily add, delete, rename and change the stacking order of layers.
When it comes to typography, the tools available will seem pretty basic if you’re used to using a more advanced editor. Font face choices are limited to categories, namely Serif, Sans-Serif, Cursive, Fantasy and Monospace and styles are limited to Bold and Italic. You can set whatever size you like.
While drawing shapes are easy, I found changing the anchor points on objects a little bit tricky and not particularly intuitive. I think this is the area that needs most work to make it more user-friendly.
Here’s the full list of features in the current version:
- Free-hand drawing
- Lines, Polylines
- Polygons/Curved Paths
- Stylable Text
- Raster Images
- Color/Gradient picker
- Convert Shapes to Path
- Wireframe Mode
- Save drawing to SVG
- Linear Gradient Picking
- View and Edit SVG Source
- UI Localization
- Resizable Canvas
- Change Background
- Draggable Dialogs
- Resizable UI (SVG icons)
Version 2.5 which is coming soon, will have the following additional features.
- Main Menu
- Open Local Files (Firefox 3.6 only)
- Plugin Architecture
- Smoother freehand paths
- Increased support for SVG elements
Files can be saved as SVG which can be viewed in several browsers and opened in graphics editors which support the format.
At this stage, I don’t think Adobe will be quaking in its boots, but there appears to be a dedicated team working to improve and bring this editor forward. It does need a bit of tweaking but it would be nice to see it improve with each version. You can read more about it here and download a Firefox plugin here.
Have you used SVG Edit? What did you think of it? Have you used any other good free vector editors?
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns