Definition :
SVG stands for the scalable vector graphic and there vector graphics is something that math and it's inherently scalable.
SVG is vector-based and composed of shapes.
SVG allows you to do so is use vector graphics in your HTML and you can use these as images by simply just dropping in an SVG File.
SVG icons are lightweight and vector-based and they are highly scalable as compared to png icons.
Find below how to draw a circle :
Output :
Find below how to draw a rectangle and rounded rectangle :
Output :
Difference between SVG and Canvas :
SVG........
- SVG is vector-based and composed of shapes.
- give better performance with a smaller number of objects or a larger surface of both.
- modified through script and CSS.
- good text rendering capabilities.
- SVG has better scalability and it can be printed with high quality at any resolution.
- Not for gaming applications.
- draw the program.
- It contains vector images.
Canvas
- Canvas is raster-based and composed of pixels.
- give better performance with a larger number of objects or smaller surfaces of both.
- modified through script only.
- poor text rendering capabilities.
- poor text rendering capabilities.
- Canvas has poor scalability and it can not suitable for printing on higher resolution.
- gaming application.
- point the program.
- It contains a bitmap image.
Comparison between SVG and Canvas
SVG
- give better performance with a smaller number of objects or larger surface of both.
- good text rendering capabilities
- SVG has better scalability and it can be printed with high quality at any resolution.
Canvas
- give better performance with a larger number of objects or smaller surfaces of both.
- poor text rendering capabilities.
- Canvas has poor scalability and hence it can not suitable for printing on higher resolution.
