最近出现了许多新兴的矢量图形格式 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 又缺乏很多功能:
- 「网格渐变」在 Illustrator 、Inkscape 等矢量设计工具中都有的功能,SVG 不支持,并且之前有提案但是没有通过(浏览器开发商不愿意实现)。
- 「z-index」指定图层顺序,SVG 中图层顺序只能是图层的出现顺序,不能用类似 CSS 中的
z-index
指定顺序,这意味着要改变 SVG 的图层顺序是非常高成本的操作。比如在 Moonvy 的画布视图中选中一个图层时把它显示在最顶层不是那么轻松的事。这个功能在 SVG 2.0 的草案里待了很久,至今没有实现。 - 「剖面线(hatching)」在 CAD 领域非常常用的特性,提案也没有通过。
SVG 的未来在哪里
业界对于矢量格式有三大需求:
- 简单而稳定的矢量图形静态格式,它可以像静态图片格式(PNG、JPEG)一样生成后不再需要考虑在不同设备、不同软件中的显示效果
- 高度可编辑的矢量图形描述格式,支持各种矢量效果参数(网格渐变、z-index、剖面线等),可以在不同设计工具中导入导出还能保持可编辑性
- 交互性矢量图形/动画描述格式,支持响应性、动画、交互效果
SVG 企图满足于每一种需求,但因为 W3C 的特性,各方面需求互相掣肘,各方面实现都没有做到令人满意,并且看起来 2022 年也不会有什么改进的希望。 而像 Tinyvg、Micro SVG 这些新的标准,我也不看好会有较大范围的应用,一是他们实现的完成度不够,二是缺少生态支持。或许得有 Figma 这样的设计工具开发商、Flutter 这样新生态(A vector format for Flutter )推出的格式才会有一定的生命力。
链接
- SVG Native
- W3C 可缩放矢量图形 (SVG) - 历史 (1999-2004)
- W3C Mobile SVG Profiles: SVG Tiny and SVG Basic
- Adobe Svg Native Viewer
- A vector format for Flutter (PUBLICLY SHARED)
- COLR — Color Table - 字体中的矢量格式