For A Better Android Experience

For A BetterAndroid Experience

A blog where you can find useful tips andtricks on Android development.

 

 

Sunday, 6 January2013

Display an SVG inside an ImageView or aCanvas

 

 

 

Objective

Display an SVG inside anImageView or a Canvas.

SVG are really convenient because you don't have to createan image for each density,  since it canbe scaled with no loss of quality.

Here is an example of an App entirely done with SVG :

https://play.google.com/store/apps/details?id=com.fordemobile.kutiz2lwbeta

Issue

 

The Android framework doesnot support SVG by default.

 

 

Solution

Steps

1. Download the latestversion of the svg library here :http://code.google.com/p/svg-android/downloads/list

2. Add the jar to yourproject by copying it into the libs directory

3. Copy your SVG in yourres/raw or assets/ directory

4. Load the SVG and createa Drawable or PictureDrawable depending on your need.

 

 

Details

1. Download the latest version of the svg library here:

http://code.google.com/p/svg-android/downloads/list

 

This library offers a limited support of SVG and is not maintained anymore.

 

You can eventually downloada fork here which has more features of SVG supported  :

http://code.google.com/p/svg-android-2/downloads/list

List of new features ofthis version:

http://code.google.com/p/svg-android-2/wiki/Introduction

 

2. Add the jar to your project by copying it into the libs/directory

 

If you don't have a libs/directory, create one at the root of your project and copy the jar inside. InEclipse, this should automatically add it to your build path.

 

3. Copy your SVG in your res/raw or assets/ directory

 

You can copy your imagedirectly in the res/raw folder or you can organize them in differentdirectories if you use the assets/ directory.

 

4. Load the SVG and create a Drawable or PictureDrawabledepending on your need.

 

If your image is in the rawfolder and you want to display it in an ImageView, you can use the followingcode :

 

?

1 2 3 4

// Parse the SVG file from the resource SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android); // Get a drawable from the parsed SVG and set it as the drawable for the ImageView imageView.setImageDrawable(svg.createPictureDrawable());

If your SVG is in the asset directory, you can display it like this :

?

1 2 3 4 5 6 7

try{      // Specify the path (relative to the 'assets' folder)      finalSVG svg = SVGParser.getSVGFromAsset(getAssets(),"android.svg");      imageView.setImageDrawable(svg.createPictureDrawable());  }catch(IOException e) {      // Handle IOException here  }

If you want to draw your SVG directly on a canvas, you will have to create aPicture instead of a PictureDrawable:

?

1 2 3 4 5 6 7

// Parse the SVG file from the resource SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android); // Get the picture Picture picture = svg.getPicture(); // Draw picture in canvas // Note: use transforms such as translate, scale and rotate to position the picture correctly canvas.drawPicture(picture);

You can get more details on how to use the library on the originaldocumentation: http://code.google.com/p/svg-android/wiki/Tutorial

Posted by Kwakuat 04:04

Email ThisBlogThis!Share toTwitterShare toFacebook

 

 

Labels: canvas,draw,graphics,images,imageview,libs,svg,vector

http://blog.fordemobile.com/2013/01/display-svg-inside-imageview.html