小象

SVG兴衰史

原文链接: blog.siliconpublishing.com

1998的一天, 一位老同事来到我在贝塔斯曼集团公司的办公室。此时她已去Adobe公司工作,她向我介绍了一项全新的技术,PGML,又称“精密图像标识语言”,是一种具有Adobe特点的用于矢量图形的XML。她知道我一定会感兴趣。Jon Warnock对PGML描述如下:

对于精确定义的需求正在日益增长,PGML方案可以满足这样的需求,让Web社区成员得以在网络上轻便可靠地发布、控制、交互处理 Web矢量图像。”

我彻底为之倾倒,从那时起,我就紧紧追随着基于XML的矢量图形标准。PGML(主要来自Adobe)、VML(主要来自微软)以及其他类似成果(Web Schematics、超图像标识语言、WebCGM以及DrawML)很快融合成一个“真正的”W3C标准,名为“可缩放矢量图形”(SVG)。它可以在网络浏览器中提供交互式矢量图形格式,当时还是Netscape Navigator 4.7和Internet Explorer 5的时代,要想实现这一点只能通过 Macromedia Flash。

2000年:一切显而易见

是什么让SVG如此不同凡响?它几乎可被视为“用于网络的PostScript”,因此Adobe在它初露头角之时就进行扶持显然是合情合理的:有了SVG(就像有了PostScript),就可以用矢量形式来描述艺术,这种方法比使用栅格图像的效率要高得多(“可扩展性”自然也更强)。

Vector vs. Raster

此外还有更酷的地方:不同于PostScript,在XML这种标准标记语言中,SVG是以声明性标记的形式来表示的。普罗大众都能在文本文件里编写这样的代码:……(此处原文似有缺,可能是一幅关于代码的图例)保存该文件,然后把文件载入浏览器查看结果。他们还可以独立于SVG文档对象模型(DOM)编写脚本,从而制作动画或修改XML的基本属性。与另一种可选项不同(Macromedia Flash),这些对用户都很透明。此外,由于格式是基于文本的,因此很容易检索内容。尽管一开始浏览需要使用插件,但这个标准的目标则是本地浏览器支持。

对我而言,选择这项技术的理由是显而易见的:我认为它是一种必将风靡全球的网络技术进展。不久之后,我发现了雅虎的SVG开发团队,他们就像一群飞蛾,围绕着被SVG点亮的动人光芒振翼飞舞。

时间进入21世纪,我认为SVG将很快显示出全球主导地位。显然应该在2001年,最多到2002年;这很合理,而且20世纪90年代的网络标准通常会在两年左右时间内付诸实施。但是SVG的“一夜成名”比我的预计晚了好几千个日夜。整个2002年SVG都没有流行的迹象,而Macromedia Flash则从那时开始风生水起。

2003年:进入遭受冷遇的网络标准时期

我们在SVG社区里努力定义标准,同时鼓励人们在当时的软件中正确合理地使用那个标准。浏览器显然是主攻目标,但我们也需要来自桌面图形应用的支持。在这两方面一开始都出现了曙光。

这是最好的时代

到了2003年,Adobe有了一款可在浏览器上渲染SVG的SVG查看器,与此同时,Illustrator向SVG提供支持,将其作为一项创作工具,Mozilla开始尝试在其浏览器中支持本地SVG。就连Microsoft Visio也支持SVG。从测绘学到数字可视化,乃至类flash站点,许多强有力的演示证明了SVG的功能。

Early SVG drawing application

当时还有人写了好几本关于SVG的书。Chris Lilley用《未来世界》(“Welcome to the Future”)完成了对SVG的推介。

这是最坏的时代

然而未来似乎永远不会来临:Adobe SVG Viewer(当时在浏览器中访问SVG的唯一渠道)流传不广,微软完全没能在其后续主导浏览器Internet Explorer 6中确认SVG的地位。失去了最流行网络浏览器的支持,SVG原地踏步,作为一种通用网络发布格式,实际上毫无用处。在严格控制的环境下,它对应用程序很有帮助,而且它对极客们有着美学上的吸引力,但它依旧默默无闻,置身主流应用之外。在当时的情况下,Macromedia Flash是唯一一家覆盖面广的网络矢量图供应商。

导致延迟的两大主因

十几年后的今天,很容易理解SVG当时面临的主要挑战,看清楚为何SVG用了这么长时间才风靡全球。我自己在SVG早期显然没有理解这些要点,也没能预测其后果。不过事后诸葛亮总是看得比较透彻。

Web browsers

浏览器之争——需要标准的究竟是谁?

我深情地记得当时的Mozilla——他们目标远大,并且全力以赴地实施SVG。进展并不迅速,但是稳步推进,在他们的开发中首次实现了本地SVG(没有插件)。

2002年,微软和我联系,提出愿意聘用我们公司全体人员(呃,就我们两个人)。我的第一反应是“为什么?”不过我们很快发现,他们了解我们关于SVG的全部工作。不论微软是否准备支持SVG,他们显然自有打算。事后证明,尽管他们高度关注SVG,但并未考虑将其作为一个标准来实施。相反,微软把SVG技术视为抄袭的目标,他们后来洋洋自得地试图用XAML来实现这一点。XAML是时运不济的Silverlight技术背后的标记语言,它与SVG有着惊人的相似之处。

与此同时,Adobe对SVG查看器给予支持,并在其产品中提供了SVG编写支持,包括FrameMaker、Illustrator、InDesign和GoLive。然而,他们无法对微软施加影响,让其改弦易辙。由于Internet Explorer当时占据了极端的市场份额,大多数设计师和开发人员继续采用Macromedia Flash来渲染真正基于矢量的内容。SVG也许在技术上更加先进,但市场份额才是决定性因素。考虑到微软的主导优势,Adobe对SVG的支持看起来更像是一种试验,而非全情投入。

“标准是为失败者制定的”

——一种愤世嫉俗的观点

正当微软IE在没有SVG的情况下坐享巨大的市场份额,Macromedia坐拥用户所了解并会实际安装的唯一一个浏览器插件(多亏了他们“天时地利”的运气)之际,一家公司有什么理由去支持一项可以创造公平竞争环境的开放技术呢?SVG的支持者都是弱势群体,一些工程师认为SVG是优越的技术(因而无可避免),也有一些公司把SVG看作跟上巨型垄断企业步伐的途径,那些龙头企业依靠专利技术引领着市场。

标准之争——你们的文本流全都是我们的

不过,即使垄断者当时接纳了SVG(胆敢无视股东的利益),SVG还是会遇到挑战。因为它是各种重叠标准的一个方面,这些标准中的两个——HITML和CSS——其形成远早于新兴标准之前。21世纪初,W3C已被证明远非完善,介于毫无用处的标准(比如Xlink)和被弄得一团糟的标准(XML Schema)之间。XHTML标准确实被认为是W3C失败的例子。把SVG放入HTML和CSS等重叠标准的内容之中,绝非小事一桩,重叠标准不断改变,不一定能找到最好的发展方向,这一事实进一步加剧了风险。

Wrapped text in SVG请处理文本——SVG 1.0缺少的最重要功能之一是流动文本,也就是可以包在容器之内的文本。SVG工作小组接受了这个挑战,却发现这并非他们的职责。CSS工作小组已经深入地处理了文本……既从政治上,也从各种可能的技术途径上,那么SVG的定位究竟是什么呢?

CDF工作团队(The Compound Document Format Working Group)组建于2004年,致力于研究带有XHTML和SVG等多种格式的文档。前提是假定具备了本地浏览器支持:试图在插件内容中编写SVG代码时,实际上并没有实现“内嵌SVG”(与HTML夹杂的SVG)的好办法。

对CDF的尝试是与HTML5同时出现的,HTML5是对以XML为中心的HTML发展方向的反叛,转而朝向XHTML发展。HTML5采用一种不同的方法来协调这些重叠技术,提供Canvas作为另一种渲染途径,最终却让SVG变得更加重叠。团队最终放弃了CDF,但并非一无所获:他们的大部分工作成果最终为HTML5提供了帮助。

与Flash等专用格式相比,不同时期形成的多种开放标准之间的相互作用,给想要使用这些标准的开发人员和设计者带来了挑战。在至少可以采用三种方法来完成同一件事的情况下,定义最佳做法并非易事。更何况,没有单一的渲染插件,开发人员还要受到各种浏览器所用实现工具的质量和完备程度的影响。

2005年: Adobe 放弃SVG

Adobe长久以来以弱者的身份挣扎着,长年支持一个“失败者”的标准,并且显然在垄断者的财力面前对坚持美德心生倦意。2005年,他们宣布收购其最大的(也可以说是唯一的)竞争对手Macromedia。这对SVG社区产生了负面影响:SVG Viewer很快遭到弃用(2006年),InDesign等SVG特色应用也被移除。 SVG_Discontinued_01

有了Adobe的强劲支持和重大工程投资,Flash似乎变得无往而不利:它几乎出现在全球所有的个人计算机上(大约90%的市场份额),在设备方面……好吧,对于正式浏览或图形渲染来说,那些设备还是太粗糙了,因此不难想象,Flash会沿着Adobe的美好路线图走向全球主导地位。

Flash was going everywhere, or so it seemed...

微软并未采纳SVG,而是在姗姗来迟的Silverlight项目中公然抄袭Flash。 Internet Explorer的第7、第8版对SVG毫无贡献。

在Adobe和微软都采用专属选项而放弃SVG之际,SVG工作团队依然拥有特许权,Mozilla等其他“失败者”则继续推进这项技术。SVG用1.2版本(包含一些适宜的新功能)以及同时推出的1.1版本(修正1.0的bug)优化了标准,这两个版本均已酝酿多年。

2008年12月,SVG 1.2 Tiny成为W3C推荐标准,同时第二个版本SVG 1.1,主要是对1.0的勘误和说明,最终成了2011年的推荐标准。

SVG得到了Firefox和Webkit的大力支持(后来还得到Chrome和Safari的支持),让微软IE成了孤家寡人。这是在其市场份额减少之际发生的,多亏了Chrome和Firefox,也幸亏Silverlight没能站稳脚跟。

随着Flash广告泛滥和“丰富互联网应用”( rich internet applications)的扩散,Adobe Flash在桌面浏览器上取得了重要地位,但在移动设备方面,(2007年iPhone发布之后,在浏览器功能方面突飞猛进),Flash面临一场硬仗。SVG在2008年9月就实现了对iPhone的支持,但是Flash支持却从未出现。

2010年:弱者最终承袭世界

2010年1月,微软宣布将在Internet Explorer 9上支持SVG。同年晚些时候,斯蒂夫·乔布斯发表了文章 《关于Flash的思考》。HTML5标准,这一锅包含SVG在内的技术大杂烩,成了Flash的唯一可用替代品。

Adobe关于Flash、AIR以及“开放屏幕计划”的野心体现出对Apple“封闭花园”("walled garden")的现实威胁。斯蒂夫有充分理由认为浏览器插件不受欢迎、Flash在手机上的最初表现非常糟糕,等等,而Flash/AIR对苹果应用商店的威胁则是他开始对标准感兴趣的经济动因。有了iPhone和iPad,苹果具备了消灭Flash的能力,而SVG则在守株待兔(在HTML5内容之中),准备获得其早就应该享有的支持。

一旦SVG在政治上有利,微软和苹果公司就都全力接受/支持它。2011 SVG开放会议由微软主办。这真是不可思议。

Carto.net SVG Example

诚然,SVG自2000年以来并未有太多改变。Internet Explorer 9预演时,SVG的演示(诸如Carto.net美丽的地图绘制作品)简直就是2001到2002年间的复古作品。通常说来,它们发布后在iPad上运行良好(实际上2001代码并没有变化)。微软“接受”SVG的一个消极方面是,他们拒绝实施SMIL。SMIL是一套用于动画制作的规范,曾在早期SVG开发人员中颇为流行。如今,MS似乎打赢了消灭SMIL的战斗,Googles正打算有样学样。

SVG support, 2015

还有,浏览器和设备上的核心SVG支持水平(截至2015年)令人惊讶。基础SVG支持确实无处不在。

d3.js example

用于生成SVG以及与SVG合作共事的类库和框架(诸如d3.js)不断激增,其中一些颇为强劲。如今,全球大约有超过20亿台设备支持SVG,Adobe近来也在图形应用领域重新大力支持SVG:2015年12月1日发布的CC2015.2版本提供了从Illustrator到SVG的输出(遥遥领先于原始输出,原始输出关注与Illustrator之间的往返来回,代价是牺牲实用性)以及SVG到Photoshop的导入,真是不可思议。

既然SVG得到广泛支持并实现了浏览器上的本地化,既然工具都在不断向前发展而非倒退回去,那么SVG的使用艺术就越来越与周边的网络技术密切相关,现在它可以在HTML5中实现互动: Javascript、HTML、CSS、Canvas以及WebGL, 标准再次向前发展,这一次,它与其他标准的互动更为和谐,应用更广、更快:就连文本绕排也在回归。SVG已基本实现其最初的目标设想,只不过比我们一些人的预计晚了一些。

坚持就是胜利。