使用 Glide 加载 SVG 图片：配置、实现与常见问题解决-java教程-PHP中文网

使用 Glide 加载 SVG 图片：配置、实现与常见问题解决

心靈之曲

发布： 2025-08-08 16:32:12

原创

939人浏览过

使用 glide 加载 svg 图片：配置、实现与常见问题解决

本文档旨在指导开发者如何使用 Glide 库在 Android 应用中加载 SVG 图片。内容涵盖 Glide 的配置、SVG 支持模块的集成、加载 SVG 图片的示例代码，以及解决常见问题的方案，帮助开发者顺利实现 SVG 图片的加载和显示。

Glide 与 AndroidSVG 集成：加载 SVG 图片的完整指南

Glide 是一个强大的 Android 图片加载库，可以轻松地从各种来源加载、缓存和显示图片。虽然 Glide 本身并不直接支持 SVG 格式，但通过集成 AndroidSVG 库，我们可以让 Glide 具备加载和显示 SVG 图片的能力。

1. 添加依赖

首先，需要在 build.gradle 文件中添加必要的依赖项。除了 Glide 库本身，还需要添加 AndroidSVG 库以及 Glide 的注解处理器。

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.14.2'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
    implementation 'com.caverock:androidsvg-aar:1.4' // AndroidSVG
}

登录后复制

注意: 确保 annotationProcessor 使用与 implementation 相同的 Glide 版本。

2. 创建 SVG 支持模块

为了让 Glide 能够处理 SVG 图片，我们需要创建几个自定义类：

SvgDecoder: 解码器，负责将 SVG 数据转换为 SVG 对象。
SvgDrawableTranscoder: 转换器，负责将 SVG 对象转换为 PictureDrawable 对象，以便 Glide 可以显示它。
SvgModule: Glide 模块，用于注册 SVG 解码器和转换器。

以下是这些类的示例代码（参考 Glide 官方示例）：

SvgDecoder.java

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

import com.bumptech.glide.load.Options;
import com.bumptech.glide.load.ResourceDecoder;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.resource.SimpleResource;
import com.caverock.androidsvg.SVG;
import com.caverock.androidsvg.SVGParseException;

import java.io.IOException;
import java.io.InputStream;

public class SvgDecoder implements ResourceDecoder<InputStream, SVG> {

    @Override
    public boolean handles(InputStream source, Options options) {
        // TODO: Consider adding a way to check if the InputStream is SVG.
        // We could check the file extension, or even more reliably check the XML header.
        return true;
    }

    @Override
    public Resource<SVG> decode(InputStream source, int width, int height, Options options)
            throws IOException {
        try {
            SVG svg = SVG.getFromInputStream(source);
            return new SimpleResource<>(svg);
        } catch (SVGParseException e) {
            throw new IOException("Cannot load SVG from stream", e);
        }
    }
}

登录后复制

SvgDrawableTranscoder.java

import android.graphics.Picture;
import android.graphics.drawable.PictureDrawable;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.bumptech.glide.load.Options;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.resource.SimpleResource;
import com.bumptech.glide.load.resource.transcode.ResourceTranscoder;
import com.caverock.androidsvg.SVG;

public class SvgDrawableTranscoder implements ResourceTranscoder<SVG, PictureDrawable> {

    @Nullable
    @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);
    }
}

登录后复制

SvgModule.java

import android.content.Context;
import android.graphics.drawable.PictureDrawable;

import androidx.annotation.NonNull;

import com.bumptech.glide.Glide;
import com.bumptech.glide.Registry;
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;
import com.caverock.androidsvg.SVG;

import java.io.InputStream;

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

    // Disable manifest parsing to avoid adding similar modules twice.
    @Override
    public boolean isManifestParsingEnabled() {
        return false;
    }
}

登录后复制

注意: @GlideModule 注解是必须的，它告诉 Glide 框架这是一个 Glide 模块。

3. 使用 Glide 加载 SVG

完成以上步骤后，就可以使用 Glide 加载 SVG 图片了。需要使用 GlideApp (而不是 Glide)，GlideApp 是由注解处理器根据 SvgModule 自动生成的。

import android.widget.ImageView;
import com.bumptech.glide.load.DataSource;
import com.bumptech.glide.load.engine.GlideException;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.ImageViewTarget;
import com.bumptech.glide.request.target.Target;

import androidx.annotation.Nullable;

// 假设 thumbnailImageView 是你的 ImageView 控件
ImageView thumbnailImageView = findViewById(R.id.thumbnailImageView);

GlideApp.with(thumbnailImageView.getContext())
    .as(PictureDrawable.class)
    .load("https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg")
    .listener(new RequestListener<PictureDrawable>() {
        @Override
        public boolean onLoadFailed(@Nullable GlideException e, Object model,
                                    Target<PictureDrawable> target, boolean isFirstResource) {
            // 加载失败处理
            return false;
        }

        @Override
        public boolean onResourceReady(PictureDrawable resource, Object model,
                                       Target<PictureDrawable> target, DataSource dataSource,
                                       boolean isFirstResource) {
            // 加载成功处理
            return false;
        }
    })
    .into(thumbnailImageView);

登录后复制

4. 常见问题及解决方案

onLoadFailed 回调被触发: 检查是否正确添加了 AndroidSVG 依赖和 Glide 注解处理器。确保 GlideApp 被正确使用。检查 SVG 文件 URL 是否有效并且可以访问。
图片显示不正确: 确保 ImageView 的 layerType 设置正确。对于复杂的 SVG 图片，可能需要将 layerType 设置为 LAYER_TYPE_SOFTWARE。可以在 onResourceReady 回调中设置：

@Override
public boolean onResourceReady(PictureDrawable resource, Object model,
                               Target<PictureDrawable> target, DataSource dataSource,
                               boolean isFirstResource) {
    ImageView view = ((ImageViewTarget<?>) target).getView();
    view.setLayerType(ImageView.LAYER_TYPE_SOFTWARE, null);
    return false;
}

登录后复制

编译错误：找不到 GlideApp: 确保在 build.gradle 中添加了 annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2' 并且已经成功构建项目。 GlideApp 是由注解处理器自动生成的，如果缺少注解处理器或构建失败，则无法生成。
占位符错误：Bitmap missing src attribute: 某些占位符可能会与 SVG 加载冲突。暂时移除占位符进行测试，如果问题解决，则需要更换合适的占位符资源。