Working with SVG

SVG stands for Scalable Vector Graphics, it defines graphics in XML format which can be rendered in browser.

Copy the following codes into Notepad and save the file as “Circle.svg”. 

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg width=”100%” height=”100%” version=”1.1″ xmlns=”http://www.w3.org/2000/svg”>

<circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red”/>

</svg>

Open this file in your browser, and you can see a circle drawn in your browser.

Note: Firefox 1.5+, Opera 9+, and Google Chrome supports SVG format by default. If you are using any other browser like IE you need to install SVG Viewer which you can download free form adobe from here.

The main advantages of using SVG format over  other graphic formats like JPEG or GIF are…

• SVG files can be read and modified by a large range of tools (e.g. notepad).
• SVG files are smaller and more compressible than JPEG and GIF images.

For more details and advance topics / Information about SVG, please check the following links…

http://www.adobe.com/svg/

http://www.w3schools.com/svg/default.asp