This article is old. Be careful! It might contain outdated information. Here's an alternate resource that I am recommending for this topic.
SVG or scalable vector graphic files are the new standard for displaying icons or logos in web design.
For those of you who don't know an SVG is basically an XML file that contains coordinates for the different paths and shapes your images have.
A big advantage for using SVG's is that they display perfectly when scaling and they look exquisite on retina displays.
In today's tutorial I'm going to show you how to export you Photoshop shapes to Illustrator and then save those as SVG files.
If you don't have Photoshop or Illustrator you can also go for their FREE counterparts: GIMP and InkScape. Another option for easily creating your own SVG graphics is to use this great tool available on Google Code.