WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 SVG


What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the web
  • SVG uses XML to define graphics
  • The graphics quality of SVG images will not be lost if they are enlarged or resized.
  • SVG is the standard of the World Wide Web Consortium

SVG advantages

Compared to other image formats (such as JPEG and GIF), the advantages of using SVG are:

  • SVG images can be created and modified with a text editor
  • SVG images can be searched, indexed, scripted, or compressed
  • SVG is scalable
  • SVG images can be printed with high quality at any resolution
  • SVG can be enlarged without degrading the image quality

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support inline SVG.

Element
<svg> 4.0 9.0 3.0 3.2 10.1

SVG Circle

Example

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Try it Yourself »

SVG Rectangle



Example


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Try it Yourself »

SVG Rounded Rectangle

Apologies, your program does not bolster inline SVG.

Example


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

Try it Yourself »

SVG Star

Apologies, your program does not bolster inline SVG.

Example


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

Try it Yourself »

SVG Logo

SVG Apologies, your program does not bolster inline SVG.

Example


<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" textual style size="45" textual style family="Verdana" x="50" y="86">SVG</text>
  Sorry, your program does not support inline SVG.
</svg>

Try it Yourself »

SVG is a language for describing 2D graphics using XML.

Canvas uses JavaScript to draw 2D graphics.

SVG is XML-based, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, every graphic that is drawn is considered an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.

Canvas is rendered pixel by pixel. In a canvas, once a graphic is drawn, it does not continue to get the browser's attention. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the graphics.



Comparison of Canvas and SVG

The following table lists some differences between canvas and SVG.

Canvas SVG
  • Depending on resolution
  • Event handlers are not supported
  • Weak text rendering capabilities
  • Ability to save resulting images in .png or .jpg format
  • Best for image-intensive games, many of which are frequently redrawn
  • Independent of resolution
  • Support event handlers
  • Best for applications with large rendering areas (like Google Maps)
  • High complexity slows down rendering (any application that overuses the DOM is not fast)
  • Not suitable for gaming applications