What is SVG?

  • SVG represents Scalable Vector Graphics
  • SVG is utilized to characterize designs for the Web
  • SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> component (presented in HTML5) is a holder for SVG graphics.

SVG has a few techniques for illustration ways, boxes, circles, content, and realistic images.

Browser Support

The numbers in the table determine the principal program form that completely bolsters the <svg> element.

<svg> 4.0 9.0 3.0 3.2 10.1

SVG Circle


<!DOCTYPE html>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>

Try it Yourself »

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)" />

Try it Yourself »

SVG Rounded Rectangle

Apologies, your program does not bolster inline SVG.


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"

Try it Yourself »

SVG Star

Apologies, your program does not bolster inline SVG.


<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;" />

Try it Yourself »

SVG Logo

SVG Apologies, your program does not bolster inline SVG.


<svg height="130" width="500">
    <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"/>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
  <text fill="#ffffff" textual style size="45" textual style family="Verdana" x="50" y="86">SVG</text>
  Sorry, your program does not support inline SVG.

Try it Yourself »

Differences Between SVG and Canvas

SVG is a language for depicting 2D designs in XML.

Canvas draws 2D illustrations, on the fly (with a JavaScript).

SVG is XML based, which implies that each component is accessible inside the SVG DOM. You can join JavaScript occasion handlers for an element.

In SVG, each drawn shape is recognized as an article. In the event that properties of a SVG object are changed, the program can consequently re-render the shape.

Canvas is rendered pixel by pixel. In canvas, when the realistic is drawn, it is overlooked by the program. On the off chance that its position ought to be changed, the whole scene should be redrawn, including any objects that may have been secured by the graphic.

Comparison of Canvas and SVG

The table underneath demonstrates some critical contrasts among Canvas and SVG:

Canvas SVG
  • Resolution dependent
  • No support for occasion handlers
  • Poor content rendering capabilities
  • You can spare the subsequent picture as .png or .jpg
  • Well appropriate for realistic escalated games
  • Resolution independent
  • Support for occasion handlers
  • Best appropriate for applications with expansive rendering regions (Google Maps)
  • Slow rendering if complex (anything that utilizes the DOM a great deal will be slow)
  • Not appropriate for diversion applications