top of page

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


0 comments

Comments


bottom of page