CODEWITHSUNDEEP
androidperformanceuser-interfacesvg
Neji
Neji

Reputation: 6839

Should Android app make use of SVG's to maximum extent?

The official documentation Vector Asset Studio states that SVG can be used to reduce APK size. It also states that SVGs take much CPU cycles for drawing.

The initial loading of a vector graphic can cost more CPU cycles than the corresponding raster image. Afterward, memory use and performance are similar between the two. We recommend that you limit a vector image to a maximum of 200 x 200 dp; otherwise, it can take too long to draw.

Also, it is supported from Lollipop onwards. On backward compatibility, it states that-

Android 4.4 (API level 20) and lower doesn't support vector drawables. If your minimum API level is set at one of these API levels, you have two options when using Vector Asset Studio: generate Portable Network Graphic (PNG) files (the default) or use the Support Library.

For backward-compatibility, Vector Asset Studio generates raster images of the vector drawable. The vector and raster drawables are packaged together in the APK.

Raster images look like more efficient than the SVGs. Also, though the size of APK will be reduced, what will be the impact of SVG on memory and app performance as the doc states that it will take time to draw large SVG files.

As an android developer, what should be my approach? Which of above or any other ways will ensure my apps be optimized and deliver good performance.

Edit : A query then, What should be the best approach among the two -

  1. Reduce the apk size by using the SVGs but will increase CPU cycles for drawing
  2. Use raster images

Upvotes: 3

Views: 1955

Answers (2)

Wylie Kulik
Wylie Kulik

Reputation: 686

My experience using react-native-svg was very good, but animation performance that needs to recompute dynamic SVG suffered from I think they call it 'too many passes over the bridge'. There may be a way to optimise it, and I intend to investigate this on my next RN project. I should qualify this last statement by emphasising that animation only suffers when the SVG needs to be recomputed during the animation (on the JS side). For example have a native ScrollView component with your SVGs inside it, the ScrollView can animate perfectly performantly, but if you want to change the SVGs programatically as a function of scroll position within the React/JS side, you will have the bridge problem, and dropped frames galore.

Here is my boilerplate which sets up a few basic shapes in Android RN: proto__33__boilerplate

Generally I would say (programmatic) SVGs are great for Android, but I haven't yet found a performant way to use them for animations. Will update if I find that.

Upvotes: 1

methodofaction
methodofaction

Reputation: 72405

In my own experience Vector Asset Studio is picky about what it accepts in an SVG. If you are not well versed in SVG you are going to have a hard time massaging the SVG markup into something that VAS accepts. From the top of my head I recall it doesn't support defs or filter, but some vector graphics software seems to include it even if it's not strictly necessary. Given flat icons (no gradients or shadows, for example) you can work around this by manually editing the mark-up.

As for performance, it really depends on the amount of icons you will display per screen, and the complexity of these icons. You will have to conduct some stress tests to see if your target devices hold up. Note that this only impacts the initial load, behind the scenes these vector images are rasterized and—as the text you cited mentions: Afterward, memory use and performance are similar between the two.

Your approach should be pragmatic, attempt to draw a couple of your icons on the screen and see how smoothly it goes. This is a subjective question that depends on the constraints of the device and the person who implements it.

Upvotes: 1

Related Questions