Difference between SVG and HTML5 Canvas
0 4578
SVG and canvas are both technologies that can be creating rich graphics on web browsers, but they are fundamentally different.
SVG
SVG is a vector-based graphics, and it's useful for defining graphics such as boxes, circles, text, and XML-based image format.
It is a language for describing 2D-graphics and graphical applications in XML. Most Web browsers can display SVG just like they can display PNG, GIF, and JPG.
SVG images are way better than bitmap images.
CANVAS
Canvas is an HTML5 element, which is used to draw graphics for the dynamic, scriptable rendering of 2D and 3D shapes and bitmap images on the web page.
In Canvas, we need the script to draw the graphics. It provides an empty graphic zone on which specific JavaScript APIs can draw (such as Canvas 2D or WebGL).
Difference between SVG and CANVAS
SVG | CANVAS |
SVG is an XML based vector image (composed of shapes) format | CANVAS is Raster based (composed of the pixel) format |
SVG is more flexible as we can expand it's beyond its natural | CANVAS is not flexible |
SVG does not suit for any gaming application | CANVAS is suited for gaming applications |
SVG images can be modified using JavaScript and CSS | CANVAS is can be modified using JavaScript only |
SVG generates only 2D graphics | CANVAS is generating 2D graphics as well as 3D graphics |
SVG best suited for applications with large rendering areas (for example, Google Maps) | CANVAS best suited for low for large rendering areas |
SVG doesn't depend on the resolution | CANVAS depend on the resolution |
It is capable of API animation | CANVAS is capable of API animation |
Share:
Comments
Waiting for your comments