SVG Files: The Next Step?

Over the past few months I have heard some whispers about the impressive possibilities of the SVG file format in web design. I wouldn’t usually pay any mind, but I have noticed it in enough places that it was time for me to dig a little deeper into the qualities of the SVG that are warranting such attention. The general understanding is that the SVG is not a rasterized format like a PNG or JPEG, but rather a vector format. It uses a coded language to describe an image or shape giving the capacity for more complexity and sophistication.

Here are some examples of the advantages of the SVG

• An SVG file can be resized to any dimensions without distortion or loss of image quality.
• The file sizes are usually significantly smaller than other formats. The way that an SVG grows in size is by the amount of layers or design complexity as opposed to resolution.
• SVG files allow for many variations of dynamism via code within the file itself. This includes animation, responsiveness; just use your imagination!
• The fact that SVGs are language-based also gives the creator the ability to make the image more accessible to audiences with disabilities.

Of course there are drawbacks to every format, and SVGs are no exception. There can be some difficulty in the translation of an exported SVG from the original concept, and certain, older platforms do not support SVG files and a back-up PNG needs to be provided (calling you out IE 8!). And more detailed imagery like photographs are better off being depicted as JPEGs. However, overall I think the pro-SVG argument over the format’s flaws is promising and definitely exciting. If anything, their use will be a learning experience that will help move forward the development of dynamic file formats.