What are SVG files?
--
Unpacking the usefulness of SVG files for web development
Images come in multiple different file types. You might have heard of .png, .jpg, and .jpeg to name a few. While each of these image types are slightly different, they function more or less the same. In this article, we wanted to explore a type of image format, .svg, that is very useful for web development.
Advantages
SVG stands for Scalable Vector Graphics. This file type is different from other types of imaging file types in that it is a vector file that stores images via mathematical formulas based on points and lines on a grid compared to pixel based files like jpeg. The main advantage that comes with using an SVG file is that the image can resized without a loss of quality. Compare this to a pixel based image file that appears grainy or loses resolution when resized to much.
SVG files also come with the significant advantage of being able to be indexed by search engines. This is because SVG files are written in the Extensible Markup Language (XML). While we will defer going into the details about XML in this article, the main thing to understand is that XML is a text based way to transmit data. Because of the text based nature of XML that underpins SVG images, search engines like Google or Bing are able to crawl the SVG images and index them (make them searchable on the web). In the web development space, where search engine optimization is the name of the game, this is a very useful advantage.
Disadvantages
There are a couple major disadvantages that come with SVGs. The first disadvantage is that SVGs are unable to display very high quality well. For these types of images it is advised to use a pixel based file format such as .jpeg. The second disadvantage is that SVGs are relatively new and as such are not always supported in older browsers such as Internet Explorer 8. Be sure to keep these in mind when determining whether to use an SVG file or not.
How to use
Now that we have talked about the advantages and disadvantages of using a SVG file, we need to discuss how to use them. SVG images saved to a file will have the .svg file extension. You can open these files in your browser (i.e. Chrome, Safari, Firefox) to see the image.
