内联 SVG

深藏阁楼爱情的钟 2021-09-15 07:28 380阅读 0赞

## 什么是SVG？ ##

*  SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
 *  SVG 用于定义用于网络的基于矢量的图形
 *  SVG 使用 XML 格式定义图形
 *  SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

*  SVG 是万维网联盟的标准

## SVG优势 ##

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

*  SVG 图像可通过文本编辑器来创建和修改
 *  SVG 图像可被搜索、索引、脚本化或压缩
 *  SVG 是可伸缩的
 *  SVG 图像可在任何的分辨率下被高质量地打印

*  SVG 可在图像质量不下降的情况下被放大
 *  ![70][]

## SVG 与 Canvas两者间的区别 ##

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

--------------------

## Canvas 与 SVG 的比较 ##

下表列出了 canvas 与 SVG 之间的一些不同之处。

<table style="border:0px;margin:4px 0px;padding:0px;width:729.091px;color:rgb(51,51,51);font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', Arial, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(246,244,240);"> 
   <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">Canvas</th> 
   <th align="left" style="border-color:rgb(85,85,85);margin:0px;padding:3px;font-size:12px;color:rgb(255,255,255);background-color:rgb(85,85,85);vertical-align:top;">SVG</th> 
  </tr> 
  <tr style="border-top:0px;margin:0px;padding:0px;background-color:rgb(255,255,255);"> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;"> 
    <ul style="border:0px;margin-top:1em;margin-bottom:1em;line-height:18.2px;list-style:none;"> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">依赖分辨率</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">不支持事件处理器</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">弱的文本渲染能力</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">能够以 .png 或 .jpg 格式保存结果图像</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">最适合图像密集型的游戏，其中的许多对象会被频繁重绘</li> 
    </ul></td> 
   <td style="border-color:rgb(212,212,212);margin:0px;padding:7px 5px;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;"> 
    <ul style="border:0px;margin-top:1em;margin-bottom:1em;line-height:18.2px;list-style:none;"> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">不依赖分辨率</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">支持事件处理器</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">最适合带有大型渲染区域的应用程序（比如谷歌地图）</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</li> 
     <li style="border:0px;margin-top:0px;margin-bottom:1em;margin-left:1em;padding:0px 0px 0px 1.5em;line-height:1.5em;background-image:url(&quot;./assets/img/bullet.png&quot;);background-repeat:no-repeat;background-position:left .5em;">不适合游戏应用</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

![70 1][]

[70]: /images/20210813/5ef5518edd2c4dedbbba0410afdf698b.png
[70 1]: /images/20210813/a7d04aab3b794dd4b3c23b6a41e9860d.png