Does Glide Have a Method for Loading Both Png and Svg

Does Glide have a method for loading both PNG and SVG?

You can use Glide & AndroidSVG together to achieve your goal.

There is sample from Glide for SVG.Sample Example

Setup RequestBuilder

requestBuilder = Glide.with(mActivity)
    .using(Glide.buildStreamModelLoader(Uri.class, mActivity), InputStream.class)
    .from(Uri.class)
    .as(SVG.class)
    .transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
    .sourceEncoder(new StreamEncoder())
    .cacheDecoder(new FileToStreamDecoder<SVG>(new SvgDecoder()))
    .decoder(new SvgDecoder())
    .placeholder(R.drawable.ic_facebook)
    .error(R.drawable.ic_web)
    .animate(android.R.anim.fade_in)
    .listener(new SvgSoftwareLayerSetter<Uri>());

Use RequestBuilder with uri

Uri uri = Uri.parse("http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg");
requestBuilder
    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
    // SVG cannot be serialized so it's not worth to cache it
    .load(uri)
    .into(mImageView);

This way you can achieve your goal. I hope this is helpful.

Image becomes blurry when loading SVG with Glide

After upgrading to glide v4 the problem has gone. Now I'm using the following code for loading svg:

      GlideApp.with(context)
            .as(PictureDrawable.class)
            .transition(withCrossFade())
            .fitCenter()
            .listener(new SvgSoftwareLayerSetter())
            .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.RESOURCE))
            .load(uri).into(imageView);

And in my AppGlideModule I have:

@Override
public void registerComponents(@NonNull Context context, @NonNull Glide glide, Registry registry) {
    registry.register(SVG.class, PictureDrawable.class, new SvgDrawableTranscoder())
            .prepend(SVG.class, new SvgEncoder())
            .append(InputStream.class, SVG.class, new SvgDecoder());
}

SvgDrawableTranscoder converts SVG to PictureDrawable with one simple method:

public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, PictureDrawable> {

    @Override
    public Resource<PictureDrawable> transcode(@NonNull Resource<SVG> toTranscode, @NonNull Options options) {
        SVG svg = toTranscode.get();
        Picture picture = svg.renderToPicture();
        PictureDrawable drawable = new PictureDrawable(picture);
        return new SimpleResource<>(drawable);
    }
}

And that's how I implemented SvgEncoder class:

public class SvgEncoder implements ResourceEncoder<SVG>{
    @NonNull
    @Override
    public EncodeStrategy getEncodeStrategy(@NonNull Options options) {
        return EncodeStrategy.SOURCE;
    }

    @Override
    public boolean encode(@NonNull Resource<SVG> data, @NonNull File file, @NonNull Options options) {
        try {
            SVG svg = data.get();
            Picture picture = svg.renderToPicture();
            picture.writeToStream(new FileOutputStream(file));
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
}

How to load svg image to image view using Glide

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);

Glide is not loading joeschmoe avatars into ImageView

I checked this joeschmoe.io website and did an inspect element in my browser. the image is not a bitmap, it is SVG image. to load svg with glide i suggest to look at this link.

Image size too small when loading SVG with Glide

I decided to open this question as an issue on the libs repository, and then I was able to fix the problem.

As it turned out, the problem was related to my SVG having a fixed size, so to fix it I had to modify my SvgDecoder.decode method, and add those three lines:

svg.setDocumentWidth(width);
svg.setDocumentHeight(height);
svg.setDocumentPreserveAspectRatio(PreserveAspectRatio.STRETCH);

The method now looks like this:

public Resource<SVG> decode(InputStream source, int width, int height) throws IOException {
    try {
        SVG svg = SVG.getFromInputStream(source);

        svg.setDocumentWidth(width);
        svg.setDocumentHeight(height);
        svg.setDocumentPreserveAspectRatio(PreserveAspectRatio.STRETCH);

        return new SimpleResource<>(svg);
    } catch (SVGParseException ex) {
        throw new IOException("Cannot load SVG from stream.", ex);
    }
}

Now it's working as it should.

How to load remote svg files with Picasso library

You can use a library called GlideToVectorYou which uses Glide internally.

fun ImageView.loadSvg(url: String?) {
    GlideToVectorYou
        .init()
        .with(this.context)
        .setPlaceHolder(R.drawable.loading, R.drawable.actual)
        .load(Uri.parse(url), this)
}

or You can also use Coil library to load svg. Just add these lines in build.gradle

// ... Coil (https://github.com/coil-kt/coil)
implementation("io.coil-kt:coil:0.12.0")
implementation("io.coil-kt:coil-svg:0.12.0")

Then Add an extension function

fun AppCompatImageView.loadSvg(url: String) {
    val imageLoader = ImageLoader.Builder(this.context)
        .componentRegistry { add(SvgDecoder(this@loadSvg.context)) }
        .build()

    val request = ImageRequest.Builder(this.context)
        .crossfade(true)
        .crossfade(500)
        .data(url)
        .target(this)
        .build()

    imageLoader.enqueue(request)
}

Then call this method in your activity or fragment

your_image_view.loadSvg("your_file_name.svg")

---

Related Topics