There are many people who are still unaware of the great things that come from Scalable Vector Graphics (SVG) files. If you’re one of them – check out our explanation below. It can get a little
This XML-based image format is designed for two-dimensional graphics and is supported in all browsers except IE 9 and lower and old Android (V3). Unlike traditional image formats like PNG or JPG, SVG easily scales from small to big and doesn’t lose a pinch of quality, mostly because of the Vector (the “V” part in their name) which describes the series of paths, shapes and more that are created using connect points platted of x-y axes.
And if this seems too complicated for you to understand… Below, we are listing the best reasons to use SVG files in simple words.
We all know that ‘retina’ displays, screen sizes, resolutions or zoom levels don’t matter – mainly because of the fact that a simple image is seen on millions of computers around the world. What really matters here is the quality. SVG is a vector-based format which allows paths, shapes and fills, resulting in infinite resolution. Just like creating an artwork for print and using shapes, the same principles apply to SVGs – without the restriction in pixels (which is PNG’s drawback) or the actual size which JPG suffers from.
As we already touched above, PNGs are great because they blend in the best from size and quality of image files. They can weigh in at large file sizes, usually when catering for HDPI displays. And as you probably know – the larger a file size is, the slower is to render/load. Instead of using PNGs when requiring transparency in your images, SVGs are just code which means small sizes and quick uploading.
There are lots of ways in which SVGs can be used on the Web. They can display logos, be full on physics engine or used in browsers. However, most of the designers use them for logos, icons and simple animations. The benefit of SVGs for logos comes from their vector-based properties. For graphs, they are ideal when used in infographics (again because of the vectors). However, the coolest feature is that SVGs allow the creation of responsive logos, masking effects and tons of new possibilities.
Accessibility And SEO
A Final Word
In the end, SVGs are best used for low-intensity artwork such as logos, icons and simple graphics. However, if you decide to play around with them, you will easily see the thousands of other possibilities and ways in which you can make use of this amazing file type.