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.
Browser support. Using SVG as background-image has its own special set of browser support, but it's essentially the same as using SVG as img. The only problem browsers are IE 8 and down and Android 2.3 and down.
Android Studio includes a tool called Vector Asset Studio that helps you add material icons and import Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) files into your project as vector drawable resources.
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With