HealthifyMe Tech
Published in

HealthifyMe Tech

SVG to Vector Drawable

https://unsplash.com/@bensow

SVG stands for Scalable Vector Graphics, and it is a file format that allows you to display vector images in your app. This means that you can scale an SVG image up and down as needed without losing any quality, making it a great choice for responsive UI which is multi-device supportable.

Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG).

Using vector drawables instead of bitmaps reduces the size of your APK because the same file can be resized for different screen densities without loss of image quality.

Configure Vector Assets:

There are few icons provided by android studio, you can access them directly instead of copy pasting icons or importing SVG images.

Below are the steps:

Step 1: Right click on drawable folder select new -> vector assets

The window that appears will look something like:

Step 2: Select Clip art from asset type , Click on the clip art icon.

Select the icon you want or search for what you have in mind. Click OK and adjust it to the desired size. Click next -> next and you can see the following in the drawable folder you had created earlier.

Svg to Vector Drawable:

SVG images cannot be used directly in projects. They have to be imported as Vector drawables.

Steps to import SVG:

Step 1: Right click on your drawable folder and select New -> vector asset

Step 2: In the window select the local file and in the path section, choose .svg file from the device that needs to be converted in vector drawable.

A .xml file can be seen in the drawable folder, which looks something like

This can be used the same way as png for views.

Wait, but what about memory and performance?

As we know svg images create a .xml file that is scalable. Since there is only a single file for all resolutions, the apk size is definitely reduced. This means that all path and shape, according to the device, is calculated while rendering.

When vector drawables are drawn for the first time, a cached bitmap is created in order to optimize the re-drawing performance. This cache is reused as long as the width and the height of the image that needs to be drawn is the same.
A new Bitmap will be created every single time if a Vector Drawable is used for different sizes. So, yes, it is time consuming. In this particular aspect png images are better as they are always ready to rock since everything, like size and shape, is already decided.

Performance is not an issue for simple and flat icons. But it will take more time to render complex icons, which have many paths. Hence, there shouldn’t be too many icons rendering on the same screen.

“Since the vector graphics are rendered at runtime, on the CPU, the initial loading and drawing of a VectorDrawable will be slower. This is why Google recommends using them for images of maximum 200 x 200 dp.”

For more information see the link below:

https://upday.github.io/blog/vector_drawables_optimisation/

There is also an SVG optimiser tool that can optimise SVG. Not much information is needed for some images (like cutting edges). SVGO will remove them and create a flat image. Defs or filters of SVG that are not supported by vector assets can be converted into flat icons.

If you want to read in deep about how paths are drawn for vector drawable go read this article:
https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

I hope this article is informative for you. Feel free to write to me with your queries and suggestions. Always happy to help.

--

--

--

The HealthifyMe Tech Blog & Articles

Recommended from Medium

[มือใหม่หัดใช้ linux ]วิธีแก้ รัน androidEmulator Debian 9 “Stretch” ไม่ได้

Compiling C code as Android shared libraries

Merging Android Unit and Instrumented Code Coverage Reports Offline, using JaCoCo

Translucent SystemBars the right way — across API levels and themes

Read text files from Assets in Android

How Data Binding Helps You When Working with EditText Inside RecyclerView

Merge multiple adapters into single MergeAdapter

Mapbox Realtime Navigation- Customize the UI of Navigation in Android-Kotlin PART 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karishma Agrawal

Karishma Agrawal

Android Developer @HealthifyMe | wanted to be a writer so I write code now | Reader

More from Medium

How to Mute Audio and Adjust Volume During a Video Call in Android Using the Agora SDK

Integration of Huawei Map Kit and Location Kit in Android KnowMyBoard App using Navigation…

Multiple Image Selecter in android studio with Matisse

How to Observe Network Connection Status