Uniapp 中 使用SVG

一、各平台 SVG 支持情况

平台	SVG 支持程度	主要限制
H5	完全支持	无
微信小程序	基本支持	部分属性不支持
支付宝小程序	基本支持	同上
百度小程序	基本支持	同上
字节跳动小程序	基本支持	同上
QQ小程序	基本支持	同上
快应用	部分支持	限制较多
App	完全支持	无

小程序支持的功能

• 基本形状（rect, circle, path 等）
• 路径绘制
• 基本样式（fill, stroke, opacity）
• 渐变（linearGradient, radialGradient）

小程序不支持/受限的功能

• 滤镜效果（filter）
• 复杂的 clip-path
• 部分动画效果
• 外部 SVG 引用（use 标签）

二、推荐使用方案

1. 内联 SVG（兼容性最佳）

<template>
  <view>
    <!-- 直接嵌入SVG代码 -->
    <svg width="100" height="100" viewBox="0 0 24 24">
      <path d="M9 6L15 12L9 18" stroke="#000" fill="none"/>
    </svg>
  </view>
</template>

2. Base64 编码方式

<template>
  <image 
    mode="widthFix" 
    :src="'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6L15 12L9 18" stroke="#000" fill="none"/></svg>')"
  />
</template>

3. 使用 uni-file 引入

<template>
  <image :src="'/static/arrow.svg'" mode="widthFix"/>
</template>