While you were searching for icons, you may have seen the SVG format among the PNG or PSD versions. In today’s article, we are going to explain to you what the SVG format is all about, what are its benefits and where you can use it.
First of all, let’s explain the acronym. SVG stands for Scalable Vector Graphics. As a short definition, the SVG is an XML-based vector image format, with support for interactivity and animation. It has been in development at the W3C (World Wide Web Consortium) since 1999, but it’s still a relatively unknown standard.
The W3C recommendations are essential in web development and, since August 2011, SVG 1.1 (Second Edition) became one of them.
So the SVG format is based on XML, which might sound a bit odd since we are talking about images and code. What you need to know is that a SVG can be created in virtually any text editor, but also in drawing programs like Inkscape.
The format allows for three types of graphic objects: vector, raster and text. These objects can be grouped, styled and transformed into previously rendered objects.
As for the features, there are many sets associated with SVG. Among these: paths (drawing outlines with curved or straight lines), basic shapes, colours and gradients, filtering possibilities and, of course, interactivity and animation.
What’s SVG good for? First of all, it’s a resolution independent technique. It’s also 100% scalable, therefore you don’t need to download/upload multiple versions of the same image, in different sizes. No matter how you scale an SVG, it will always look crisp.
By using the standard, you can also have less http requests, which is great, especially if you are developing for the mobile industry.