What is SVG?
- SVG stands for Scalable Vector Graphics.
- It basically defines vector-based graphics in XML format.
- SVG graphics do NOT lose any quality if they are zoomed or resized.
- Every element and every attribute in SVG files can be animated.
What are the advantages of SVG?
Advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images can be created and edited with any text editor.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images are scalable.
- SVG images can be printed with high quality at any resolution.
Differences between HTML SVG and HTML Canvas
- If attributes of an SVG object are changed, the browser can automatically re-render the shape whereas Canvas is rendered pixel by pixel.In canvas, once the graphic is drawn, it is forgotten by the browser.
- SVG is resolution independent whereas CANVAS is resolution-dependent.
- SVG supports event handlers whereas CANVAS doesn’t have support for event handlers.
Drawing A SVG Circle in HTML
Drawing A SVG Rectangle in HTML
Drawing A SVG Rounded Rectangle in HTML
Drawing A SVG Star in HTML
Drawing A Logo in HTML using SVG
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.0
- Opera 10.1
- Safari 3.2
Attention reader! Don’t stop learning now. Get hold of all the important Competitive Programming concepts with the Web Design for Beginners | HTML course.