Scalable Vector Graphics – The internet has come a long way since the HTML5 became popular and people started looking at the JavaScript as a language that is capable of developing much more complex applications. As a result, several APIs have emerged and there is abundant content on how browsers can handle them all with SVG (Scalable Vector Graphics).
A few years ago, the Microsoft applied a differentiated design approach to all its applications and services as well as all user interfaces for mobile devices. With the advent of iOS 7, Apple has replaced its appearance and format principles in favor of good clean and minimalist design. Still, Google's launch of “Material Design” that can be used anywhere, from apps to the web.
Initially, the main advantage of SVG – well publicized throughout the internet – is its scalable nature. When assembling an icon, the designer does not need to worry about “how will he be” in different dimensions or on mobile devices with different pixel densities, and focuses just in making the resource in the best way.
With SVGs there is no need to export two different pixel-based file formats to display in retina mode and non-retina. In fact, there is no need to worry about the pixel density on each device, especially considering their non-standardized nature, but rather keep the focus on the artwork.
Once the icon is ready, the designer exports it to a single file in the format “.SVG”, which can be resized by the developer without loss of quality, just by applying attributes “width" and "height” with their respective values.
You can see an example of the Firefox browser logo below:
upload.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
However, although the generated files “.SVG” just be XML, you are much more likely to use a vector image editor. The most common alternatives are Adobe Illustrator and Inkscape, but on macOS we have another very good alternative called sketch.
Also, SVG works best when it's not that complex. This is because its size can increase a lot depending on what you are developing: solid colors are much smaller than gradients, for example. However, this doesn't mean you can't have complex graphics, but keep the file size issue in mind if you're going to use SVG on a page, for example.
If you use Adobe Illustrator software, there are some things you can do to considerably reduce this complexity when exporting the SVG file. The first thing to do is expand the graphics, modifying the attributes that define its appearance and other properties of the elements inside it. This will also help with things like opacity and gradients.
Another important aspect that you need to pay attention to is when exporting, there are also some things to do. Choose profile SVG 1.1, which is what has greater compatibility between browsers today. The profiles SVG Tiny 1.1 and the other variations of SVG are aimed at mobile devices but do not yet have adequate support.
Also, if you don't need to manipulate text dynamically, convert all fonts to objects. This will ensure that the text maintains the characteristics you defined, without increasing the final size of the file, since for all intents and purposes the texts will only be objects.
Because it is a text-based file, the SVG It has an excellent compression factor for various segments. A file of 30 KB, for example, drops to 9.6 KB when served with technology GZIP. If you use the technique of Data URIs, a file containing 13 KB falls to 4.9 KB when served with GZIP compression technology.
Hope this helps!
Share the article and leave your comments! 🙂
