文章目录
  1. 1. 主要特性:
  2. 2. 支持“面像对象编程”
  3. 3. 使用优化
  4. 4. 个人感觉
    1. 4.1. 后记:

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

https://svgwg.org/svg2-draft/

主要特性:

  1. 支持 声明式的动画特效(CSS3 animation
    1. 这是一项不错的特性,可以解放标签式的动画写法。
    2. 顺便动画又存在了另外的可能性,可能会使SVG的原生动画从D3手上夺回一点空间。
  2. 支持 引入外部资源,包括样式,脚本,甚至是数据
    1. 若是引入数据,需要使用 dataUrl协议规范 https://tools.ietf.org/html/rfc2397
    2. 当SVG不允许访问外部资源,或者没有网络时,方法会返回没有接收到数据(代码可能需要实现一个noDataResived 之类的接口)
  3. 可以 运行脚本,支持 script 标签(这个感觉目前就支持啊,难道是浏览器推动了)
    1. 支持和HTML一样的事件,比如 onClick ,onMouseOver 之类的直接嵌入到元素里面。
    2. SVG的事件Event对象,也将会和HTML里的事件对象使用同一套(完全一模一样)。
  4. 交互,支持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

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

  1. <image> 标签
  2. <iframe> 标签
  3. <use> 标签
  4. 动画效果里面的 mark
  5. 以 SVG 做为资源的字体

支持“面像对象编程”

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

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

1
2
3
4
5
6
7
8
9
10
11
<?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 的优化点是相当的多,我只列举一下我觉得比较实用的:

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

个人感觉

总结几点:

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

后记:

  1. SVG2规范于 2018-10-04 正式发布,应该与上面所说的八九不离十。想更深入了解的,请直接读正式版本:https://www.w3.org/TR/SVG2/
  2. 上文中有提到一点即 <image> 支持 CSS4 的一些特性,关于 CSS4,粗略看了一下,并非整块发布,而是发布了其中的一些子集特性,比如选择器子集Values and Units Module 子集 ,以及刚才说的 图像等等,估计也要等待所以子集完成后,才会合成CSS4。(对于这些子集,后面会看,有重要的内容可能会发文介绍)
文章目录
  1. 1. 主要特性:
  2. 2. 支持“面像对象编程”
  3. 3. 使用优化
  4. 4. 个人感觉
    1. 4.1. 后记: