SVG-edit

logo

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 () {
                        ...
                },

                mouseUp (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

Thank you!

Questions?