PDA

View Full Version : Give some of the difference between SVG & <Canvas>?



spobitsseo
07-31-2017, 01:43 AM
Give some of the difference between SVG & <Canvas>?

dennis123
07-31-2017, 02:19 AM
<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors. Essentially, <Canvas> is to SVG as Photoshop is to Illustrator.

mvminfotechseo
11-28-2017, 05:36 AM
Canvas

Pixel based (Dynamic .png)
Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
Modified through script only
Event model/user interaction is granular (x,y)
Performance is better with smaller surface, a larger number of objects (>10k), or both

SVG

Shape based
Multiple graphical elements, which become part of the DOM
Modified through script and CSS
Event model/user interaction is abstracted (rect, path)
Performance is better with smaller number of objects (<10k), a larger surface, or both