FinClip小程序里如何安全使用SVG

网上零零散散有一些关于在小程序中如何使用SVG的内容，但不是语焉不详，就是信息不完整。在此整理一下，供哪怕是此前从来没有接触过SVG的开发者也可以参考，迅速利用。首先SVG可以被视为一种DSL（Domain Specific Language），也就是说它并不仅仅是JPEG、PNG、GIF之外的又一种图片格式，它还是一种“代码”；也因此，它既有无比的潜力让开发者发挥创意作出有意思的应用，它也有潜在安全风险。在小程序中，起码至目前为止，它的使用方式和在普通网页并不完全一样。

什么是SVG

SVG是Scalable Vector Graphics的缩写。它：

• 用于定义矢量图
• 是一种XML文本
• 所定义的每一个元素（Element）及其属性（Attribute）均可以支持动画
• 是W3C推荐的开放标准
• 能与其他W3C标准如DOM、XSL等结合使用
• 有以下的好处：
  • 文件能用文本编辑器编辑，虽然文件后缀是svg，但和JPG、PNG、GIF等不是一回事，而是一种XML格式的文本
  • SVG图形内容，能被索引、搜索、脚本化操作处理、压缩。例如Google就明确声明，它的网络爬虫会索引SVG图形的文本内容，因此用户可以通过SEO加以利用
  • 矢量图放大缩小不失真

以下的svg描述了一个多边形：

SVG图形是如何被引用至网页中的

第一种，也是最简单直观的方式，即把svg后缀的文件视作为和PNG、JPEG、GIF类似的图片：

第二种，当嵌入的svg文件需要引用外部资源（例如字体、脚本、其他bitmap类型的二进制图片或者其他svg），或者对内容有一定的交互和处理，标签无法支持，这时可以采用