]> Grading SVG Browsers | CodeDread Blog

I published my results of running ten different SVG implementations through the SVG Test Suite.

I ran the tests on various flavours of Firefox, Opera, Konqueror, Safari, Adobe SVG Viewer, Renesis, and Batik. Go check out how your favourite web browser or SVG plugin scored when I ran it through all 280 tests: Click Here.

This is one of those times when I almost hesitate to even publish this because people will officially know I wasted hours of my life browsing web pages to obtain these results. Then again, we all waste hours of our lives browsing web pages – the only difference is we don’t record our findings in a spreadsheet.

I hope some people will find this interesting. Some people might consider it a challenge. Other people may find it discouraging, disappointing, a waste of time, an over-simplification, or even offensive. Oh well, at least now I have my own scoring system for anybody who wants to put out a SVG plugin or support for SVG (Microsoft, care to give it a whirl?).

§362 · April 21, 2007 · Adobe, Firefox, Opera, Safari, Software, SVG, Technology, Web · Tags: · [Print]

197 Comments to “Grading SVG Browsers”

  1. Jeff says:

    @stella – Microsoft has committed to improving its support of SVG prior to IE9 being released. The first preview of IE9 is missing a lot of functionality. I anticipate a very sizeable subset of SVG will be quite usable across all major modern browsers when IE9 is released.

  2. Thanks for the IE9 preview update, Jeff. I’m unimpressed by the score/implementation itself for now, but the future looks bright! :-)

    I decided to take out the older and the less popular implementations (Konqueror, Amaya) from my chart since they were making it hard to seek the relevant information. I may make this information available elsewhere on the site if someone screams loud enough.

    I had already “scream” a bit previously but, now that I think of it again, I’d just recommend reworking the sentence:

    «I decided to take out the older and the less popular implementations (Konqueror, Amaya) from my chart since they were making it hard to seek the relevant information. They are still available in the detailed information (by following the chart link).»

    Either way, I guess currently it isn’t obvious enough that the HTML file contains much more details than the chart represents. I’d also recommend writing something about it; leaving it alone, with the “Easter eggs” flavor, perfectly fits the current season, though! :-D

    Have you noticed that the HTML page holding the details has a bunch of dummy lines to the right? An erroneous copy+paste or during selection for export, maybe? ;-)

    However, since it uses Webkit as its base

    s/Webkit/WebKit/

    (Yes, I’m picky today! ;-) )

  3. nemo says:

    Heh. You go to trouble of updating Firefox score and they go and implement more SVG just the day after.

    http://longsonr.wordpress.com/2010/04/06/svg-glyph-positioning/

    On my test machine it did require using ctrl -/ctrl + or viewing in frame due to the font size thing.

    Guess they are still working on it.

  4. Jeff says:

    @nemo – yep, I saw that too :) That would probably give them another point (from red to yellow) since the glyphs are not rotated in OSX unless I put the SVG in its own frame as Robert suggests. But it’s an improvement!

  5. nemo says:

    Well, maybe the ctrl – would work for you too, but yeah, that’s still yellow.

    Hey, since you’re clearly reading this. Pleeeease fix that color: on the detail chart? I can add a userContent.css override for your side, but that’s kinda silly.

  6. Jeff says:

    @nemo – I simply do a Save as Web Page in Excel to get the detail chart. Do you know if I can control that stuff inside Excel?

    Can you give me more details than your earlier comment on what the problem is because I can see a bunch of color:black properties in the CSS that Excel is generating and I don’t see any background-color: properties (just background).

  7. nemo says:

    The issue is the repeated use of:
    color: windowtext;

    Throughout the file.
    That should not be used unless in conjunction with background-color: window

    Or you just get trouble if the color changes at all from black.
    And if the tool just meant black, that’s what it should have put in :)

    Adding an include for an external stylesheet that does:
    color: black !important; is I guess one basic workaround.

    BTW, I updated that Chromium bug. Looks like they fixed it \o/

  8. Jeff says:

    Sigh. Alright, next time I update the chart I’ll try to get a better HTML output. One thing I don’t want to do though is to have to continuously paste in some CSS to get it to render properly every time.

  9. nemo says:

    I bet that if you explicitly specify colour black in Excel it’ll probably export it as such.
    (Select whole chart and specify that text colour)

    Admittedly I haven’t used Excel in ages, being all FOSS fanatic these days.

  10. @Jeff

    Using the most updated version of MS Office might do the trick, if you have access to it. For example, I remember noticing relevant improvements in doc–>HTML conversion between Office 2000 and Office 2003. ;-)

    Another idea is try to save as HTML using Open Office. :-)

  11. nemo says:

    126. animate-elem-04-t
    127. animate-elem-05-t
    128. animate-elem-06-t
    129. animate-elem-07-t
    130. animate-elem-08-t
    151. animate-elem-33-t

    Appear to pass w/ the new animateMotion in Minefield.

    http://blog.dholbert.org/2010/04/mozilla-gets.html

    Some others might be partials, and perhaps some partials might be full, I’m just uncertain as to your criteria. :)

    BTW, I heard the IE9 beta 2 does better on Acid3 – perhaps their SVG has improved as well.

  12. Jeff says:

    nemo – I already updated the SVG-support table for IE9 p2, Mozilla nightly (with animateMotion) and Opera 10.53 this morning :)

  13. Anthony Starks says:

    Is the raw data for your SVG scorecard available?

    I’d like to experiment with different visualizations of the data. using SVG of course.

  14. Hi Anthony – the data is available in HTML table form if you click on the image.

  15. Hey Jeff,

    Noticed a glitch in the 6th May update chart image: weird “eSU” string in the top left (probably was “Native Support”, if I recall correctly). ;-)

    Thanks for the update! :-)

  16. Abel Avram says:

    Hi Jeff,
    Microsoft published some tests results a couple of days ago at: http://samples.msdn.microsoft.com/ietestcenter/
    According to them, IE9 implements SVG 1.1 at 100%. They also run a number of HTML5, CSS and DOM tests, and IE9 scores very well, 100%. How do you comment that?

    They say they developed the tests in conjunction with W3C. Have you run those tests? How do you comment?

    Thanks

  17. Jeff says:

    Hi Abel,

    While I am very excited about the direction IE9 is taking and have been impressed with the level of participation in the SVG Working Group, I have a problem with the “IE Testing Center” as I feel it is very misleading. Even Microsoft admits that they are only including tests that they wrote (for which they claim IE9 to pass) not the entire test suite.

    For instance: the SVG Test Suite has 275 tests. Microsoft only talks about 31 tests on that page. As an example, IE9 does not even support gradients yet.

    As another example, their HTML5 tests that talk about inline SVG markup are actually incorrect. They only pass in IE9 due to a browser bug dealing with childNodes. If I correct those tests they pass in Firefox nightlies and fail in IE9.

  18. Brian says:

    Greetings Jeff

    I just discovered the PNG-image results are listed in reverse order, ie test #275 first. Probably due to Excel.

    I have played around with your tables on my homepage. Feel free to be inspired.

  19. montypytacz says:

    Really impressive work from Microsoft with preview 3. Who knows, maybe the they will even surpass Fireofx in preview 5?

  20. Jeff says:

    @montypytacz: I don’t think that’s at all likely – Mozilla has support for SMIL in Firefox 4, which bumps them up another 10-12%. But I agree, great work from Microsoft!

  21. Gaurav says:

    Could you please update with the Firefox 4 beta 1 results?

  22. CESAR says:

    HOW ABOUT OPERA 10.6 FINAL, CHROME 6 BETA AND FIREFOX 4 BETA 1 ?

  23. stelt says:

    IE9tp4,Fx4b2,Opera10.?,Chrome?.?

    Renesis is no longer downloadable from examotion.com (company no longer exists), but heard it might appear somewhere else.

  24. Jeff says:

    I might get to IE9p4 some time in the next week or so.

    Renesis … that made me chuckle stelt, thanks. SVG Plugins are dead, long live the native implementations! (and if you need a plugin, grab Chrome Frame).

  25. stelt says:

    I’m using one of the browsers your blog is suggesting me: Firefox. Fennec to be precise

  26. Horacio says:

    You’re showing the Chrome nightly… why not WebKit nightly?

  27. Lars Gunther says:

    A quick question about the support chart. How many percent of the total score is SVG-fonts?

    (I ask since there is a debate about SVG-fonts, and some people think there is no real use case for them, now that we have WOFF.)

  28. Jeff says:

    It looks like there are only 5 (out of 280) tests that deal with SVG Fonts (the rest deal with font metrics, kerning, etc).

  29. Thanks for the (2010-08-21) update, Jeff! It’s great to know about the news. ;-)

    I’d leave two ideas for a future update:
    1. Now that SVG 1.1 SE is getting shaped, have you considered switching to the updated test suite [1] or are you holding until SVG 1.1 SE becomes a recommendation?
    2. It would be great to have an updated status of SVG Web. It was been making a notable progress [2] and a release might be soon be made available [3] (maybe in time for the SVG Open?). :-)

    [1] http://dev.w3.org/SVG/profiles/1.1F2/test/harness/index.html
    [2] http://code.google.com/p/svgweb/wiki/RleaseNotes#In_Development
    [3] http://groups.google.com/group/svg-web/browse_thread/thread/271155a386d96671/16f86fe1a411c2a9#16f86fe1a411c2a9

  30. stelt says:

    next to green/yellow/red/black maybe add white for “will not implement” ?

    add a ‘browser’ that is the combination of the big 5 desktop browsers (one for release versions and one for nightly versions): any crash gives black, otherwise all green gives green, otherwise, any red or white gives red, otherwise any yellow gives yellow. Like a can-i-use kind-of-thing

  31. Jeff says:

    re “will not implement” – never say never

    As for the other suggestion – I’m already getting super-tired of maintaining these charts. I’m trying to brace myself for when the SVG WG finally publishes the new SVG test suite (probably double the # of tests). I don’t need to add more features to my silly charts! :P

  32. Jeff says:

    Hi Helder – your comment got caught in my pending queue in WordPress due to your use of links. Sorry about that.

    As you probably saw, I updated the chart since your suggestion for SVG Web.

    I won’t be running the SE test suite until the test suite is out of draft state and the WG says it’s officially published. Note that the Test Suite might have a different timeline than the specification, I don’t know.

    I also am not clear if these charts are needed anymore, it’s possible the W3C will have a way of presenting this same information so that I don’t have to continue to maintain these charts. Also, since my job change I’m arguably no longer an unbiased third-party.

  33. qbolec says:

    Do you test for BackgroundImage support in filters? From my experience neither FX nor Chrome support it at all.

    Please compare :

    http://www.w3.org/TR/SVG/images/filters/enable-background-01.svg

    http://www.w3.org/TR/SVG/images/filters/enable-background-01.png

  34. nemo says:

    Hm. Maybe not too much change. Most of the animation ones still seemed to fail. Only these two looked promising.

    61. painting-render-01-b
    155. animate-elem-39-t (partial – no image [like in the image tests], but animation and linking seem ok?)

  35. CESAR says:

    please, when you have time update chart to IE9 RC, firefox 4 beta12 and crhome 11 beta.

  36. Montana says:

    Please update your tests for the IE9 release, if you have time!

    Thanks for this great resource!

  37. Thomas S says:

    Very cool chart. It would be nice if there was a way to associate the tests to the red/yellow/green regions. Going to the HTML chart behind it is such a huge thing, where the header just scrolls off the top. So when I get down to a particular test of value to me, and start scrolling across, I have no idea what columns I’m looking at. Any idea how that might be solved?

  38. Patrick Dengler says:

    I’ve asked Jeff to update this test suite based upon the features implemented. Hopefully (like all of us) if he has time :). In the W3C working group, we split these tests up into categories. As he noted, IE9 does not implement SVG Fonts (we do support the new standard WOFF fonts), SMIL or Effects. Developers should be confident that the other features work fairly consitantly across browsers. I am looking forward to any new SVG content!!

  39. Bruce says:

    Jeff
    Thanks for the update – I know how much work it must of been. Patrick – Thanks for the request. Microsoft has done a great job joining the SVG party and to ask a Google employee to update this to see where everyone stands – warts and all – is great. The past month has been fantastic for SVG advocates who have wandered in the wilderness the past few years. Now if we can just get Android Gingerbread pushed out the the mobiles soon.. :)

  40. Bruce says:

    s/Gingerbread/Honeycomb/

  41. David Mann says:

    Thank you for updating this! Can you update the HTML chart with the version-by-version breakdown to include the newest Opera scores which you posted? I want to see what they fixed…

  42. Victor says:

    Some hardcore research you did on the SVG compatibility. Thanks and well done!

  43. Grant Bailey says:

    Thank you for your hard work, your page is very informative.
    Regards,
    Grant Bailey

  44. Darren Thomson says:

    Great resource! If you do get the chance, it would be great to see the full HTML chart with the newest browsers (FF4, Chrome 10, Opera 11, etc.). From your front page, I gather you’ve already done the testing.

    Thanks!

  45. CESAR says:

    what about IE10 p2, opera 11.5, FF5.1 and chrome 13 ?

    Thanks for great work !!!!

  46. Arno says:

    @Jeff: Great works, tnx! -Do you know of any comaprison regarding the [b]speed[/b] of the browsers? is there a clear “performance winner” in rendering SVG?