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 rendering of stacked filter effects.

Browser Version Platform Result
Chromium 43.0.2357.125 Linux Blink engine SVG test
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 (as of May 2015). 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 Webkit engine SVG test
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 IE11 SVG test
Browser Version Platform Result
IE 9.0.8112.16421 Windows IE9 SVG test

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 Gecko engine SVG test
Firefox 38.0.5 Android
PaleMoon 25.5 Android
Browser Version Platform Result
Firefox 38.0.5 Windows Gecko engine SVG test - 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 Maxthon browser SVG test
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 Konqueror browser SVG test

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.

Editor’s note: This post is written for Hongkiat.com by Michal Rost. Michal works as a programmer in a biomedical company but devotes his free time to the development of open source apps and non-profit web portals. He is the founder of scalablegfx. You can find him on Twitter.

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail