案例研究：跨Web浏览器引擎测试SVG支持
该支持涉及多种图像编辑器软件，尤其是Inkscape，它使用SVG作为其本机格式（如果要在SVG上进行更新，请单击此处） 。
所有主要的Web浏览器（包括Internet Explorer）都正式支持SVG（可缩放矢量图形）。
我们对现代浏览器进行了采样，包括一些臭名昭著的浏览器，并使用为此目的制作的SVG文件对其进行了测试 。
好吧，这就是我们要找出的。
过滤器等高级功能又如何呢？
是否所有渲染引擎都以相同方式显示SVG文件及其功能？
但是网络浏览器到底支持什么？
测试图片
测试的功能包括：文本路径及其相互作用，渐变，高斯模糊滤镜以及最终由更多滤镜类型堆叠而成的高级复合滤镜。
我们准备了测试图片，重点关注艺术家最可能使用的元素。
网络浏览器引擎
闪烁引擎
所有上述浏览器在测试平台上都以相同的方式呈现测试图像。
Blink是Google Chrome和Chromium浏览器，Opera和Android WebView的本地引擎。
我们首先使用了Blink，这是迄今为止最常见的渲染引擎。
与Inkscape生成的原始图像相比，除了堆叠滤镜效果的渲染略有不同外，没有其他问题。
| 浏览器 | 版 | 平台 | 结果 |
| 铬 | 43.0.2357.125 | 的Linux |
|
| 歌剧 | 30.0.1835.59 | 的Linux | |
| 歌剧 | 30.0.1856.93524 | 安卓系统 | |
| 歌剧 | 30.0.1835.88 | 视窗 | |
| 铬 | 38.0.2125.114 | 安卓系统 | |
| 铬 | 43.0.2357.130 | 视窗 | |
| 火炬 | 39.0.0.9626 | 视窗 |
Webkit引擎
此外，它还有各种实现和分支
但是，此引擎在开发人员中广泛使用。
根据最近的浏览器使用情况统计 ，前三个位置不属于基于Webkit的浏览器。
但是，与Inkscape相比，复合滤镜组件Specular Lighting的渲染存在差异。
所有经过测试的浏览器都可以毫无问题地呈现我们的SVG文件；
| 浏览器 | 版 | 平台 | 结果 |
| 苹果浏览器 | 8.0.6 | 苹果系统 |
|
| 獭 | 0.9.05 | 的Linux | |
| QupZilla | 1.8.6 | 的Linux | |
| QupZilla | 1.8.6 | 视窗 | |
| 海豚 | 10.3.1 | 安卓系统 | |
| Konqueror | 15.04.2 | 的Linux | |
| UC浏览器 | 10.5.0.575 | 安卓系统 |
三叉戟引擎
我们还测试了第二常用的 IE 9（截至2015年5月），发现此版本存在高斯模糊和复合滤波器的问题。
此外，复合滤镜的外观与原始图像最匹配。
IE完美诠释了我们的SVG。
Trident是Internet Explorer版本4.0 – 11.0使用的专有引擎。
不过，这并不令人惊讶，因为IE 9最初是在SVG 1.1 SE标准的最终草案之前发布的，该草案正式添加了滤镜效果。
| 浏览器 | 版 | 平台 | 结果 |
| IE浏览器 | 11.0.9600.17843 | 视窗 |
|
| 浏览器 | 版 | 平台 | 结果 |
| IE浏览器 | 9.0.8112.16421 | 视窗 |
|
壁虎引擎
就Gecko引擎而言，在不同平台上的结果并不完全相同。
浏览器PaleMoon，Waterfox和早期Firefox版本的许多其他fork也使用它。
Gecko是由Mozilla Corporation开发的引擎，因此可用于Firefox Web浏览器或Thunderbird电子邮件客户端。
就像Webkit一样，Gecko似乎在正确渲染“镜面照明”滤镜基元时遇到麻烦。
在Firefox和PaleMoon浏览器中都观察到相同的问题。
Windows版本在沿路径渲染文本时出现了一些小故障；
| 浏览器 | 版 | 平台 | 结果 |
| 火狐浏览器 | 38.0.5 | 的Linux |
|
| 火狐浏览器 | 38.0.5 | 安卓系统 | |
| 苍白的月亮 | 25.5 | 安卓系统 |
| 浏览器 | 版 | 平台 | 结果 |
| 火狐浏览器 | 38.0.5 | 视窗 |
|
| 苍白的月亮 | 25.5 | 视窗 |
有问题的浏览器
让我们检查一下效果不好的那些。
从上面可以看出，所有主要渲染引擎/浏览器的所有最新版本都通过了我们的测试，而没有遇到很大的困难。
但是，在Android设备上，既没有渲染高斯模糊也没有渲染其他过滤器原语。
我们没有注意到Linux（v。1.0.5.3）和Windows（v。4.4.5.3000）上SVG渲染的任何问题；
根据Fahad Khan的说法，Windows的20种替代Web浏览器均使用了Trident和Webkit引擎。
Maxthon是在中国开发的跨平台浏览器。
| 浏览器 | 版 | 平台 | 结果 |
| 傲游 | 4.4.6.2000 | 安卓系统 |
|
| CM浏览器 | 5.1.94 | 安卓系统 |
但是，Konqueror的默认渲染引擎KHTML似乎缺少对以下几个功能的支持：滤镜效果未应用于基础对象和笔画结束标记，而沿路径或图案对象的文本则根本未渲染。
启用WebKit后，我们的测试SVG可以正确呈现。
在Konqueror中渲染SVG文件的能力取决于渲染引擎。
Konqueror是KDE（一种最受欢迎的Linux桌面环境）的默认浏览器。
| 浏览器 | 版 | 平台 | 结果 |
| Konqueror KHTML | 15.04.2 | 的Linux |
|
结论
几乎所有当前版本的浏览器都通过了我们的测试，很难选择最终的赢家。
我们测试了4个主要渲染引擎和15种不同的浏览器，包括诸如Maxthon或Dolphin的流行浏览器。
在我们的测试中，我们专注于跨现代Web渲染引擎的SVG格式支持。
当我们将原始SVG图片与所有渲染结果进行比较时，我们主观地提名IE 11（Trident引擎）为第一名。
似乎支持和正确堆积滤镜基元是当今渲染引擎面临的最后一个挑战。
如果您想对自己喜欢的浏览器进行快速测试，请随时在此处使用我们的SVG渲染器测试页面。
但是，很明显，Blink引擎正处于紧追之中，因此，我们建议使用基于Blink的浏览器来呈现SVG文件。
Michal是一家生物医学公司的程序员，但他将业余时间用于开发开源应用程序和非营利性Web门户。
编者注：这篇文章是由Michal Rost为Hongkiat.com写的。
翻译自: https://www.hongkiat.com/blog/test-svg-format-browser-engines/