SVG on Android: Update

So I finally found some time to work on my apps. Hurray!

I updated my Milan Metro app, because the map was getting shamefully outdated and the app itself started losing users. Now it's on the right track once again. I'm also planning some enhancements for it, e.g. implementing stop search, but it's a subject for another time.

Today I wanted to share my latest experience concerning SVG images on Android. I already wrote a couple of posts about it (SVG on Android, Transforming SVG images into Android Drawables), but things have changed since then and I want to shed a new light on some of the aspects of using vector graphics.

There's actually an interesting story that goes with it. At my new job at Wikia (yeah, I know it's hard to follow where I work) we have periodical hackathons, that is we are given two days to work on whatever we want as long as it is, at least vaguely, connected with the main project. As I had just started and I didn't have much knowledge about the company's services and APIs, I decided to do a research about image loading libraries such as Fresco and Glide, to see if they could be better than Picasso for the Wikia apps. The research itself didn't bring me a clear answer, leaving me with what I could already find on Github and Stack Overflow. However, browsing through the Glide's Github repository I noticed that they had a sample for SVG images. In other words, I discovered that using Glide you could load and cache SVG images with as much ease as regular bitmap images. Glide uses AndroidSVG library to parse and display SVG images, so if you don't need the downloading and caching part, you can just use that.

I immediately tested it with my metro map apps and it turned out that the image looked perfect. The only thing was that the parsing time was still significant. I didn't measure it precisely, but waiting for an image (~100kb) to load took around one second.

Then I remembered that a guy wrote to me some time ago asking me for permission to use my idea to parse SVG files to Android Drawables (see this post for a more extensive explanation). This way you didn't have to use any additional libraries in your code and images were loading in a blink of an eye. I finally took a closer look at what Almos had created so far - android-svg-code-renderer. His projects forks the AndroidSVG library and adds Drawable creation to it. I must say that it works pretty well, although there are still things that could be done better. The generated code is not optimal and could be much shorter. Also, repeated symbols (used a lot in my maps) are inlined instead of being put in functions, which makes the output unnecessarily long and less readable. In general, however, the tool is very useful and I would still recommend it over SVG parsing libraries, which are slow.

In the end, I used my own old SVG to Drawable transformation tool, which I enhanced a bit to work even better and produce cleaner results. Although it's based on an older SVG library (svg-android), it still works surprisingly well and fulfills my needs. I'm aware that it's a temporary solution, but hopefully in the near future Almos or someone else will come up with an even more efficient SVG loading method.

Whoa, this post got a little technical, but I'm sure some people will find it useful. If you have a better SVG handling solution, please let me know. If something's not clear enough, I'll be happy to help you more in the comments section.