Files in the SVG format: what are they and how do they work?
As you know, many of the vector resources that you can download from Freepik come in a special type of file, called the SVG file format. Many designers are already familiar with this concept and they are used to working in this format, but if you are getting started in the world (or rather, universe) of vectors and you are not familiar with this file extension, we’ll learn a bit more about it today: what is the SVG format? And how do we work with it?
Almost everyone is familiar with the most common image file types: JPG, PNG and GIF are the most common. But SVG is a vector format, which allows for some special features. As with any vector image type, the information isn’t stored in terms of pixels, but as other kind of data that is much more lightweight and the best of call: scalable at any size!
Web design
The SVG format, like Flash, is open, standardized and XML-based, which allows for total compatibility with all browsers. This means it can be used in web design as an special kind of image: the vector image. We live in the pixel age, but slowly SVG formats have begun to claim their place in web design. Vectors always look crisp at any resolution, and considering that SVG (which actually stands for Scalable Vector Graphics) can have small file sizes, this is a win-win situation.
Color and animation
One of the cool things about using the SVG format in web design, is that with style sheets you can modify things about these vectors. For example, if a SVG icon is green but you want it to be black in the web design, you only have to add a few lines of code to change the color. This is great if you are working with simpler designs, like the icons that you can find on Flaticon. And not only you can change the colors, but SVG can be animated with CSS, too: if you want a SVG element to blink when you hover your mouse over it, it can be done with just some lines!
Responsive icons
It’s great when you resize your windows and the elements in it adapt to the new size, allowing you to still have good visibility of the content, right? This can be achieved thanks to responsive elements. But instead of having several images in the servers in different sizes, SVG icons can automatically scale themselves to fit your windows best. Or you can have icons with varying degrees of iconicity, but in SVG format so that they always look their best!
The alternative to using SVG can sometimes be using an icon font, which is a font where the “letters” are icons, which scalate and transform just like a font would. But using SVG, as we already know, has some cool advantages, like being able to change colors of elements or animating them.
Some disadvantages?
SVG icons might not work in some browsers, and to avoid blank spaces or user experience problems you will have to create JPEG or PNG extra files as fallbacks in case that the SVG can’t be displayed. This means extra work, but taking into account the advantages of vectors, it can really be worth it!
Feeling inspired to try SVG vectors in your web design? Take a look at the collection that we have on Freepik!
