svg-edit


A complete vector graphics editor in the browser (in JavaScript)

Introduction

SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser.

All development is now taking place over on github: https://github.com/SVG-Edit/svgedit. Please send your pull requests that way

For usage questions on SVG-Edit, please ask at http://stackoverflow.com/tags/svg-edit/

If you have bug fixes, feel free to add to the issue tracker or mention on the mailing list, but a reply may not be forthcoming at this point unless someone happens to have interest and ability in the issue.

Recent news

  • 2014-04-17 (with 2014-04-22 zip addition) 2.7 and stable branches updated to reflect 2.7.1 important bug fixes for the embedded editor.
  • 2014-04-07 SVG-edit 2.7 was released (Note that Google has discontinued new project Downloads via Google Code so we had to commit the zip package into the 2.7/stable branch). Features detailed at VersionHistory.
  • 2013-11-07 community conference call (You can listen to the recording)
  • 2013-10-10 community conference call (You can listen to the recording)
  • 2013-04-09 community conference call (You can listen to the recording)
  • 2013-02-12 community conference call (You can listen to the recording)
  • 2013-01-15: SVG-edit 2.6 was released

Demos

Try out the http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html'>latest stable release (or as a download).

For the adventurous ones, please do try out the trunk build demo (This is the development code of the next version).

Videos / Screencasts

Features

SVG-edit is an online vector graphics editor that uses only JavaScript, 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/Stars
  • Stylable Text
  • Raster Images
  • Select/move/resize/rotate
  • Undo/Redo
  • Color/Gradient picker
  • Group/ungroup
  • Align
  • Zoom/pan
  • 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
  • Client-side export to PNG, JPEG, BMP, WEBP

SVG-edit works directly in the browser. There are several side projects included in the repository: A Firefox Add-on, an Opera Widget, and a Google Wave Gadget, but they have been upgraded to work with the current code and current browsers.

In browsers that support the W3C File API or via WebAppFind, 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).

Supported browsers

The following browsers had been tested for 2.6 or earlier and will probably continue to work with 2.7.

  • Firefox 1.5+
  • Opera 9.50+
  • Safari 4+
  • Chrome 1+
  • IE 6+ had been supported as of version 2.6 via Chrome Frame plugin and may still work for some features, but only IE 9+ will be supported going forward

Support the project

If you use SVG-edit, add to your Ohloh.net stacks: <wiki:gadget url="http://www.ohloh.net/p/325148/widgets/project_users.xml" height="100" border="0"/>

Further Reading

  • Projects that use SVG-edit
  • Reviews
  • How to participate
  • Frequently Asked Questions
  • Tips and Tricks
  • Roadmap
  • Governance
  • Code Refactoring
  • Version History (release notes)
  • This editor depends on many other open-source projects. See Acknowledgements for details.

Project Information

Labels:
svg editor javascript browser jquery graphics vector inkscape photoshop illustrator canvas ajax web html5