HTML SVG Graphics

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

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 width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

SVG rectangle

				
					<svg width="400" height="100">
  <rect width="400" height="100" 
  style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>

SVG Rounded Rectangle

				
					<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

SVG Star

				
					<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>

SVG Log

				
					<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"
      style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%"
      style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana"
  x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

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
It is dependent on resolution-dependent. No support is provided for event handlers. The resulting image is saved as .png or .jpg It is suited for graphic-intensive games.	It is Resolution independent. Support for the event is given. Slow rendering. It is not suitable for game applications.