uniapp 如何使用svg文件进行开发

在uniapp中如何正确引入和使用SVG文件进行开发？我尝试直接通过image标签引用SVG文件，但部分机型显示异常。另外，是否需要通过特殊组件或转换工具处理SVG文件？求具体实现方法和注意事项。

2 回复

在uniapp中使用SVG文件，可以将其转为base64编码，或使用image标签直接引入。也可以将SVG代码内联到template中，通过修改样式实现自定义效果。


在 UniApp 中使用 SVG 文件进行开发时，由于平台兼容性限制，不能直接使用 <svg> 标签。以下是几种常用方法：

1. 转为 Base64 格式

将 SVG 文件转换为 Base64 编码，作为图片使用：

<image src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PC9zdmc+" />
  • 优点：跨平台兼容性好。
  • 缺点：文件体积稍大，不易动态修改样式。

2. 转为 CSS Background

将 SVG 转为 Base64 后，通过 CSS 设置背景：

.icon {
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PC9zdmc+');
}

<view class="icon"></view>

3. 使用第三方组件库

部分 UI 库（如 uView）支持 SVG 图标组件，可参考其文档使用。

4. 转换为字体图标（推荐）

通过工具（如 Iconfont）将 SVG 转为字体文件（如 .ttf），在 UniApp 中引入：

  • 下载字体文件，放入 static/fonts 目录。
  • 在 App.vue 中全局引入：
    [@font-face](/user/font-face) {
  font-family: 'iconfont';
  src: url('/static/fonts/iconfont.ttf') format('truetype');
}
.icon {
  font-family: 'iconfont';
}
  • 使用：
    <text class="icon">&#xe001;</text>
  • 优点：轻量、可缩放、颜色可调。

5. 渲染为 Canvas

复杂场景下，可用 uni-canvas 动态绘制 SVG（需手动解析 SVG 路径）。

注意事项：

  • 避免直接使用 <svg> 标签，部分平台不支持。
  • 优先选择字体图标或 Base64 方式，兼容性最佳。
  • 动态修改 SVG 颜色时，字体图标或 Base64（内联 CSS）更灵活。

根据需求选择合适方案，字体图标适用于常用图标，Base64 适用于简单静态图形。

回到顶部