SVG Editor
May 26, 2011From the Author:
Shows a live demo of inEvo.pt'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.
Technology:
gwt,html5,svg,javascript
Comments
It doesn't recognise touch gestures i.e experiment won't work with a tablet
Reply to this commentIt doesn't recognise touch gestures i.e experiment won't work with atablet
Reply to this commenthai
Reply to this commentso this is basically MS paint, right?
Reply to this commenthttp://svg-edit.googlecode.com/ is way more feature complete. I like your shape recognition system.
Reply to this commentControl + Click is impossible on a mac. It would be nice to use Command instead.
Reply to this commentNo it isn't, but right click should do the same.
Reply to this commentWow very nice gesture recogniser there... The opacity is very buggy, though.
Reply to this comment