Monday, February 5, 2018

Svg vs Canvas

There are two ways to draw within Html, Svg (Scalable Vector Graphics) or using
the 'canvas' element. They are very different technologies, and come in handy under different
circumstances. Canvas was first developed by Apple (for games).

Microsoft describes the difference between the two with the notion that Svg images
are retained (in the DOM), whereas Canvas images are immediate (They do indeed need to be
redrawn at each turn of the clock). In practical terms, Svg images scale perfectly (they are vectors),
and canvas objects animate easily (with javascript). For the programmer, though, Svg needs
a new image at high magnification not to pixilate; and there are limited opportunities
on a canvas to know where the mouse is at any time.

With respect to rendering time, we get the following. On a large screen, Svg will render more
quickly. If there are a large number of objects, canvas is absolutely necessary. In short,
Svg tends to be used for professional applications, like engineering documents; canvas shows up
in learning and games. A map of a shopping mall would fall precisely in between: it is
up to the developer, his skills, and what he wants to do.


https://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx

No comments: