Using an SVG as a background drawable in Android

Question

I'm trying to use an SVG image (created using Inkscape and saved as plain SVG) as a background for my application. I'm trying to do this using the svg-android library. I have a file called background.svg in res/raw. My code looks like this:

SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.background);
Drawable pictureDrawable = svg.createPictureDrawable();
Bitmap bitmap = Bitmap.createBitmap(pictureDrawable.getIntrinsicWidth(), pictureDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
BitmapDrawable bitmapDrawable = new BitmapDrawable(bitmap);

LinearLayout backgroundLayout = (LinearLayout) findViewById(R.id.background);
bitmapDrawable.setTileModeX(Shader.TileMode.REPEAT);
backgroundLayout.setBackgroundDrawable(bitmapDrawable);

However when my application starts up, nothing shows up as the background (other than the background color from the layout). My layout xml file is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#aacceeff"
    >

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    >
 </LinearLayout>

</LinearLayout>

UPDATE

It appears that there is a problem with my SVG. It might be due to the fact that all features are not supported.

Have you tried to set the Drawable pictureDrawable as a background of the layout instead of BitmapDrawable bitmapDrawable? — Dimitris Makris, Oct 22 '11 at 20:51
@DimitrisMakris Yes, that was the first thing I tried but I still got a blank background. Another problem is that there is no way to set the tiling on a `PictureDrawable`. — Vivin Paliath, Oct 22 '11 at 20:54
Just in case;- U know android does not natively support SVG Try your code on firefox for Android? — Chasbeen, Oct 23 '11 at 10:08
Yes, not natively, but the svg-android library helps you work with SVG's on android. — Vivin Paliath, Oct 23 '11 at 16:59

score 19 · Accepted Answer · answered Nov 02 '13 at 14:24

The svg-android project hasn't been updated in over a year and it doesn't support SVG1.2 so svgs generated by Inkscape (open-source) aren't supported.

There is however a new android svg library: AndroidSVG

They are on version 1.2 and work on 1.3 is currently in progress. Including just the jar library one can programatically include svgs in android applications. Almost all svg features are included. I am yet to find an svg that I was unable to incorporate using this library.

If you include androidsvg from source (hg clone) in your project as a library module you get the SVGImageView class which is an extension of ImageView whereby you can add svg to your project using the xml layout files like so:

<com.caverock.androidsvg.SVGImageView
    xmlns:svg="http://schemas.android.com/apk/res-auto"
    android:layout_width="100dp"
    android:layout_height="50dp"
    svg:svg="filename.svg"/>

That's it. All you need to to do is place filename.svg in the assets folder and you are good to go.

It supports API 8 and above. There were a few issues when using it for API < 11 but I was able to fix these. I posted them as issues on the project page and the authors responded within minutes. They have been added to the next revision. If you have any problems look at the resolved issues, failing which I am available to answer questions here.

P.S. The documentation and examples on the project page are excellent and the library is a joy to work with. Android and svg are a powerful mix.

score 1 · Answer 2 · answered Oct 22 '11 at 21:17

1

I tried an example using the following code and it is shows the background correctly:

LinearLayout root = (LinearLayout) findViewById(R.id.background);
SVG svg = SVGParser.getSVGFromResource(getResources(),
                R.raw.android_body);
Drawable pictureDrawable = svg.createPictureDrawable();
root.setBackgroundDrawable(pictureDrawable);

Have you tried with another svg?

answered Oct 22 '11 at 21:17

Dimitris Makris

5,183
2
34
54

I did try loading up the SVG in a browser and it seems to show up fine so it doesn't look like there's anything wrong with it. Let me try another svg. Oh, also did you try it with the nested layouts like the way I have it? I wonder if that is contributing to the problem. – Vivin Paliath Oct 22 '11 at 21:44
Yeap, exaclty the same layout, but yep this is irrelevant. The svg i use is from the svg-android project (the live wallpaper project) – Dimitris Makris Oct 22 '11 at 21:46
I tried it with the svg they provided and it seems to work. So I guess it's an issue with my svg. – Vivin Paliath Oct 22 '11 at 21:47

Using an SVG as a background drawable in Android

2 Answers2

Linked