SVG Tutorial on SVG Overview
Back to Course

what is svg?

  • svg, scalable vector graphics is an xml based language to define vector based graphics.

  • svg is intended to display images over the web.

  • being vector images, svg image never loses quality no matter how they are zoomed out or resized.

  • svg images supports interactivity and animation.

  • svg is a w3c standard.

  • others image formats like raster images can also be clubbed with svg images.

  • svg integrates well with xslt and dom of html.

advantages

  • use any text editor to create and edit svg images.

  • being xml based, svg images are searchable, indexable and can be scripted and compressed.

  • svg images are highly scalable as they never loses quality no matter how they are zoomed out or resized

  • good printing quality at any resolution

  • svg is an open standard

disadvantages

  • being text format size is larger then compared to binary formatted raster images.

  • size can be big even for small image.

example

following xml snippet can be used to draw a circle in web browser.

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

embed the svg xml directly in an html page.

testsvg.htm

<html>
   <title>svg image</title>
   <body>
   
      <h1>sample svg image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

output

open textsvg.htm in chrome web browser. you can use chrome/firefox/opera to view svg image directly without any plugin. in internet explorer, activex controls are required to view svg images.

how svg integrates with html

  • <svg> element indicates the start of svg image.

  • <svg> element's width and height attributes defines the height and width of the svg image.

  • in above example, we've used a <circle> element to draw a circle.

  • cx and cy attribute represents center of the circle. default value is (0,0). r attribute represents radius of circle.

  • other attributes stroke and stroke-width controls the outlining of the circle.

  • fill attribute defines the fill color of the circle.

  • closing</svg> tag indicates the end of svg image.