都 2022 年了，SVG 的未来在哪里

都 2022 年了，SVG 的未来在哪里

yArna
2022/01/10
开发SVG

最近出现了许多新兴的矢量图形格式 SVG 的替代品，比如 Tinyvg、IconVG、Micro SVG，这些竞品不约而同的出现，反应出贵为 Web 标准之一的 SVG 格式的在很多场景下的尴尬之处。 我想大部分 SVG 的设计师其实并没有感知到 SVG 的不足，但对于相关的开发者，就可能会感觉到 SVG 有不少槽点

SVG 太复杂了

SVG 名字叫什么？「Scalable Vector Graphics: 可缩放矢量图形」，作为一个矢量图形标准，现在的 SVG 已经和它的名字已经相去甚远了，它现在不仅包括了矢量图形还包含了动画、滤镜、交互、链接、远程资源加载、 嵌入 HTML、 CSS、视频播放、JavaScript 等等等功能，对于要实现一个 SVG 渲染器的人来说，实在是过于复杂了，所以不少想要实现 SVG 渲染器的人最后都想干脆实去做一个新的格式反而更简单（比如 Tinyvg、Micro SVG），除了浏览器，应该不会有一个全功能的 SVG 渲染器了（并且不同浏览器实现的完成度也不一样）。

SVG 缺乏一致性

正因为 SVG 实在太过复杂，所以作为一个标准在落地实现中出现了许许多多的子集，上你能用到的 SVG 基本都是 SVG 的子集。正因如此一个 SVG 图片在不同设备、软件中很可能显示的不一样，设计师应该会常常发现同一个 SVG 导入到 Figma、Sketch、Photoshop 后可能相互都会不一样

  • SVG 1.1
    SVG 的老版本，目前大部分 SVG 渲染器都只支持 SVG 1.1，
  • SVG Tiny 和 SVG Basic
    SVG Tiny 和 SVG Basic 是诺基亚分别为了手机和 PAD 设备对 SVG 1.1 的裁剪，它应该是最早在移动设备上使用的 SVG 格式了，（在 2004 年的塞班 S60 的手机 320 x 240 的手机上使用矢量格式作为图标还真是很有前瞻性的），这个 2 个标准的问题是在现在看来并不实用， SVG Tiny 不支持渐变、剪切路径、字体支持也很差，而 SVG Basic 虽然支持支持的多一些，但是还是不够简单（例如动画要支持）。
  • SVG OpenType 字体标准 OpenType 中为了彩色字体（比如 Emoji）而裁剪的 SVG 标准
  • SVG Native
    这是最新的一版 SVG 1.1 剪裁，它删除动画、交互性、链接、远程资源加载、脚本和 CSS 等等功能，基本上沿用 SVG OpenType

SVG 特性不足

前面说到 SVG 太复杂、功能太多，当对于 SVG 的老本行：矢量图形，SVG 又缺乏很多功能：

网格渐变
网格渐变
  • 「z-index」指定图层顺序，SVG 中图层顺序只能是图层的出现顺序，不能用类似 CSS 中的 z-index 指定顺序，这意味着要改变 SVG 的图层顺序是非常高成本的操作。比如在 Moonvy 的画布视图中选中一个图层时把它显示在最顶层不是那么轻松的事。这个功能在 SVG 2.0 的草案里待了很久，至今没有实现。
  • 「剖面线（hatching）」在 CAD 领域非常常用的特性，提案也没有通过。
剖面线（hatching）
剖面线（hatching）

SVG 的未来在哪里

业界对于矢量格式有三大需求：

  • 简单而稳定的矢量图形静态格式，它可以像静态图片格式（PNG、JPEG）一样生成后不再需要考虑在不同设备、不同软件中的显示效果
  • 高度可编辑的矢量图形描述格式，支持各种矢量效果参数（网格渐变、z-index、剖面线等），可以在不同设计工具中导入导出还能保持可编辑性
  • 交互性矢量图形/动画描述格式，支持响应性、动画、交互效果

SVG 企图满足于每一种需求，但因为 W3C 的特性，各方面需求互相掣肘，各方面实现都没有做到令人满意，并且看起来 2022 年也不会有什么改进的希望。 而像 Tinyvg、Micro SVG 这些新的标准，我也不看好会有较大范围的应用，一是他们实现的完成度不够，二是缺少生态支持。或许得有 Figma 这样的设计工具开发商、Flutter 这样新生态（A vector format for Flutter ）推出的格式才会有一定的生命力。

链接

去推特留言