2D SVG Editing on Mobile Device with Raphaël

By Jeremy Tammik.

I spent some more time exploring how to display and interact with 2D graphics in a browser using SVG and JavaScript.

In my last foray into the area, I demonstrated display and interactive picking by implementing a room polygon and furniture picker in SVG.

It enables picking and identifying objects and proves that the same code and interaction is supported on all mobile devices, in particular both Android and Safari on iOS.

I now went one step further and explored 2D SVG editing on a mobile device with Raphaël, which adds interactive dragging and rotation of the polygons representing furniture or equipment, making use of the Raphaël JavaScript library.

If you would like to circumvent all explanations and just jump straight into the final result, take a look at The Building Coder SVG folder, or access the step-by-step evolution of the demo directly from here:

1. Curves
2. Grid
3. Room
4. Reporting text and click handler
5. Furniture
6. Drag
7. Rotate
8. Button

You can test each step interactively, then see how it works by viewing the source.

I hope you find this useful. Have fun, and good luck!