What is the Difference Between Canvas and SVG in HTML

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:

1. Width

2. Height

3. ViewBox

4. Version

5. X

6. Y

7. BaseProfile

8. ContentScriptType

9. ContentStyleType

10. 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:

1. Width

2. 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

www.thetechplatform.com