Scalable Vector Graphics(SVG)

Scalable Vector Graphics(SVG) are a great solution for creating high-definition images for your website. SVG images are an XML-based file format that use code to create graphics.If you have Adobe Illustratoror CorelDRAWyou can use those applications to create an image and save it as an SVG. If you don't have one of these editors, I recommend using the open source editor Inkscapeto create your SVG. You can download it for free at http://inkscape.org/.
1.  First create a simple vector image within your graphics editor and save the file as vector.svginside of your /images/folder within the /retina/folder.
2.  Then create an HTML document called svg.htmlinside the /retina/folder. Inside the basic HTML structure, we'll embed the SVG graphic that we created in our image editor.
<object data="images/vector.svg" type="image/svg+xml"></object>
3.  Next we'll create a circle and a rectangle using SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="300" r="100" stroke="black" strokewidth="1" fill="orange" />
<rect x="300" y="200" width="200" height="200" fill="#009933" />
</svg>
4.  If you open the page within your browser you'll see the graphics we just added. Try zooming in or resizing the page to see how sharp they remain.

If you'd like to use scripting with your SVG image you can use the <embed>tag. The embed tag (<embed src="vector.svg" type="image/svg+xml" />) still works with the same set of browsers, but if you're using an HTML4 or XHTML doctypeat the beginning of your page it is invalid code. This code is allowed if you are using HTML5. More information on this topic is available at
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.