Give some of the difference between SVG & <Canvas>?
Give some of the difference between SVG & <Canvas>?
<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.
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
|
Bookmarks