已知小程序 <image /> 支持 svg 图片渲染；但是在开发场景中，如果我们需要修改 svg 图片原有的颜色，往往需要去修改 svg 文件本身。这样修改既不优雅，也不利于 svg 图片的复用。

有没有一种方法可以更加优雅地去修改 svg 图片的颜色呢？

一、可行性探讨

svg 源码修改

既然要在原 svg 文件的基础上修改颜色，让我们先看一下 svg 源码是如何的，下面是一个三角形的 svg 源码：

我们可以发现在源码中，<path> 中的 fill 属性便是我们需要修改的颜色。如果我们能读取源码，修改对应属性，便能修改 svg 图片的颜色了；但开发过程中，我们的 svg 源文件往往是网络资源，并不能直接修改，有没有一种方法可以将 svg 源码直接在小程序进行渲染呢？

svg 源码渲染

小程序原生虽然不支持 <svg> 渲染的，但我们可以通过 background-image 样式属性对 URL 资源进行加载；我们只需要将修改后 svg 源码进行 URL 编码，即可将我们想要的效果渲染出来。

方案总结

1、读取 svg 文件

2、匹配 Hex 字段并进行修改

3、将修改后的 svg 数据进行 URL 编码

4、将 URL 数据通过 background-image 样式属性进行渲染

二、技术实现

调用方式：组件

为方便调用，将其封装自定义组件，组件命名 svg，承接 svg 渲染能力，后续可在此基础上丰富 svg 的能力。

入参：src <string>，colors <string[]>

通过 src 参数传递 svg 图片链接；

svg 图片可能包括多个元素，这个时候就需要我们对不同的元素定义各自的颜色。

默认属性

由于 svg 自身不存在尺寸，我们可以将其宽高同时设置成 100%，这样就可以通过承载其的父元素决定 <svg /> 的渲染尺寸。

三、<svg /> 组件代码

代码片段，点击进入

四、更多功能扩展

自定义 svg 渲染

前面我们修改 svg 图片是通过修改其 fill 属性实现的；更进一步我们完全可以不依赖外部资源，自定义 svg 节点，按照 svg 的规范进行图片的绘制，感兴趣可以尝试尝试。