How to test SVG Support Across Web Browsers

test image

Hello friends today we gonna learn about How to test SVG Support Across Web Browsers. So read this article, How to test SVG Support Across Web Browsers step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to test SVG Support Across Web Browsers

SVG (Scalable Vector Graphics) is officially supported by all major web browsers, including Internet Explorer. Support extends to a wide variety of image editing software, particularly Inkscape, which uses SVG as the native format (if you want a refresher on SVG, click here).

But what exactly is supported by web browsers? 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’re about to find out. We’ve taken an example of modern browsers, including some of the less infamous, and tested them with a custom SVG file

back to menu ↑

The test picture

We took our test photo with an emphasis on elements that artists are 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.

back to menu ↑

Web browser engines

Flashing engine

We started with – by far the most common rendering engine – Blink. Blink is the native engine for the Chrome and Chromium browsers from Google, Opera and Android WebView. All the above browsers display test images in the same way on the tested platforms.

Compared to the original image produced by Inkscape, there were no issues other than a slight difference in the appearance of stacked filter effects.

BrowserVersionPlatformResult
Chrome43.0.2357.125LinuxFlashing engine SVG test
Opera30.0.1835.59Linux
Opera30.0.1856.93524Android
Opera30.0.1835.88Windows
Chrome38.0.2125.114Android
Chrome43.0.2357.130Windows
Torch39.0.0.9626Windows
Webkit engine

According to recent browser usage statistics, the top three positions do not belong to webkit-based browsers. However, this engine is widespread among developers. Furthermore, there are various implementations and forks of it

All browsers tested displayed our SVG file without any problems; nevertheless, differences in the rendering of Specular Lighting, a composite filter component, were observed compared to Inkscape.

BrowserVersionPlatformResult
Safari8.0.6MacOSSVG test of the Webkit engine
Otter0.9.05Linux
QupZilla1.8.6Linux
QupZilla1.8.6Windows
Dolphin10.3.1Android
Konqueror15.04.2Linux
UC browser10.5.0.575Android
Trident engine

Trident is a proprietary engine used by Internet Explorer versions 4.0 – 11.0. IE interpreted our SVG perfectly. In addition, the composite filter appearance best matches the original image. We also tested IE 9, the second most used IE (as of January) and found that this version had problems with gaussian blur and composite filter.

This is no surprise, however, since IE 9 was initially released before the final concept of SVG 1.1 SE standard, in which filter effects have been officially added.

BrowserVersionPlatformResult
I.E11.0.9600.17843WindowsIE11 SVG test
BrowserVersionPlatformResult
I.E9.0.8112.16421WindowsIE9 SVG test
Gecko engine

Gecko is an engine developed by Mozilla Corporation and thus used in Firefox web browser or Thunderbird email client. It is also used by browsers PaleMoon, Waterfox and many other forks from previous Firefox versions. In the case of the Gecko engine, the results weren’t exactly the same across platforms.

The Windows version had a minor error displaying the text along the path; the same problem was observed in both Firefox and PaleMoon browsers. Like Webkit, Gecko seems to have problems rendering the Specular Lighting filter primitive correctly.

BrowserVersionPlatformResult
Firefox38.0.5LinuxGecko engine SVG test
Firefox38.0.5Android
Faint moon25.5Android
BrowserVersionPlatformResult
Firefox38.0.5WindowsSVG Gecko Engine Test - Windows
Faint moon25.5Windows
Problematic browsers

As can be seen above, all recent versions of the major rendering engines / browsers passed our test without any significant issues. Let’s take a look at the ones who didn’t fare 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 have not noticed any problem with SVG rendering on Linux (v. 1.0.5.3) and Windows (v. 4.4.5.3000); however, no gaussian blur or other filter primitives were displayed on an Android device.

CM Browser performed quickly on our testing Samsung Galaxy S3 device, but it also doesn’t support any of the filter effects described by the SVG 1.1 SE specification.

BrowserVersionPlatformResult
Maxthon4.4.6.2000AndroidMaxthon browser SVG test
CM Browser5.1.94Android

Konqueror is a standard 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 test SVG rendered correctly. However, Konqueror’s default rendering engine, KHTML, seems to lack support for several features: Filter effects are not applied to underlying objects and markers at the end of the stroke, and text along path or pattern objects is not displayed at all.

BrowserVersionPlatformResult
Konqueror KHTML15.04.2LinuxKonqueror browser SVG test
back to menu ↑

Conclusion

In our test, we focused on the support of the SVG format in modern web rendering engines. We tested 4 major rendering engines and 15 different browsers, including popular ones such as Maxthon or Dolphin. Almost all current versions of browsers have passed our test and it is difficult to select a definitive winner.

It happens that support and correct stacking of filter primitives is the last remaining challenge for the current rendering engines. When we compare our original SVG image with all the results shown, we subjectively nominate the IE 11 (Trident engine) for first place.

However, it is clear that the Blink engine is on his heels, and so we recommend Blink-based browsers for rendering SVG files. If you want to run a quick test of your own favorite browser, you can use our SVG renderer test page here.

Editor’s Note: This post was written for Hongkiat.com by Michal RostMichal works as a programmer in a biomedical company, but spends his spare time developing open source apps and non-profit web portals.

back to menu ↑

How to test SVG Support Across Web Browsers: benefits

  • The How to test SVG Support Across Web Browsers tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to test SVG Support Across Web Browsers guide is free.

back to menu ↑

Faq

Tutorial summary of How to test SVG Support Across Web Browsers

In this guide, we told you about the How to test SVG Support Across Web Browsers; please read all steps so that you understand How to test SVG Support Across Web Browsers in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to test SVG Support Across Web Browsers, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to test SVG Support Across Web Browsers tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to test SVG Support Across Web Browsers. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to test SVG Support Across Web Browsers, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to test SVG Support Across Web Browsers”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to test SVG Support Across Web Browsers, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo