SVG Editor

May 2011 | By


Video Play Button
Shows a live demo of's new SVG editor. It works using only HTML5 (js and svg) so it can be used in any platform, even mobile (iPad, Android). The demo also has a shape recognizer and SVG import. The SVG editor component can be used to any sketch site, web-to-print solution, etc. Just some information first of what it can do for now: - Enables some primitive creation like freehand drawing, rectangles and circle. - Has a shape recognition engine so by hand drawing shapes it will recognize and change your paths to triangles, rectangles, circles, ellipses, lines, diamonds, etc.. You can turn off this feature using the check box. - Elements selection, move, rotate, scale. Press Control to multiselect elements. Also group, ungroup, send back, bring forwards and delete elements. - Camera panning, zooming and rotation. Press Control to zoom and Shift to rotate as an alternative to the radio buttons. - Style options: fill color and opacity, stroke color, opacity and width; - You can copy-paste some SVG to the text area and press “Import SVG” to add it to the scene. - Real-time SVG update on the text area as you edit the scene. Please, turn it off using the Check Box as this will slow down edition operations. If you notice some bugs, please let us know.