Building a Standard architectured application using the Scalable Vector Graphics

It’s very surprising to me that mobile application developers and mobile companies have not made better use of Scalable Vector Graphics in mobile. 

SVG is, in fact, the best format for rich content on mobile devices for many reasons:

• It is an open standard format developed by the World Wide Web Consortium (W3C).
• It offers multi-device support, which provides better user experience than you may think.
• SVG graphics can be scaled to random sizes, removing some issues with screen dimension proliferation on mobile devices.
• It is a compact way of representing vector graphics.
• Because SVG is based on XML, many existing XML tools can be used to generate content.

This article briefly covers the capabilities of SVG and how best to take advantage of it for mobile applications. 

What is SVG?

Scalable Vector Graphics (SVG) is an XML specification and file format for describing two-dimensional vector graphics, both static and animated. SVG can be purely declarative or may include scripting. It is an open standard created by the World Wide Web Consortium's SVG Working Group.

So, SVG is essentially an open standard for an XML-based representation of vector graphics. It is the scalable aspect of SVG in particular that makes it so exciting, since it means that the same graphic can look equally well on a big screen mobile phones as it does on a small mobile screen, with no modifications whatsoever. The following image from WikiMedia demonstrates the principle perfectly. Bitmap graphics with inherently fixed resolutions don't scale up well and get blurred, but scalable graphics (which have no inherent pixel size) scale up very well indeed. 
 

SVG has all of the advantages of other vector graphic formats with one key difference: it is based on a set of open standards from the W3C.

Serving SVG to Mobile

With new exciting mobile devices of new screen sizes and different screen resolutions coming out everyday, it's very difficult to show perfect, quality images with new devices. To show images at their best, Android uses SVG in the form of Vector Graphics or Vector drawable and animated vector drawable, which is added in Android 5.0 Lollipop devices.
 

What are Vector Graphics and why do we want to use them...?

Normal bitmap or png images are the set of Pixels in a Grid.. whereas in vector graphics you can represent images by describing objects geometrically which means you can describe the images as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector graphic is "Image scalability". It can be scaled without loss of display quality, which means the same file is resized for different screen densities without loss of image quality. This results in smaller APK files and less developer maintenance.

Let's go through an example to understand the benefits of image scalability:

Take a look at the major advantage of image scalability:

Figure 1 is a bitmap or png image with the size of 100x100 dp which may render good quality on a smaller display resolution. But if you put the same image on a Higher Screen or in High resolution devices with the size of 400x400px the image gets scattered and ends up looking blurry as you see in Figure 2.
 
In order to overcome the issue of image scalability in Android, normally, developers create multiple versions of an asset to present on different screen densities. This approach consumes more development efforts, and results in a larger APK, which takes up more space on the device.

But with the use of vector images you need only create images once in an xml file and you can scale beautifully for all sizes and different devices. This not only save space but also simplifies the maintenance.

Multiple bitmap or png files

Single xml file

Svg majorly support 2 types in Android

1. Vector Drawable

   Vector Drawable defines a static drawable object. Let’s take  a look at a xml structure of Vector Drawable.

    

   

   Image reference: Android Developer site

   Each vector graphic is defined in a tree hierarchy, which is made up of "path" and "group" of objects. Each "path" contains the geometry of the object's outline an "group" contains details for transformation. All paths are drawn in the same order as they appear in the XML file.
     
   

2. Animated Vector Drawable

   Animated Vector drawable can add animation to the properties of a vector drawable. These are above sub classes of vector drawable and they are also represented using xml files. Animated vector drawable has the ability to manipulate how images are drawn in real time, so they can move and change on the screen. One of the major advantages of animated vector drawable is it runs on RenderThread (as opposed to on UI thread for earlier APIs), which means the animation in this can run smoothly even when there is a heavy workload on the UI thread or will even work fine if your mobile device has a low RAM.

    

   Note: If the UI thread of the mobile is not responsive, then this RenderThread may continue animating smoothly until the UI thread is capable of starting another UI frame.

   

   As you can see in the above figure, the ability to change the image in real time so they can move and change on the screen. Here you see how Animated vector drawable helps to change the image smoothly between the Android and Apple Logos.
    

Latest SVGs used by Amura in the Casa Grande App

Some of the Svg icons we have used in Casa Grande’s App as compared to images or bitmap icons:

Conclusion

Every day, we see different kinds images on the web, on mobiles, and in any place we visit. These images are important in conveying a message to their target audience. Clarity plays the most important role, otherwise the image will fail its purpose. With this purpose, vector graphics is the best suitable option as it uses mathematical definitions. Each line in an image is made up of points, with lines that are interconnecting to each other. 

Some of the major advantages of vector graphics are:

• It limits the size of the image.
• No image distortion.
• Vector graphics are scalable.
• It looks good and makes a good impression!
   

Credits: Yash Agarwal