uni-app 如何使用svg

最新推荐文章于 2025-03-30 20:38:17 发布

前端布道人

最新推荐文章于 2025-03-30 20:38:17 发布

阅读量1.2w

点赞数 27

分类专栏：前端面试题前端跨平台开发前端杂货铺文章标签： uni-app

本文链接：https://blog.csdn.net/BradenHan/article/details/138095399

版权

本文详细介绍了如何在uni-app中使用SVG，包括直接引用SVG文件、通过base64编码、iconfont服务、自定义SVG组件以及实现SVG动画的方法。适合开发者根据项目需求选择合适的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。

下面分别举例说明：

虽然uni-app本身可能不直接支持<svg>标签，但可以通过以下方式间接使用：

a. 作为Image组件的源

将SVG文件作为静态资源放入项目中，然后通过<image>组件的src属性引用。这种方法适用于静态SVG图像。

示例：

<!-- 在.vue文件的template部分 -->
<template>
  <view>
    <image :src="'/static/images/my-svg.svg'" mode="aspectFit"></image>
  </view>
</template>

确保SVG文件（例如my-svg.svg）已放置在项目的static/images/目录下。

b. 作为Background Image

如果需要将SVG作为背景图，可以将其转换为base64编码，然后在CSS中使用background-image属性引用。

示例：

<!-- 在.vue文件的template部分 -->
<template>
  <view