What is the easiest way to use SVG images in Android?

Question

I have found a myriad of libraries in order to use SVG images in Android and avoid the frustrating creation of different resolutions and dropping files for each resolution. This becomes very annoying when the app has many icons or images.

What would be a step-by-step process of the simplest-to-use library for using SVG images in Android?

Also I use Android Studio and Illustrator for generating my icons and images.

Answer 1

First, you need to import SVG files by the following simple steps.

1. Right click on your project's drawable folder (app/res/drawable)
2. Click New
3. Select Vector Asset

If the image is available on your computer, select the local svg file.

After that, select the image path. An option to change the size of the image is also available on the right side of the dialog if you want to. In this way, the SVG image is imported into your project.

After that, for using this image, use the same procedure:

@drawable/ic_image_name

Answer 2

UPDATE: DO NOT use this old answer. Better use Pallavi Jain's answer

I found svg-android to be quite easy to use, so the step-by-step instructions are here:

1. Download the library from: https://code.google.com/p/svg-android/downloads/list. The latest version at the moment of writing this is: svg-android-1.1.jar

2. Put the JAR file in the lib directory.

3. Save your *.svg file in the res/drawable directory (in Illustrator, it is as easy as pressing Save as and select .svg)

4. Code the following in your activity using the SVG library:

    ImageView imageView = (ImageView) findViewById(R.id.imgView);
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.drawable.example);
    // The following is needed because of image accelaration in some devices, such as Samsung
    imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    imageView.setImageDrawable(svg.createPictureDrawable());
   

You can reduce the boilerplate code like this:

Very easily I made a simple class to contain the past code and reduce the boilerplate code, like this:

import android.app.Activity;
import android.view.View;
import android.widget.ImageView;

import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParser;

public class SvgImage {

    private static ImageView imageView;
    private Activity activity;
    private SVG svg;
    private int xmlLayoutId;
    private int drawableId;


    public SvgImage(Activity activity, int layoutId, int drawableId) {
        imageView = (ImageView) activity.findViewById(layoutId);
        svg = SVGParser.getSVGFromResource(activity.getResources(), drawableId);
        // Needed because of image acceleration in some devices, such as Samsung
        imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        imageView.setImageDrawable(svg.createPictureDrawable());
    }
}

Now I can call it like this in activity:

    SvgImage rainSVG = new SvgImage(MainActivity.this, R.id.rainImageView, R.drawable.rain);
    SvgImage thunderSVG = new SvgImage(MainActivity.this, R.id.thunderImageView, R.drawable.thunder);
    SvgImage oceanSVG = new SvgImage(MainActivity.this, R.id.oceanImageView, R.drawable.ocean);
    SvgImage fireSVG = new SvgImage(MainActivity.this, R.id.fireImageView, R.drawable.fire);
    SvgImage windSVG = new SvgImage(MainActivity.this, R.id.windImageView,R.drawable.wind);
    SvgImage universeSVG = new SvgImage(MainActivity.this, R.id.universeImageView,R.drawable.universe);

Answer 3

Android Studio supports SVG from 1.4 onwards

Here is a video on how to import.

Answer 4

Try this:

The next step:

And now edit the image or icon name and save it:

Answer 5

Rather than adding libraries which increases your APK file size, I will suggest you to convert SVG to drawable using Android SVG to VectorDrawable.

And add vectorDrawables.useSupportLibrary = true in Gradle.

Answer 6

1. You need to convert SVG to XML to use in an Android project.

1.1 You can do this with Android SVG to VectorDrawable, but it does not support all the features of SVG, like some gradients.

1.2 You can convert via Android Studio, but it might use some features that only supports API 24 and higher that cause crashes your app in older devices.

And add vectorDrawables.useSupportLibrary = true in the Gradle file and use it like this:

<android.support.v7.widget.AppCompatImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_item1" />

2. Use this library SVG-Android that supports these features

Add this code in the application class:

public void onCreate() {
    SVGLoader.load(this)
}

And use the SVG like this:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_red"/>

Answer 7

1. Right-click on the drawable directory, press New, and then go to Vector assets
2. Change the asset type from clip art to local
3. Browse your file
4. Input the size
5. Then click Next and then Done

Your usable SVG image will be generated in the drawable directory.

Answer 8

You can use the Coil library to load an SVG file. Just add these lines in file build.gradle:

// ... Coil (https://github.com/coil-kt/coil)
implementation("io.coil-kt:coil:0.12.0")
implementation("io.coil-kt:coil-svg:0.12.0")

Then add an extension function:

fun AppCompatImageView.loadSvg(url: String) {
    val imageLoader = ImageLoader.Builder(this.context)
        .componentRegistry { add(SvgDecoder(this@loadSvg.context)) }
        .build()

    val request = ImageRequest.Builder(this.context)
        .crossfade(true)
        .crossfade(500)
        .data(url)
        .target(this)
        .build()

    imageLoader.enqueue(request)
}

Then call this method in your activity or fragment:

your_image_view.loadSvg("your_file_name.svg")

Answer 9

Try the SVG2VectorDrawable Plugin. Go to Preferences → Plugins → Browse Plugins and install SVG2VectorDrawable. It is great for converting svg files to vector drawable.

Once you have installed you will find an icon for this in the toolbar section just to the right of the help (?) icon.

Answer 10

Load SVGs using the Coil library. Note that this library is built upon Kotlin Coroutines.

Import the extension library:

implementation("io.coil-kt:coil-svg:2.1.0")

And add the decoder to your component registry when constructing your

ImageLoader:
val imageLoader = ImageLoader.Builder(context)
    .components {
        add(SvgDecoder.Factory())
    }
    .build()

That's it!

Click here for more information.