AndroidでWeb上のSVGファイルを表示

Androidでは公式にSVGファイルの読み込みがサポートされましたが、 drawableディレクトリにあるファイルを表示する方法がメインでWeb上にあるファイルを簡単に表示する方法がわからなかったので調べてみました。

Androidで画像表示用ライブラリといえばGlideとPicassoの2つが有名ですがPicassoでは簡単に表示する方法がなさそうだったので今回はGlideを使った例を紹介します。 2016/05/31現在の最新バージョンの4.0.0-SNAPSHOTですが安定版の3.7.0を使用します。

Glide SVG表示サンプルの実行

Glideの場合は公式にSVG画像を表示するサンプルがあります。 実行すると以下の様な画面が表示されます

SVGファイルを表示

GlideでSVG画像を表示するには以下のライブラリが必要です

dependencies {
    compile 'com.android.support:support-v4:19.1.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.caverock:androidsvg:1.2.1'
}

また、サンプルにあるMainActivity以外のクラスをコピーしておきます。あとは、Activityなどで以下の様なコードを実行するとSVG画像を表示することができます

GenericRequestBuilder<Uri, InputStream, SVG, PictureDrawable> requestBuilder = Glide.with(this)
        .using(Glide.buildStreamModelLoader(Uri.class, this), InputStream.class)
        .from(Uri.class)
        .as(SVG.class)
        .transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
        .sourceEncoder(new StreamEncoder())
        .cacheDecoder(new FileToStreamDecoder<>(new SvgDecoder()))
        .decoder(new SvgDecoder())
        .diskCacheStrategy(DiskCacheStrategy.SOURCE)
        .error(android.R.drawable.progress_horizontal)
        .placeholder(R.mipmap.ic_launcher)
        .animate(android.R.anim.fade_in)
        .listener(new SvgSoftwareLayerSetter<Uri>());

requestBuilder.load(Uri.parse("http://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg"))
        .into(imageView);