Testing SVG Support Across Web Browser Engines (Case Study)
SVG (Scalable Vector Graphics) is officially supported by all main web browsers, including Internet Explorer. The support spans into a wide variety of image editor software, particularly Inkscape, which uses SVG as its native format (If you want a refresher on SVG, click here).
But what exactly is supported by web browsers? Do all rendering engines display SVG files and their features the same way? And what about their advanced features like filters? Well, that’s what we are going to find out. We took a sample of modern browsers, including some of the less notorious ones, and tested them with an SVG file made for this purpose.
The testing image
We prepared our testing picture focusing on elements that artists are most likely to use. Among the tested features are: text paths and their interactions, gradients, gaussian blur filter and finally an advanced composite filter stacked from more filter types.
Web browser engines
Blink engine
We started with – by far the most frequent rendering engine – Blink. Blink is the native engine for Google’s Chrome and Chromium browsers, Opera and Android WebView. All of the above-mentioned browsers render testing images in the same way across the tested platforms.
When compared to the original image produced by Inkscape, there were no issues except a slight difference in the rendering of stacked filter effects.
| Browser | Version | Platform | Result |
| Chromium | 43.0.2357.125 | Linux |  |
| Opera | 30.0.1835.59 | Linux | |
| Opera | 30.0.1856.93524 | Android | |
| Opera | 30.0.1835.88 | Windows | |
| Chrome | 38.0.2125.114 | Android | |
| Chrome | 43.0.2357.130 | Windows | |
| Torch | 39.0.0.9626 | Windows |
Webkit engine
According to the recent browser usage statistics the top three positions don’t belong to webkit based browsers. However, this engine is widespread among developers. Futhermore there are various implementations and forks of it
All tested browsers rendered our SVG file without problems; nevertheless, differences in the rendering of Specular Lighting, a composite filter component, were observed in comparison to Inkscape.
| Browser | Version | Platform | Result |
| Safari | 8.0.6 | MacOS |  |
| Otter | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | Windows | |
| Dolphin | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| UC Browser | 10.5.0.575 | Android |
Trident engine
Trident is a proprietary engine used by Internet Explorer versions 4.0 – 11.0. IE interpreted our SVG perfectly. Moreover, the composite filter appearance matches the original image the best. We also tested IE 9, the second most used IE (as of May 2015) and found that this version had problems with gaussian blur and composite filter.
This isn’t a surprise though, as IE 9 was initially released before the final draft of SVG 1.1 SE standard, in which filter effects were officially added.
| Browser | Version | Platform | Result |
| IE | 11.0.9600.17843 | Windows |  |
| Browser | Version | Platform | Result |
| IE | 9.0.8112.16421 | Windows |  |
Gecko engine
Gecko is an engine developed by Mozilla Corporation and thus used in the Firefox web browser or Thunderbird email client. It is also used by browsers PaleMoon, Waterfox and many other forks of earlier Firefox versions. In the case of Gecko engine the results weren’t exactly same across different platforms.
The Windows version exhibited a little glitch in rendering the text along path; the same problem was observed in both Firefox and PaleMoon browsers. Just like Webkit, Gecko seems to have trouble with correctly rendering Specular Lighting filter primitive.
| Browser | Version | Platform | Result |
| Firefox | 38.0.5 | Linux |  |
| Firefox | 38.0.5 | Android | |
| PaleMoon | 25.5 | Android |
| Browser | Version | Platform | Result |
| Firefox | 38.0.5 | Windows |  |
| PaleMoon | 25.5 | Windows |
Problematic browsers
As can be seen above, all recent versions of major rendering engines / browsers have passed our test without significant difficulties. Let’s check out those that didn’t do so well.
Maxthon is a cross-platform browser developed in China. According to Fahad Khan’s 20 alternative web browsers for Windows Maxthon uses both Trident and Webkit engines. We haven’t noticed any problem with SVG rendering on Linux (v. 1.0.5.3) and Windows (v. 4.4.5.3000); however, on an Android device neither gaussian blur nor other filter primitives were rendered.
CM Browser performed fast on our testing Samsung galaxy S3 device, but it also doesn’t support any of the filter effects described by SVG 1.1 SE specification.
| Browser | Version | Platform | Result |
| Maxthon | 4.4.6.2000 | Android |  |
| CM Browser | 5.1.94 | Android |
Konqueror is a default browser for KDE, one of the most popular Linux desktop environments. The ability to render SVG files in Konqueror depends on the rendering engine. With WebKit enabled our testing SVG was rendered correctly. However, Konqueror’s default rendering engine, KHTML, appears to be lacking support of several features: filter effects are not applied to underlying object and stroke end markers, and text along path or pattern objects aren’t rendered at all.
| Browser | Version | Platform | Result |
| Konqueror KHTML | 15.04.2 | Linux |  |
Conclusion
In our test we focused on the support of SVG format across modern web rendering engines. We tested 4 main rendering engines and 15 different browsers including popular ones like Maxthon or Dolphin. Almost all current versions of browsers passed through our test and it is hard to select a definitive winner.
It appears that support and correct stacking of filter primitives is the last remaining challenge for present-day rendering engines. When we compare our original SVG picture with all the rendered results, we subjectively nominate the IE 11 (Trident engine) for first place.
However, it is clear that Blink engine is in close pursuit and thus we recommend Blink-based browsers for rendering SVG files. If you want to perform quick test of your own favourite browser, feel free to use our SVG renderer test page here.