How to use the SVGImageView class

AndroidSVG releases from version 1.2.0 onwards include a custom View class that allows you to easily include SVG images in your layouts.

See the javadoc for SVGImageView.

There are two ways to use SVGImageView in your application.

1. Manually add it to your layout in code, or
2. Use the view in an XML layout file.

Option 1: Using SVGImageView from your code

First, make sure you have included AndroidSVG in your project. For instance, if you are using Eclipse, copy the androidsvg.jar file to your libs folder. The Android plugin will do the rest.

If you want to manually add the SVGImageView to your layout, you will need to do something like the following.

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
 
        LinearLayout layout = new LinearLayout(this);
        SVGImageView svgImageView = new SVGImageView(this);
        svgImageView.setImageAsset("my_svg_file.svg");
        layout.addView(svgImageView,
                       new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        setContentView(layout);
    }

}

This example uses the setImageAsset() method to tell SVGImageView to load the SVG from the assets folder. There are also calls to set the SVG from a resource (setImageResource()) and a resource URI (setImageUri());

Option 2: Using SVGImageView in your XML layouts

Using Android Studio

First, make sure you have added the androidsvg-aar artifact to your build.gradle file, as described on the home page.

    implementation 'com.caverock:androidsvg-aar:1.3'

Adding the custom view to your layout file

You will need to add the SVGImageView widget to your layout file. If you know what you are doing, you can add it manually, but perhaps the simplest way is to start with an ImageView and modify it.

In the Graphical Layout tab, go to the "Images & Media" section and drag an ImageView component to your layout screen. Position and resize it how you like, then switch to the XML editing tab.

The ImageView you just added, probably looks something like the following:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/ic_launcher" />

The next step is to let your layout know about the custom view. Add a namespace reference for svgimageview to the root element of your layout file. The root element will commonly be a LinearLayout, but may be something else.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ... >

The schema is necessary because SVGImageView has a custom attribute for specifying the SVG file (see below).

Aside: Note the special schema URL in the namespace. If you were using a custom View from your own project you would use a URL based on your package name. For example http://schemas.android.com/apk/com.example.customview. But since the custom View is in an included library you should use the res-auto short-cut. The real schema URL will be automatically inserted when your app is built.

The final step is to alter the ImageView entry you inserted so that it is a valid SVGImageView entry.

1. Change ImageView to com.caverock.androidsvg.SVGImageView.
2. Replace android:src with app:svg

Your entry should now look like this.

<com.caverock.androidsvg.SVGImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:svg="my_svg_file.svg" />

The app:svg attribute can be either:

• a filename in your assets folder, as in the above example
• a resource reference such as @drawable/my_svg_file
• a resource URI such as android.resource://com.example.myapplication/raw/my_svg_file

Now build and run your application to test your changes. The custom view won't render correctly in the graphical layout editor. All you will see is a grey rectangle with the SVGImageView class name. You need to deploy your app to a device or the emulator to test if it is working properly.

Using Eclipse or another IDE

Add AndroidSVG to your project

If you are building with Maven, add the AndroidSVG dependency to your POM file.

<dependency>
  <groupId>com.caverock</groupId>
  <artifactId>androidsvg</artifactId>
  <version>1.3</version>
</dependency>

Or, if you wish, download the latest androidsvg.jar from the Maven Central repository and add it to an appropriate place in your project. For example your libs folder.

Update your styleable attributes definition XML resource file

Unlike the AAR file, the JAR version of AndroidSVG does not include the attrs.xml file which defines the XML attributes that SVGImageView uses.

Download the attrs.xml from the GitHub repo, and add it to the res/values folder in your project. If your project already has an attrs.xml file, then copy and paste the <declare-styleable name="SVGImageView"> block to your existing attrs.xml file.

Add SVGImageView to your layout

Jump to section above, titled Adding the custom view to your layout file, and continue from there.