如何在微信小程序中引入svg？

如何在微信小程序中引入svg？
首先让我们来了解一下我们这个引入前的业务场景：
之前呢，我跟学做了一个vue版的音乐播放器，但是在此之前呢，我自己开发了一款微信版本的微信小程序，
所以呢我就想把一些新特性加入到我之前开发的那个小程序音乐播放器中。比如:这次业务中的圆形进度条。
但是开发过微信小程序的小伙伴应该都知道，我们的官方并没有提供圆形的progress。于是我只能自己动手写了一个自定义组件:progress-circle
先贴上页面代码,我们在分析:

 <view class="progress-circle">
     <!-- <view style="background-image:url({{svg}})" class="svg"> -->
     <view class="progress-background">
         <view class="circle" style="background-image:url({{c}})" />
     </view>
     <view class="progress-bar ">
         <view class="circle" style="background-image:url({{c2}})" />
     </view>
     <!-- </view> -->
     <slot></slot>
 </view>

后来了解到我们可以使用background-image的方式使用svg,初次尝试我先把svg生成data-url的方式写在了css样式中，测试成功。
那么第二个问题来了,我们需要动态更新？而且貌似通过网站生成的data-url好像不简洁而且“比较固定”
接着贴上第二部分代码:

 observers:{
    ['percent'](percent) {
      let {dashOffset,dashArray}=this.data
      dashOffset=(1 -percent) * dashArray
      this.setData({dashOffset})      
    },
    ['radius'](radius){
      let {svg}=this.data
      svg=`'data:image/svg+xml, %3Csvg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" width="${radius}" height="${radius}"%3E%3C/svg%3E'`
      this.setData({svg})

    },
    ['dashOffset'](dashOffset){
    let {c2,dashArray}=this.data
    c2=`'data:image/svg+xml, %3Csvg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle r="45" cx="50" cy="50" fill="transparent" stroke-width="8px" stroke="rgba(82,212,150,0.5)" stroke-dasharray="${dashArray}" stroke-dashoffset="${dashOffset}"/%3E%3C/svg%3E'`
      this.setData({c2})
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    dashArray:Math.PI*90,
    themeColor:"",
    c:`'data:image/svg+xml, %3Csvg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle r="45" cx="50" cy="50" fill="transparent" stroke="rgba(255, 205, 49, 0.5)" stroke-width="8px"/%3E%3C/svg%3E'`,
    c2:"",
    svg:""
  },

我发现除了data-url基本上就是将"<>"转义成了%3C%3E,于是我试着仿写这部分svg代码,进行测试,发现真的如此。到此我们已经能够在微信小程序中引入svg了