SVG vs Canvas, to use graphic based application

Question

Hi I am trying develop a graphic based application with drag and drop.

I have attached images of my application. https://drive.google.com/file/d/0By4i7m97t_5pNFRTaTQ4YmE2YlU/view?usp=sharing

These are the actions I wanted to use in my application https://drive.google.com/file/d/0By4i7m97t_5pX1RGUUFWMk9rNEU/view?usp=sharing

Each and every actions(like drag and drop), I needed a service call and redraw the layout based on the response.

Currently I have used html elements like div and span. But it is very heavy weighted, and feeling lagging while using drag and drop or some other action. I am thinking to convert to svg or Canvas.

Which is better to use this scenario. I should very flexible to use(without lagging). It should be light weight.

also I needed to use angular for services.

Answer 1

Although this has been asked a lot of times before,

For interactive drawing apps (where you can pick-up the shapes etc) it's best to use SVG.

• They are manipulatable, by nature of their design - SVG elements are regular DOM elements thus you can easily attach click handlers on them, transform their positions etc.
• Redraw operations are efficiently handled by the browser so they are faster when many items are involved

Canvas on the other hand uses a fire-and-forget type of drawing mode - You are simply drawing pixels, not objects on a canvas and there is no memory of the objects/elements you've drawn unless you built this functionality/structure yourself in your app (which would be a huge overkill) - It knows that pixel has been drawn at a position but it does not hold any representation of the object itself (e.g a square/line etc)

You can use any of the Canvas libraries (Paper.js, Fabric.js etc) which emulate an SVG-like retained-drawing mode on a Canvas as well, but from my experience they tend to be slow in the long-run since they naively redraw the whole scene when something has changed.