Is it a Good Practice to Use SVG Images in an Android Application?

When a developer thinks about SVG images, a common question that often comes to his mind is: “Is it a good idea to use SVG images in my Android application?” While the answers can range depending on whom you ask, our advice is definitely a no; it’s not a good idea.

What is an SVG Image?

Let’s dive into the topic of why SVG images in an Android application is not a good practice by starting at the basic facts and understanding what an SVG image really is.

An SVG image is defined by Wikipedia as Scalable Vector Graphics (SVG) that is a XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG is often used in the world of web development and generally tends to be one of those topics that either you avoid, or you don’t, depending on which side of the spectrum you fall on.

Recommended reading: Android vs. iOS: Which One Owns a Better App Permissions System?

SVG Image Can be used in Desktop Applications?

This question, while complex and debatable, can often be asked in the context of desktop applications as well that are generally using an icon, but in many different ways. They include – but are not limited to – very small 16*16 icons in file lists, up to 128*128 icons used on the dock and all the way to 512*512 icons that are most commonly used to help enhance the artistic capabilities of icon designers. However, with the rapid development of technology, the computing world decided to make over 1200 dpi desktop displays. Are PNG or SVG more suitable for this job?  Anything over 1200 dpi makes developers wonder about the benefits of SVG.

SVG Images are Compatible with Android or Not?

Because of the same reason, this question is also asked in regard to mobile applications that are compatible with Android smartphones. In this case, a single vector icon is used as a replacement for the same original icon. Both of them are optimized for the specific density bucket. This is generally medium and high, but the quality may be different.

For newer versions than Lollipop, Android defines the VectorDrawable class, for defining drawable based on vector graphics. Android Studio 1.4 added the “Vector Asset Studio” that includes an SVG import feature and a new Gradle plugin that generates PNG versions of VectorDrawable icons at build time for API 20 and earlier. This means that SVG doesn’t work on earlier versions than Lollipop. They will be automatically converted to PNG or the developer has to use a converter to make this happen.

Note: The above reference is taken from Stack Overflow.

Depending on whom you ask, you might learn several different reasons why designers and developers both have a lot to think of when they switch from making a PNG icon to using vector formats. To create an icon, designers will choose a software that is most effective for them, probably a simple SVG animation creator like SVGator, but creating SVG could be still difficult. Even though it’s the designer’s responsibility to define the structure of the icon, it might be the developer’s job to animate it if the designer doesn’t have at least basic coding skills. Once the structure has been defined, then runtime scale is combined with various shapes of the icon. This includes – but is not limited to – the small icons for the action bar or an extra-large icon for the “About” page.

The Process to Create Icons.

Many visual designers often share a similar process in terms of creating icons for multiple screens. Specifically for those with Android experience. The first stage happens by using a sketchbook or even a white board. This is used to help conjure up ideas, shapes, and combinations in order to identify iconography that works with the platform for which they are creating the icon. This also allows designers to create a distinct shape and form that is often displayed through the icon.

Two of the most popular flow transitions include Adobe Illustrator and Fireworks. Through these software programs, designers are able to create a more expert version of the icon in a vector format. Because vector images are scalable, designers can create pixel perfect icons for various resolutions.

You may also like: Android N - Enhancing the User Interactivity and Experience.

Use of SVG Image: Recommended or Not

Using SVG images in an Android application can be extremely complicated. That is why so many designers recommend that you don’t do it. There are so many other ways in which SVG images can be used more effectively. Attempting to use SVG images in an Android application could be easily equivalent to trying to make a circle into a square object. Is it impossible? No, but could it be a possible time waster? Absolutely. Being a designer and a developer is less about working harder and more about learning how to work smarter.