Choosing the right technology (SVG vs Canvas)

Question

I am writing an application for manipulating forms, so that after creating simple shapes, the user can create more complex ones by trimming the shapes against each other (i.e., combining two circles together with figure 8 stored using one path, not a group or intersecting two circles to create a bite mark), and I'm trying to decide to use a graphics library.

SVG seems to handle 80% of the functionality that I need out of the box (form storage, movement, rotation, scaling). The problem is that the other 20% (using cropping to create a new set of complex polygons) is apparently impossible to achieve without recreating the SVG functionality in my own modules (I would need to save the form once for drawing inside the SVG and one times for clipping processing). I could be wrong in SVG, but reading about the Raphael library (based on SVG), it seems that it only handles cropping using a rectangle, and even this clipping is temporary (it only displays part of the shape, but retains the entire shape for retransmission, when the rectangle being moved moves). Perhaps I just got confused in the SVG standard, but even searching / analyzing paths to calculate a new path using a subset of the previous paths seems not obvious in SVG (there is a Subpath () function, but I don’t see anything in finding the intersection points of two polygon perimeters or merging several subfolders in one way).

As a result, Canvas seems to be a better alternative, as it does not introduce additional overhead by tracking the forms that I already have to track in order to do my own cropping work. Not only that, I have already implemented a polygon class that can be moved, rotated and scaled. However, Canvas has some other problems (I would have to implement my own redraw method, which I’m sure would not be as effective as SVG, which takes advantage of browsers in Chrome and Firefox, and I would have to accept IE incompatibility, processed free of charge with libraries like Raphael).

thanks

Answer 1

This may relate to what you mention.

Cropping can be performed using non-rectangular objects using the clipPath element.

For example, I have an element with the identifier 'clipper', which determines what to clip, and the path to be cropped. Not sure if they intersect in this fragment.

<g clip-rule="nonzero"> <clipPath id="clipper"> <ellipse rx="70" ry="95" clip-rule="evenodd"/> </clipPath> <!-- stuff to be clipped --> <path clip-path="url(#clipper)" d="M-100 0 a100 50"/> </g> 

This is just a fragment of what I have. Hope this helps.

Answer 2

It seems to me that you are trying to make 2D structural geometry. Since SVG works in saved mode, the objects you draw are saved, and then various operations are performed. With Canvas, you work with a bitmap, so changes are made immediately. Because your users, in turn, will do more operations on your simpler forms to create more complex forms, Canvas should be better in the long run.

The only incomprehensible question is what will be done with these objects when your users are finished with them. If you zoom in, it will have teeth. SVG will avoid this problem, but you compromise with more complexity and performance.

Answer 3

Both svg and canvas are vector graphics technology. Each of them has several different functionalities.

Canvas

Canvas is a bitmap with a direct modegraphics application programming interface (API) for drawing on it. Canvas is a “fire and oblivion” model that displays its graphics directly on its raster image, and then does not make sense of the figures that were drawn; only the resulting raster map stays around.

Additional canvas information - http://www.queryhome.com/51054/about-html5-canvas

Svg

SVG is used to describe scalable vector graphics.

SVG is known as a graphical model with a saved mode, stored in the memory model. Like HTML, SVG creates an object model for elements, attributes, and styles. When an element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

Additional information about SVG - http://www.queryhome.com/50869/about-svg-part-1

For more details see here about canvas vs svg - svg vs canvas comparison

Answer 4

You are right - you will have to mathematically perform clipping and creating new forms regardless of whether you use SVG or Canvas. I'm biased, it seems like it would be more useful to use SVG, since you also get things like DOM events on shapes (mouse, drag and drop) and serialization in graphic format for free.