SVG画像の表示

SVGとはベクター形式の画像形式でPNGやJPEGなどのスカラー形式の画像と違って次のような利点があります。

• 拡大・縮小しても画像がぼやけない
• 図形をオブジェクトとして扱える(修正しやすい)

しかし、Androidの標準のAPIではSVGを表示することはできません。

そこでandroid-svgというSVG専用のライブラリを使ってSVGを表示してみたいと思います。

ライブラリの導入

android-svgはプロジェクトではなく、jarファイルで配布されています。

ダウンロード先は次のURLで、そこからjarをダウンロードしてきて、適当な場所に保管します。

https://bitbucket.org/paullebeau/androidsvg/downloads

保存したらeclipse上でプロジェクトのlibsフォルダにandroidsvg-x.x.x.jarをコピーします。

これでSVG機能が利用できるようになるはずです。

使い方

まず、表示したいSVG画像を用意します。

今回はAndroidのマスコットキャラクターのロイド君のSVGをダウンロードして表示してみたいと思います。

ダウンロードURL : http://upload.wikimedia.org/wikipedia/commons/d/d7/Android_robot.svg

この画像をroid.svgのようなファイル名でプロジェクトのrawフォルダなどに保存してリソースにします。もしrawフォルダがなければ作ればOKです。

次がSVGからBitmapを作るサンプルコードです。

SVG roidSvg = null;
try {
	roidSvg = SVG.getFromResource(getContext(), R.raw.roid);
		//リソースからSVG作成
} catch (SVGParseException e) {
	e.printStackTrace();
}

float aspect = roidSvg.getDocumentWidth() / roidSvg.getDocumentHeight();
	///アスペクト比(横縦比)の計算
int width = 200, height = (int) (width / aspect);
Bitmap bitmap = Bitmap.createBitmap(width, height, 
		Bitmap.Config.ARGB_8888);

///SVG画像を縮小
roidSvg.setDocumentWidth(width);
roidSvg.setDocumentHeight(height);

Canvas tmpCanvas = new Canvas(bitmap);
roidSvg.renderToCanvas(tmpCanvas);

SVGを読み込んで、アスペクト比が正しくなるようにビットマップを作成しています。

実際に作成されたビットマップを表示してみるとこんな風になりました。

普通のPNGなどの画像を拡大・縮小するのと違って曲線部分などがなめらかになっているのが分かります。

android-svgの制限

android-svgはSVGの全ての機能をサポートしているわけではありません。

公式ページによると次の機能は使えないみたいです。

• アニメーション
• フィルター

また、一部のタグは機能が制限されていて、それが次のタグです。

<image> <text> <textPath> <tref> <tspan> <pattern> <radialGradient> <style>

これ以外のタグは完全にすべての機能を利用できます。