SVG前奏篇｜SVG的秘密起源

～～～～文内所含图片来源于：创客贴 — 新媒体配图—公众号封面首图场景～～～～

在Web的早期，HTML的不同格式和扩展出现了爆炸式的发展。从这爆炸式的发展中，凸显出了Web的矢量图形格式是很有用的。于是 Chris Lilley 在1996年撰写了一份矢量图形的一般要求文档。到1998年，情况有所好转，当年Web矢量图形领域向W3C提交了六份竞争性文件：

• 《 Web Schematics 》，来自 CCLRC 《web 原理图》
• 《 PGML 》，来自 Adobe，IBM，Netscape 和 Sun
• 《 VML 》，由 Autodesk，Hewlett-Packard，Macromedia 和 Microsoft 提供
• 《 Hyper Graphics Markup Language 》，由 Orange，PCSL 和 PRP 提供 《 超级图形标记语言 》
• 《 WebCGM 》，来自波音，CCLRC，Inso，JISC和 Xerox
• 《 DrawML 》，来自 Excosoft

不同的提交者对于如何处理他们的规范有不同的想法。Adobe 等人说 PGML 只是一个提议，他们很乐意让 W3C 以任何方式对其进行修改。微软则表示，VML 是一个已经实现和发布的产品的文档，并且 W3C 没有被授权进行任何更改。

一、SVG 的诞生

VML 的影响

• 矢量标记语言（VML）作为 PowerPoint 加载项起源于 Microsoft 的 Office 组，并作为 Internet Explorer 中的ActiveX 控件提供。VML 的元素类型和压缩路径语法影响了 SVG。

• SVG 工作组通过未压缩和 gzip 压缩对简单 XML 文件进行了一些测试，发现即使压缩，紧凑路径语法在文件大小上也有很大的不同，因此采用了微语法方法，尽管并不完全相同。

PGML 的影响

• 精确图形标记语言（PGML）是 2D 可缩放图形语言，它使用与 Adobe 的 PostScript 和 Portable Document Format (PDF) 格式相同的图像模型。

• 它在坐标系和变换，色彩空间以及在文本和字体方面的某种程度上，对 SVG 的设计影响最大。

其他影响

• CSS 和 国际化方面的经验 是将文本作为'text'元素的子内容，而不是将无意义的数字作为元素内容，而是将其隐藏在属性中的强大动力。

• “tref” 元素受链接包含概念的影响。 “a” 元素显然受到了 HTML 的影响，尽管它具有不同的内容模型和嵌套链接的能力; 它还是受到了新兴的 XLink 规范的影响。

驱动程序和部署

在 SVG 的发展过程中，最早期的影响力是 W3C 的 Chris Lilley 和 Adobe 的 Jon Ferraiolo。

Adobe 制作了流行的SVG 查看器（Adobe SVG Viewer），并在其某些产品（例如 Illustrator ）中增加了支持。近年来，SVG 已在多种浏览器中本地实现，包括Opera，Firefox 和 WebKit（Safari 和 Google Chrome ）。

2009年，Microsoft 宣布它也将在 Internet Explorer 9 中原生支持 SVG ，从而完善了支持 SVG 的主要浏览器，并使SVG 全面发展。

二、版本迭代

版本 1.X 演变

• SVG 1.0 于 2001 年 9 月 4 日成为 W3C 推荐标准。

• SVG 1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。

  • SVG 1.1 规范进行了模块化，以允许将子集定义为配置文件。除此之外，SVG 1.1和SVG 1.0之间几乎没有什么区别。

  • SVG Tiny 和 SVG Basic（移动SVG配置文件）在2003年1月14日成为W3C建议书。它们被描述为SVG 1.1的配置文件。

• SVG Tiny 1.2 于2008年12月22日成为W3C推荐标准。最初是作为计划中的SVG Full 1.2（此后不再支持SVG 2）的概要起草的，但后来被重构为独立规范。通常支持不佳。

• SVG 1.1 第二版（包括所有勘误表和说明），在2011年8月16日发布，但没有区别盂原始SVG 1.1的新功能。

• SVG Tiny 1.2 Portable / Secure，是2020年7月29日作为IETF草案标准引入的 SVG Tiny 1.2配置文件的更安全子集。也称为SVG Tiny P / S。SVG Tiny 1.2 Portable / Secure是BIMI草案标准的要求。

版本 2.X 演变

• SVG 2.0 弃用了SVG 1.1的某些功能，并合并了HTML5和Web开放字体格式的新功能

  • 例如，SVG 2.0 删除了几个字体元素，例如 glyph 和 altGlyph（被WOFF字体格式替换）。

  • xml:space 不推荐使用该属性，而推荐使用CSS。

  • 已添加 HTML5 功能，例如 translate 和 data-* 属性。

  • SVG Tiny 1.2 中的文本处理功能被标注为要包含的，但尚未在文本中正式化。引入了其他1.2的功能，但SVG 2.0并不是SVG tiny 1.2的超集。

该草案已于2016年9月15日到达候选推荐阶段。最新草案于2020年5月26日发布。

三、SVG 1.1规范定义的14个功能区域

• 1、Path（路径）
• 2、Basic shapes（基本形状）
• 3、Text（文本）
• 4、Painting（绘画）
• 5、Color（颜色）
• 6、Gradients and patterns（渐变和图案）
• 7、Clipping, masking and compositing（剪切、遮罩和合成）
• 8、Filter effects（滤镜效果）
• 9、Interactivity（互动性）
• 10、Linking（链接）
• 11、Scripting（脚本）
• 12、Animation（动画）
• 13、Fonts（字型）
• 14、Metadata（元数据）

～～～～图片水印工具：创客贴 — 图片编辑场景～～～～

参考文献

• [1] Secret Origin of SVG
• [2] Scalable Vector Graphics
• [3] Scalable Vector Graphics (SVG) 1.1 (Second Edition)