21

What are the pros and cons in using vector drawables vs. using a set of .png for Android system icons?

If they're meant for two different things, what are those?

madhan kumar
  • 1,560
  • 2
  • 26
  • 36
Vicky Leong
  • 1,208
  • 3
  • 12
  • 30
  • Afaik, vectors scale while keeping their original ratio. Interesting question, I'd like to see an answer to this myself. – Vucko Aug 05 '16 at 18:32
  • Here, under "Considerations for SVG files": https://developer.android.com/studio/write/vector-asset-studio.html – Shaishav Aug 05 '16 at 18:32

3 Answers3

21

A png is a compressed image. It has a fixed size, if you try to make it bigger or smaller it will need to either duplicate or remove data. Too big or too small and it doesn't look right (too big is worse than too small).

A vector drawable is a series of commands that tell it how to draw something. These commands scale, so a well executed vector drawable will look as good at 1000x1000 as it does at 100x100.

The advantage of a png is its easy to do and relatively fast performance. A vector drawable is slower (you have to execute the commands) and harder to create a good one. But it scales better. If scaling isn't needed, a png is probably what you want. If it is, you may want a vector.

Also note some kinds of images work better for vectors than others- an icon is a good use of a vector. A photograph wouldn't work.

Gabe Sechan
  • 90,003
  • 9
  • 87
  • 127
  • Are the performance drawbacks not negligible for a handful of icons on modern phones? – miva2 Mar 22 '22 at 19:15
  • 1
    @miva2 Please note I wrote this 6 years ago, hardware was less advanced. But I'd say it depends on the complexity/size of the image and the number of them on the screen. Most icons are ok. Using a vector image for a photo would be bad. If you're seeing perf issues drawing, measure it and see how bad it is. I would also expect that the frmework will cache a bitmap formed from drawing your vector the first time, if it does that then it's all a 1 time hit anyway. – Gabe Sechan Mar 22 '22 at 20:09
  • Yes, I did see the date which made me wonder how relevant the performance concerns are today. Thanks for the reply! – miva2 Mar 23 '22 at 11:33
12

Vector drawables reduce the size of your apk since you only have 1 Image vs having multiple in different folders. They also scale very well which is why you only need to create 1 vector drawable

The downside to vectors are that they are a little performance heavy so you should use them in a few places

tyczj
  • 71,600
  • 54
  • 194
  • 296
2

Aside from the scaling and space factors, with vector drawables you can play and modify in realtime the vector information of the drawables, that means that you can do things like transformations for example (like morphing a figure). With a set of PNGs you have a static representation and that's all, you cannot play with the forms because they are only static bitmaps (unless you do tricky things with them). Check out this example of path morphing in order to know what you can get. Remember, with a set of PNG drawables you trade flexibility and space with speed, with vector drawables you gain flexibility and space, but loss speed (because vector transformations are CPU intensive tasks -in contrast to bitmap scaling-).

josemgu91
  • 719
  • 4
  • 8