When and why should we use SVG?

9

I develop for Android already has enough time, program natively, to be more specific. But lately I have had some doubts about using in-app images. At some point we will make some application that uses a vast amount of images and then a problem arises: we need several images so that, in different devices, they are not erased. Then the alternative is Scalable Vector Graphics or just SVG .

In Android Studio you can create a Vector Asset , which will generate a file in XML so you can use it in your application instead of normal images.

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

  

Scalable Vector Graphics

    drawable/ic_vector_name.xml
  

Common Images

    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? Is it advisable to start a transition from PNG to SVG in the application?

    
asked by anonymous 15.12.2016 / 15:04

2 answers

8

I've learned to vector "stuff" in Corel Draw, and this business of images does not lose quality is the maximum. (blablabla)

From Lollipop (API 21), Android included the class VectorDrawable , to define drawables based on vector graphics. 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 VectorDrawable at compile time for API 20 and earlier versions. There are also third-party tools for converting SVGs to VectorDrawables . Keep in mind that although the drawables vector can be defined in XML, the file format is not SVG and not all SVG files can be converted successfully.

  

Is it recommended to start a transition from PNG to SVG in the application?

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

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

Thisimagefound on Wikipedia that best defines the # , illustrates the difference between bitmap and vector images. The bitmap image 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 bitmap reveals pixels when scaling the vector image preserves the shapes.

Read the documentation for more details.

    
15.12.2016 / 17:19
4

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 it would with an image.

I recommend reading: SVG Images

    
15.12.2016 / 16:54