SVG-Edit Online Vector Graphics Editor

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

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