android如何将SVG加载到imageView中

Answer 1

你好兄弟试试这个！

最好的方法是转到 res->drawable->Vector Asset -> 本地文件（SVG、PSD）->从保存位置选择 SVG 文件。

并在您的项目中使用图像

Answer 2

您可以使用 Glide 加载 SVG 图像并将其设置到您的 ImageView 上

有一个示例。

创建

SvgDetector.java

、

SvgDrawableTranscoder.java

、

SvgModule.java

、

SvgSoftwareLayerSetter.java

后，您可以加载 svg 文件：

GenericRequestBuilder<Uri,InputStream,SVG,PictureDrawable>
    requestBuilder = Glide.with(context)
    .using(Glide.buildStreamModelLoader(Uri.class, context), 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.svg_image_view_placeholder)
    .error(R.drawable.error_image)
    .listener(new SvgSoftwareLayerSetter<Uri>());

Uri uri = Uri.parse(svgImageUrl);
requestBuilder
    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
    .load(uri)
    .into(imageView);

Answer 3

依赖关系

//AndroidSVG
implementation 'com.caverock:androidsvg-aar:1.4'

代码

val str = "\"<svg width=\"35\" height=\"35\" viewBox=\"0 0 35 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.48918 13.6276C6.70383 13.0193 7.37699 12.6841 7.98482 12.8979C8.59265 13.1117 8.89133 13.7854 8.67782 14.3938C8.33132 15.3794 8.16683 16.4263 8.16683 17.4949C8.16683 18.572 8.36283 19.64 8.71399 20.6325C8.92864 21.2403 8.59148 21.8766 7.98482 22.0919C7.37699 22.3072 6.70501 22.0065 6.48918 21.3988C6.0505 20.1567 5.8335 18.8386 5.8335 17.4949C5.8335 16.1619 6.05634 14.861 6.48918 13.6276ZM26.3225 14.4302C26.1125 13.8209 26.4438 13.1817 27.0528 12.9709C27.6606 12.76 28.3 13.0547 28.5111 13.6641C28.9311 14.8823 29.1668 16.1806 29.1668 17.4949C29.1668 18.8454 28.9545 20.1511 28.5111 21.3988C28.2941 22.0061 27.6233 22.3448 27.0155 22.1285C26.4088 21.912 26.0705 21.24 26.2863 20.6325C26.641 19.6356 26.8335 18.5775 26.8335 17.4949C26.8335 16.4413 26.6597 15.4037 26.3225 14.4302ZM17.5002 24.4999C18.1445 24.4999 18.6668 23.9772 18.6668 23.3324C18.6668 22.6876 18.1445 22.1649 17.5002 22.1649C16.8558 22.1649 16.3335 22.6876 16.3335 23.3324C16.3335 23.9772 16.8558 24.4999 17.5002 24.4999Z\" fill=\"#88B8E9\"/> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.5 11.0833C10.5 8.82817 12.3282 7 14.5833 7H20.4167C22.6718 7 24.5 8.82817 24.5 11.0833V23.9167C24.5 26.1718 22.6718 28 20.4167 28H14.5833C12.3282 28 10.5 26.1718 10.5 23.9167V11.0833ZM17.5 24.5C18.1443 24.5 18.6667 23.9777 18.6667 23.3333C18.6667 22.689 18.1443 22.1667 17.5 22.1667C16.8557 22.1667 16.3333 22.689 16.3333 23.3333C16.3333 23.9777 16.8557 24.5 17.5 24.5Z\" fill=\"#88B8E9\"/> </svg>\""
val svg = SVG.getFromString(str)
val drawable = PictureDrawable(svg.renderToPicture())
imageView.setImageDrawable(drawable)

Answer 4

您可以使用

Glide

库来实现此目的。默认情况下，

Glide

不支持

SVG

图像解码，但提供了一种使用您自己的

@GlideModule

附加此图像的方法。我正在使用

Glide

版本

4.16.0

，并进行了一些调整。

完整示例项目

这里提供了完整的 kotlin 示例项目： https://github.com/hanscappelle/android-glide-svg-example/tree/kotlin-conversion

它基于

Glide

提供的 SVG 示例项目，但转换为 Kotlin 并在可能的情况下进行了简化。请点击此链接查看原始（非 Kotlin）示例 https://github.com/bumptech/glide/tree/v4.16.0/samples/svg

示例代码

app/build.gradle(.kts)

中的依赖项和 kapt 配置

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.kapt")
}

repositories {
  google()
  mavenCentral()
}

dependencies {
    implementation("com.github.bumptech.glide:glide:4.16.0")
    implementation("com.caverock:androidsvg:1.4")
    kapt("com.github.bumptech.glide:compiler:4.16.0")
}

AppGlideModule

注册

SVGDecoder

@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
}

和最小的

SVGDecoder

实施。请注意，在 4.12 版本的 Glide 示例中添加了尺寸处理，这会破坏图像上设置的

scaleType

。

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

从远程 URI 加载 SVG 图像需要在视图中使用常规

Glide

代码

val svgPath = "https://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg"
val imageView: ImageView = findViewById(R.id.single_image)
Glide.with(baseContext).load(svgPath).into(imageView)

Answer 5

也许这些图书馆可以帮助你

• https://github.com/corouteam/GlideToVectorYou
• https://github.com/ar-android/AndroidSvgLoader
• https://github.com/androidbroadcast/SvgGlidePlugins