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.
Outstanding Resolution
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.
Speed
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.
Animation
SVGs can be animated and styled with CSS. The animations (transformations/transitions) that you use on HTML elements can also be used on SVG elements, which makes them even more interesting. Even though there are some instances where you cannot use CSS code to animate SVGs, they can be easily covered with JavaScript. So, it is true that when it comes to SVG animation, there is an entire world full of possibilities.
Practicality
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
Last but not least is a feature no one should dismiss. Since Google’s search engine algorithm is constantly changing, ending in the top first page results can be tricky. In this case, SVG content is directly indexed in HTML which is a great benefit for SEO. Since SVGs are not bitmap images, they are also easily modified using both JavaScript and CSS. They compress well, scale to any size without losing clarity and look great on all types of displays.
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.
