SVG (Scalable Vector Graphics)
The SVG element is a container that defines new co-ordinates and viewpoint. It is used to define the graphics for the web. With <svg> we can draw Paths, Boxes, Circles, Rectangle, Text and Images.
There are Basically 10 attributes of SVG:
Width
Height
ViewBox
Version
X
Y
BaseProfile
ContentScriptType
ContentStyleType
PreserveAspectratio
Canvas
The HTML Canvas is used to draw the graphics using JavaScript. It is used to draw graphs, Images or simple animations.
There are two attributes in Canvas:
Width
Height
Difference Between SVG and Canvas
SVG Canvas
1. Vector Based (Shapes ) Raster Based (Pixels)
2. It has Better Scalability. It can Print It has Poor Scalability. It is not suitable for high
high quality image in any resolution quality images.
3. Better performance with smaller surface Better performance with small surface or
or larger surface large objects.
4. Not Suited for Game Applications Suited for graphic intensive games
5. It Supports event handlers Does not supports event handlers.
Resources: Wikipedia,
Sofia Sondh
The Tech Platform