My favorites ▼ | Sign in
Project Home Downloads Wiki Issues Source
Summary   People
Project Information
Members
Featured
Downloads
Links

Try the demo here

Introduction

SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser:

  • Firefox 1.5+
  • Opera 9.50+
  • Safari 4+
  • Chrome 1+
  • IE 6+ (with the Chrome Frame plugin, native IE9 support in 2.6)

This editor depends on many other open-source projects. See Acknowledgements for details.

In browsers that support the W3C File API, this editor allows you to open local files. The set of browsers in which this supported is: Firefox 3.6+, Chrome 6+, Safari 5+, and Opera 11.10+ (builds from 2011-04-05 onwards).

Demos

Try out SVG-edit 2.5.1, the latest stable release (Release notes).

A largely usable alpha build is also available (still rough around the edges, localization not updated).

For the adventurous ones, feel free to try out the trunk build (not guaranteed to be stable).

Features

SVG-edit is an online vector graphics editor that uses only JS, HTML5, CSS and SVG (i.e. no server-side functionality). SVG-edit has the following features:

  • 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)
  • Open Local Files
  • Import SVG into Drawing
  • Connector lines and Arrows
  • Plugin Architecture
  • Smoother freehand paths
  • Editing outside the canvas
  • Increased support for SVG elements
  • Add/edit Sub-paths
  • Multiple path segment selection
  • Support for foreign markup (MathML)
  • Radial Gradients
  • Configurable Options
  • Eye-dropper tool
  • Stroke linejoin and linecap
  • Export to PNG

New in 2.6 alpha (more to come for 2.6 final):

  • Support for Internet Explorer 9
  • In-group editing
  • Image library
  • Shape library
  • Context menu
  • Cut/Copy/Paste
  • Gridlines, snap to grid
  • Merge layers
  • Duplicate layer

SVG-edit works directly in the browser. There have been several side projects: A Firefox Add-on, an Opera Widget, a Google Wave Gadget (no longer maintained).

Videos / Screencasts

Examples

Development/Discussion

Please follow us on Google+.

If you have done some HTML/JS/CSS programming before, look at this list of good first bugs and submit a patch.

We have started to document the developer API here: http://svg-edit.googlecode.com/svn/trunk/docs/index.html

We have started to gather some unit tests for SVG-edit here: http://svg-edit.googlecode.com/svn/trunk/test/all_tests.html

Further Reading

Projects That Use SVG-edit

Around The Web
Powered by Google Project Hosting