更新记录

1.0.0（2026-05-19）

无

平台兼容性

uni-app x(5.07)

其他

免责声明

• 插件源码无后门。
• 由第三方SDK而导致的任何损失,与作者无关。
• 使用本插件而导致的任何损失,与作者无关。
• 使用该插件即代表同意免责声明。

第三方SDK

• Android com.caverock:androidsvg-aar:1.4
• IOS SVGKit:3.0.0

ohyes-svg

ohyes-svg 是一个 uni-app x UTS 组件，用于在 App 和 Web 中展示 SVG。

组件只使用一个输入属性：src。src 可以是原始 SVG 字符串、远程 SVG 地址、本地文件路径、static 资源路径或 SVG data URL，data URL 支持普通 URL 编码和 base64 编码。

平台支持

• App-Android：原生 View + Canvas，使用 AndroidSVG 渲染
• App-iOS：原生 SVGKFastImageView，使用 SVGKit 渲染

App 端基于 uni-app x 标准 native-view 组件实现，需要 HBuilderX 4.31 或更高版本。。

基础用法

SVG 字符串

<template>
  <ohyes-svg
    style="width: 120px; height: 120px;"
    :src="logoSvg"
  />
</template>

<script setup lang="uts">
const logoSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <rect width="120" height="120" rx="24" fill="#2563eb"/>
  <path d="M31 63l18 18 40-44" fill="none" stroke="#fff" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
</script>

本地 SVG 文件

<ohyes-svg
  style="width: 240rpx; height: 160rpx;"
  src="/static/svg-sample.svg"
/>

HTTPS SVG

<ohyes-svg
  style="width: 120px; height: 120px;"
  src="https://www.w3.org/Icons/SVG/svg-logo.svg"
/>

SVG Data URL

<ohyes-svg
  style="width: 120px; height: 120px;"
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."
/>

属性

宽高

组件宽高由外部样式决定，插件内部不会自动撑开布局。

<ohyes-svg
  style="width: 240rpx; height: 240rpx;"
  :src="svgSrc"
/>

如果不设置宽高，native-view 可能没有可见区域，或显示尺寸不稳定。

方法

使用 ref 时可以调用：

• setSrc(src: string): void：切换 SVG 输入。传入值和当前 src 相同时不会重复解析。
• clear(): void：清空当前 SVG。
• reload(): void：强制重新解析当前 src，适合远程 SVG 内容已变化但 URL 未变化的场景。

注意事项

• 远程 SVG 需要 App 具备网络权限，本插件已声明 Android INTERNET 权限。