When and why should we use SVG?

Question

I’ve been developing for Android for a long time, I program natively, to be more specific. But lately I have had some doubts with the use of images in the application. One time or another we will make some application that uses a vast amount of images and then a problem arises: we need several images so that, on different devices, they are not blurred. Then the alternative arises Scalable Vector Graphics or just SVG.

In the Android Studio you can create a Vector Asset, that will generate a file in XML for you to use in your application, in place of normal images.

The difference is that you create one, to use in several, as for example:

Scalable Vector Graphics

    drawable/ic_vector_name.xml

Imagens Comuns

    drawable-hdpi/ic_image.png
    drawable-xhdpi/ic_image.png
    drawable-xxhdpi/ic_image.png

That is, while in svg I create an image to use in several sizes, with png I have to create an image for each type of resolution.

But my question is, when should I use SVG? It is recommended to start a transition from PNG for SVG in the app?

Answer 1

I learned how to vector "things" in Corel Draw, and this image business is not losing quality. (blabla)

From the Lollipop (API 21), Android included the class VectorDrawable, to define drawables based on vector graphics. The Android Studio 1.4 adds the Vector Asset Studio to make them easier to work with, including an SVG import feature and a new Gradle plugin that generates PNG versions of icons VectorDrawable at build time for API 20 and earlier versions. There are also third party tools to convert Svgs to VectorDrawables. Keep in mind that although the vector drawables can be set in XML, the file format is not SVG and not all SVG files can be converted successfully.

It is recommended to start a transition from PNG to SVG in the application?

According to the documentation, the use of vector characters instead of bitmaps reduces APK size because the same file can be resized to different screen densities without loss of image quality.

We have that each library added to a project brings many possibilities and features, but libraries usually contain a lot of code files and resources, among them, unnecessary resources depending on each type of situation. This creates a kind of residue: apps have a lot of things that are never really used. More than that, the size of the packages are growing at a fast pace. The point is, we should try to decrease as much as possible

This image found on Wikipedia which better defines the Scalable Vector Graphics, illustrates the difference between bitmap and vector images. The image bitmap is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the image, the scale of the bitmap reveals the pixels when resizing the vector image preserves the shapes.

Read the documentation for more details.

Answer 2

SVG can be used to replace images, usually icons. The use of SVG is always indicated by being much lighter than a PNG, JPG, for example.

The great advantage is that, because it is a vector, it will never lose quality, as would happen with an image.

I recommend reading: Images in SVG