SVG to Vector Drawable
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.
