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
  • licensed under 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: version 1.0 (13th Feb 2009)

  • draw path, line, freehand-circle, rectangle
  • clear drawn image
  • delete element
  • save image

_

History: version 2.0 (3rd June 2009)

  • draw ellipse, square
  • change stroke-dasharray (line style)
  • rearranged whole code to OOP
  • GUI enhancement

_

History: version 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

_

History: version 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: version 2.3 (8th Sept 2009)

  • Align Objects
  • Rotate Objects
  • Clone Objects
  • Select Next/Prev Object
  • Edit SVG Source
  • Gradient picking
  • Polygon Mode

_

History: version 2.4 (11th Jan 2010)

  • 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: version 2.5 (15th June 2010)

  • Open Local Files (Fx 3.6+, Chrome 6+ only)
  • Import SVG into Drawing (Fx 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 being implemented right now

  • IE9 support
  • Linking off to clipart/image library sites
  • Context menus

Demo

stable

trunk

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?