# SVG-edit

## Pavol Rusnák

### SVG Open 2010, Paris

## SVG-edit is ...

- a web-based, JavaScript-driven SVG editor that works in any modern browser
- not a full replacement for Inkscape (yet :-P)
- licensed under very liberal open source license (Apache License 2.0)
- platform for other projects which need to edit SVG documents
- pushing browsers to find their limits
- always up-to-date

## History: 1.0 (13th Feb 2009)

- draw path, line, freehand-circle, rectangle
- clear drawn image
- delete element
- save image
- → Narendra Sisodiya

_

## History: 2.0 (3rd June 2009)

- draw ellipse, square
- change line style (stroke-dasharray)
- rearranged whole code to utilize OOP
- GUI enhancement
- → Pavol Rusnák

_

## History: 2.1 (17th June 2009)

- tooltips added to all UI elements
- edit of fill opacity, stroke opacity, group opacity
- selection of elements
- move/drag of elements
- save SVG file to separate tab
- create and edit text elements
- contextual panel of tools
- change rect radius, font-family, font-size
- keystroke handling
- → Jeff Schiller

_

## History: 2.2 (8th July 2009)

- multiselect mode
- undo/redo actions
- resize elements
- contextual tools for rect, circle, ellipse, line, text elements
- some updated button images
- stretched the UI to fit the browser window
- resizing of the SVG canvas

_

## History: 2.3 (8th Sept 2009)

- align objects
- rotate objects
- clone objects
- select next/prev object
- edit SVG source
- gradient picking
- polygon mode
- → Alexis Deveria

_

## History: 2.4 Arbelos (11th Jan 2010)

- include raster images
- select non-adjacent elements
- group/ungroup
- zoom
- layers
- curve segments in paths
- UI localization
- wireframe mode
- change background
- convert shapes to path

_

## History: 2.5 Bicorn (15th June 2010)

- open local files (Firefox 3.6+, Chrome 6+ only)
- import SVG into drawing (Firefox 3.6+, Chrome 6+ only)
- connector lines and arrows
- 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
- eye-dropper tool
- stroke linejoin and linecap
- export to PNG

_

## Plugin Architecture

    svgEditor.addExtension("Hello World", function() {

            return {
                    svgicons: "extensions/helloworld-icon.xml",
                    buttons: [{...}],
                    mouseDown: function() {
                            ...
                    },

                    mouseUp: function(opts) {
                            ...
                    }
            };
    });

## Features in progress (for 2.6 Cycloid)

- IE9 support
- context menus
- path clipping
- support for <a> element
- advanced gradient editor (more stops, elliptic fills)
- shape library tool
- linking off to clipart/image library sites

_

## Projects based on SVG-edit

- Firefox add-on
- Opera widget
- Google Wave gadget
- Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)
- Cloud Canvas
- Eduvid
- Sesame

## Resources

- http://svg-edit.googlecode.com/ (demos, downloads, source, wiki, issue tracker)
- #svg-edit on irc.freenode.net
- http://groups.google.com/group/svg-edit
- http://en.wikipedia.org/wiki/SVG-edit

## Thank you!

### Questions?