How to load svg image to image view using Glide

Question

I have a SVG image in this URL. svg image link . I want to load this SVG image from url into image view. I have used Glide to load this SVG image to image view.

Here's the Glide Code:

 Glide.with( context)
                .setDefaultRequestOptions(new RequestOptions().timeout(60000))
                .load( "https://restcountries.eu/data/zwe.svg" )
                .thumbnail( 0.5f )
                .override( 200, 200 )
                .diskCacheStrategy( DiskCacheStrategy.ALL )
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        progressLayout.setVisibility(View.GONE);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        progressLayout.setVisibility(View.GONE);
                        flag_iv.setEnabled(true);
                        return false;
                    }

                })
                .into( flag_iv );

XML Code:

<ImageView
     android:src="@drawable/icon_app"
     android:id="@+id/flag_iv"
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:layout_marginTop="8dp"
     android:layout_marginBottom="8dp"
 />

But it doesn't get loaded. It shows the below error.

W/Glide: Load failed for https://restcountries.eu/data/afg.svg with size [100x100]

I have used png/jpg images using Glide. It worked Great. Why SVG images are not loading using Glide. I searched Stack Overflow. Everyone suggesting different Libraries. But they are outdated. I want to achieve it using Glide. Please help me with some solutions.

Answer 1

By default Glide won't handle SVG image format. SVG is an XML based image format that requires parsing.

You can find an example from Glide at https://github.com/bumptech/glide/tree/v4.10.0/samples/svg on how to create an AppGlideModule that registers SVGDecoder to perform that XML parsing.

Once that is in place (note you'll need kapt for kotlin or annotationProcessor for Java) you can use Glide the way you've used it in your code with a minimal of:

Glide.with(baseContext).load(svgPath).into(imageView)

Example code

@GlideModule
class SvgModule : AppGlideModule() {
    override fun registerComponents(context: Context, glide: Glide, registry: Registry) {
        registry
            .register(SVG::class.java, PictureDrawable::class.java, SvgDrawableTranscoder())
            .append(InputStream::class.java, SVG::class.java, SvgDecoder())
    }

    // Disable manifest parsing to avoid adding similar modules twice.
    override fun isManifestParsingEnabled() = false
}

class SvgDecoder : ResourceDecoder<InputStream, SVG> {
    override fun handles(source: InputStream, options: Options) = true

    @Throws(IOException::class)
    override fun decode(source: InputStream, width: Int, height: Int, options: Options): Resource<SVG>? {
        return try {
            val svg = SVG.getFromInputStream(source)
            SimpleResource(svg)
        } catch (ex: SVGParseException) {
            throw IOException("Cannot load SVG from stream", ex)
        }
    }
}

class SvgDrawableTranscoder : ResourceTranscoder<SVG?, PictureDrawable> {
    override fun transcode(toTranscode: Resource<SVG?>, options: Options): Resource<PictureDrawable>? {
        val svg = toTranscode.get()
        val picture = svg.renderToPicture()
        val drawable = PictureDrawable(picture)
        return SimpleResource(drawable)
    }
}

I also have this example project at https://github.com/hanscappelle/android-glide-svg-example and some more information on the required steps in my answer to this SO question android how to load SVG into imageView

Next steps

If you're looking at the latest example project from Glide there is some size handling added that can cause issues with scaleType set to your image view. For that look here Image size too small when loading SVG with Glide

You probably also want to look into caching and other configuration options, see this info from Glide as a starting point https://bumptech.github.io/glide/doc/configuration.html

Answer 2

You can use the Glide To Vector,

repo : https://github.com/corouteam/GlideToVectorYou

and to load svg into imageview you can use:

GlideToVectorYou
                .init()
                .with(this)
                .withListener(new GlideToVectorYouListener() {
                    @Override
                    public void onLoadFailed() {
                        Toast.makeText(context, "Load failed", Toast.LENGTH_SHORT).show()
                    }

                    @Override
                    public void onResourceReady() {
                        Toast.makeText(context, "Image ready", Toast.LENGTH_SHORT).show()
                    }
                })
                .setPlaceHolder(placeholderLoading, placeholderError)
                .load(IMAGE_URL, imageview);