SVG - Overview

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.

Advertisements