SVG简单入门七：扩展阅读-SVG2

目前我们使用的基本上都是SVG1.1版本。虽然SVG2目前还在起草阶段，离具体使用，浏览器兼容还不知道等到猴年马月，但我们可以先浏览一下新特性，

主要特性：

支持声明式的动画特效（CSS3 animation）
1. 这是一项不错的特性，可以解放标签式的动画写法。
2. 顺便动画又存在了另外的可能性，会使SVG的原生动画从D3手上夺回一点空间。
支持引入外部资源，包括样式，脚本，甚至是数据
1. 若是引入数据，需要使用 dataUrl协议规范 https://tools.ietf.org/html/rfc2397
2. 当SVG不允许访问外部资源，或者没有网络时，方法会返回没有接收到数据（代码可能需要实现一个noDataResived 之类的接口）
可以运行脚本，支持 script 标签（这个感觉目前就支持啊，难道是浏览器推动了）
1. 支持和HTML一样的事件，比如 onClick ,onMouseOver 之类的直接嵌入到元素里面。
2. SVG的事件Event对象，也将会和HTML里的事件对象使用同一套（完全一模一样）。
交互，支持SVG能响应用户的任何，包括鼠标键盘，或是其它的输入设备。目前个人想像力水平还达不到会有什么样的神操作。

另外，这些特性是都是有开关的，而且 SVG2 还内置了一些打包好的模式，可以直接使用。

模式	声明式动效	外部资源	运行脚本	交互
动态交互模式	YES	YES	YES	YES
动画模式	YES	YES	NO	NO
安全动画模式	YES	NO	NO	NO
静态模式	NO	YES	NO	NO
安全模式	NO	NO	NO	NO

做搬运工还是很别扭的，我用原文再来一次，我还是感觉原文看着舒服，实际用起来原文更具指导作用。

Mode	declarative animation	external references	script execution	interactivity
Dynamic interactive	YES	YES	YES	YES
Animated	YES	YES	NO	NO
Secure Animated	YES	NO	NO	NO
Static	NO	YES	NO	NO
Secure Static	NO	NO	NO	NO

注意，这些模式会影响到现有的标签或是一些其它设置：

<image> 标签
<iframe> 标签
<use> 标签
动画效果里面的 mark
以 SVG 做为资源的字体

支持“面像对象编程”

这个是构造复杂SVG的一个关键，但鉴于目前使用的SVG都比较简单，很难猜到它后面会怎么样，但它确实给应用程序的编写带来了莫大的优化、简化空间（如果够复杂的话）。

它可以通过 SVG 定义 namespace 与 segment(片断) 来进行组合编程：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- Elements from ParentXML go here -->
  <!-- The following is conforming -->
  <z:svg xmlns:z="http://www.w3.org/2000/svg"
         width="100px" height="100px">
    <z:rect x="0" y="0" width="10" height="10"/>
  </z:svg>
  <!-- More elements from ParentXML go here -->
</ParentXML>

使用优化

其实对于Coder来说，最重要的还是使用优化，大概看了一遍，SVG2 的优化点是相当的多，我只列举一下我觉得比较实用的：

鼠标事件优化（不知道是不是针对透明的ISSUE）
<svg> 标签支持 transform 属性了
去掉了 <title> 和 <desc> 的长度限制
任何场景不推荐使用 <matedata>
未知的标签会转换为 <g> 标签
<symbol>, <marker> 标签支持两个新属性 refX refY 它的值可以是关键字 top/center/bottom, left/center/right
<use> 标签可以使用外部资源，或者是额外文档里面的片段（新面向对象编程特性）
支持 white-space
<style> 标签支持HTML5的属性：media type title 等
<path> 的属性 d 将会成为预置属性，另外优化了弧线
<text>支持CSS3的 TEXT 显示属性： line-height,vertical-align,text-align, text-overflow 等等
去掉了svg:space属性，使用text-space替代
支持外部字体 woff
<tspan> 支持 transforms
支持text放到一个shape 里面，且自动换行。
增加 inline-size 属性
textPath 有非常多的优化，不一一列了。
支持 HTML5的标签： audio, canvas, iframe, video
<image> 支持图片自适应缩放
<image> 支持CSS3,以及CSS4的图片属性 (CSS4的属性有：sylvaing,resolution)
支持多个绘制条件组合成一个 stroke,fill
fill,stroke支持默认颜色 (比如没有取到滤镜时，会fill默认的颜色)
stroke 支持 vector-effect
stroke 支持指定成 inside 或是 outside
增加连接处的 join 方式： arcs，miter
<marker> 有很多的优化，用的比较少不提了
支持 paint-order,渲染顺序，（但只是指定描边和填充的顺序，不是z-index，有点小失望）
支持各种事件，拖拽、滚动等一切HTML5里面有的
支持异步调用script脚本

个人感觉

总结几点：

没有增加新的标签，属性变动少，基本可以无缝升级。
SVG2 的优化还是相当不错的，优化后的自由度灵活度更高。
特别是TEXT文本的优化，相当符合需求。
没有本质性的变化，SVG的地位难以提升。
暂时请不要进行尝试，离使用估计还有时日。

后记：

SVG2规范于 2018-10-04 正式发布，应该与上面所说的八九不离十。想更深入了解的，请直接读正式版本：https://www.w3.org/TR/SVG2/
上文中有提到一点即 <image> 支持 CSS4 的一些特性，关于 CSS4，粗略看了一下，并非整块发布，而是发布了其中的一些子集特性，比如选择器子集，Values and Units Module 子集，以及刚才说的图像等等，估计也要等待所以子集完成后，才会合成CSS4。（对于这些子集，后面会看，有重要的内容可能会发文介绍）