HTML Tutorial
Menu
HTML Forms
Menu
HTML Graphics
Menu
HTML Media
Menu
HTML API
Menu
HTML SVG Graphics
SVG specifies graphics in XML format that are vector-based.
What is SVG?
SVG full-form is Scalable Vector Graphics and defines graphics for the Web.
The HTML <svg> Element
The HTML <svg> element acts as a container for SVG graphics.
SVG provides methods for drawing paths, boxes, circles, text, and graphic images.
SVG Circle
SVG rectangle
SVG Rounded Rectangle
SVG Star
SVG Log
Differences Between SVG and Canvas
- SVG is a language that is used to describe 2D graphics in XML.
- Canvas is used for drawing 2D graphics, on the fly.
- SVG is based on XML, which refers to every element available inside the SVG DOM. JavaScript can be attached to event handlers for an element.
- In SVG, each drawn shape is identified as an object. Changing the attributes of the SVG object, re-render the shape automatically by the browser.
- Canvas is rendered pixel by pixel. In canvas, after the graphic is drawn, it is no longer remembered by the browser. If you want the position to be changed, the entire scene needs to be redrawn, involving any objects that can be covered by the graphic.
Comparison of Canvas and SVG
Below are some important differences between Canvas and SVG:
Canvas | SVG |
|
|