SVG Tutorial


SVG is a W3C standard.

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

SVG is integration of HTML DOM and XSLT

Examples in Each Chapter

With our "Try it Yourself" editor, you can edit the SVG, and click on a button to view the result.

SVG Example


<h1>My first SVG</h1>

<svg width="200" height="200">
  <circle cx="60" cy="60" r="50" stroke="BLUE" stroke-width="4" fill="PINK" />

Try it yourself »

What you should already know

We are already study of following programming

  • HTML
  • Basic XML

When you are study svg read before these programme Home page.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • SVG images supports interactivity and animation.
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • Every element and every attribute in SVG files can be animated
  • SVG is a W3C standard.
  • SVG integrates with other W3C standards such as the HTML DOM and XSL

SVG Advantages

Advantages of using SVG format like JPEG and GIF are:

  • SVG is an Open Standard
  • 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
  • SVG images are zoomable (and the image can be zoomed without degradation)
  • SVG is an open standard
  • SVG files are pure XML

The main competitor to SVG is Flash.

Creating SVG Images

SVG images can be created with any text editor, but it is often more convenient to create SVG images with a drawing program, like