Scalable Vector Graphics (SVG) is a text based file that describes images in a vector format. Vector images are infinitely scalable. SVG is an open specification that is getting wider support. The Inkscape open source graphics program reads and writes SVG as its native format.
All major web browsers support displaying SVG to some extent, except Internet Explorer (IE). This has slowed the use of SVG on web pages, since IE is a very popular browser.
The above image is an SVG. It is viewable in most browsers including IE and the iPad. In IE since you are using Flash to view it, you can right click and choose zoom to see how scalable this is.
In order to use SVG in a webpage, follow these steps:
- Download the svgweb packageand unzip it to a web accessible directory on your server.
<head> <script src="svg.js" data-path="."></script> </head>
- Use the following syntax to place the SVG image file MY.svg within your webpage:
<!--[if !IE]>--> <object data="MY.svg" type="image/svg+xml" width="500" height="500" id="mySVG"> <!--<![endif]--> <!--[if lt IE 9]> <object src="MY.svg" classid="image/svg+xml" width="500" height="500" id="mySVG"> <![endif]--> <!--[if gte IE 9]> <object data="MY.svg" type="image/svg+xml" width="500" height="500" id="mySVG"> <![endif]--> <img src="SVG_alternative_image.png" /> </object>
Detailed instructions for more in depth understanding and use can be found in the svgweb package user instructions.