SVG (Scalable Vector Graphics) is a file format, like JPEG or PNG, that is supported by all major modern browsers.
When dealing with multiple screen sizes and resolutions, the SVG format has advantages over other file formats (like JPEG) because it is not a raster format, and can scale up or down without losing crisp edges. A raster format uses pixels, while vector formats use sequences of lines.
SVG is a text-based (XML) format that allows the contents of the file itself to be indexed or searched. This may provide future advantages over other formats that only allow for image titles and ALT tags. Think better search engine indexing and accessibility. In 2010, Google started indexing SVG files. This is primarily observed in Google Image Search.
If you are familiar with programs like Adobe Illustrator, you’ll be happy to learn that the SVG format supports elements like alpha channel masks and clipping paths.
To use the SVG format, simply save your artwork as SVG in a program like Illustrator. In HTML5 you can embed any SVG element into a webpage. Depending on your audience, you might need to include a fall-back to support older browsers.
