image 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.

image

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.

image

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.

image

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.

image

 

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.

image

Here’s the full list of features in the current version:

  • Free-hand drawing
  • Lines, Polylines
  • Rects/Squares
  • Ellipses/Circles
  • Polygons/Curved Paths
  • Stylable Text
  • Raster Images
  • Select/move/resize/rotate
  • Undo/Redo
  • Color/Gradient picker
  • Group/ungroup
  • Align
  • Zoom
  • Layers
  • 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)
  • Arrows
  • 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?

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • essexboyracer

    Great post in bringing to the forefront a standards XML based graphics format. SVG needs pushing to the front more as it is a versatile language. I personally use Inkscape, normally when drafting/mocking website design layouts, as it is far quicker and more immediate than messing around in GIMP. As an online editor, I can think of one project that would benefit from Arbelos.

  • Thorin

    Note that “it’s” is an abbreviated form of “it is”, hence: “Adobe is quaking in it is boots”.

    The possessive form of “it” is “its”, and it doesn’t use an apostrophe.

    • http://www.laughingliondesign.net Jennifer Farley

      Well spotted Thorin, it’s now changed, thanks. I’m generally pretty good with my its and it’s but that one broke free.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.