Here at inEvo.pt we have been working hard on ColaDI (site soon). This is a project that will innovate in Design Content Management and Collaboration, adding real-time collaboration and discussion, 2D and 3D retrieval and web-based content management interface.

An essential part of design collaboration is the means to draw and edit graphical content. We already built a Flash SVG editor, but on this project we wanted to go with HTML5.

As the past post on our Labs showed, we are working on a Javascript (GWT) SVG Editor. This will work directly with the SVG from the browser so it works purely over HTML5. Therefor, this can be used on Ipad, Android and most browsers – by now we have only tested it on Firefox and Chrome -.

We are presenting a short demo video  and a live demo so you can try it out. Remember that this is a work in progress so it's natural to have some bugs. Nevertheless, we wanted to show our present work here on the Labs and we are also very pleased with the results so far.

This library (pure svg editor, just SVG and JS on the browser) was built with GWT so you can add it to your GWT projects or just use it as Javascript on other frameworks. 

If you have a project that could benefit from this, please contact us.

Without further ado, here is the demo video.

Now for the Live Demo! 

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. 

Enjoy.

Also available here!