Monday, 31 January 2011

SVG coming back, or getting there?



I am a fan of standards as a means of presenting information and having the wide audience seeing the same thing. I was encouraged by Kurt Cagle’s post  that “SVG has made it's way to the web” but I am not sure we are quite there. Of course, SVG has been used to present graphics on the web  for some time but seeing the results has required some  fancy footwork of plugins and careful selection of browser. I think Kurt is being a little premature in his announcement that “every single major browser on the desktop” will render  even specific examples of SVG consistently.
I actually wondered what Kurt was talking about as I viewed his post in the stable Firefox 3.6.10 because the SVG was not rendered at all, but I was sufficiently interested to switch on my laptop with its standard Chrome browser.
Kurt used this artwork http://www.openclipart.org/people/jhnri4/Glass_cup_with_saucer.svg demonstrating one problem with using SVG as a standard graphic ..., I can’t include this image in my Google Doc directly. But a bit of cutting and pasting gets us this.

Kurt provides it scaled to a 240 pixel square in the blog and on my FireFox 4 display it looked like this …

On Chrome however the picture is scaled differently to give you a whole cup.


The SVG word art  example in Kurt's blog was less successful, only appearing in Chrome. The scripting to change the word art did not work in Chrome or Firefox.
All this suggests that we have a way to go with our standards rendering.

[UPDATE : Came back to this later in the day and found that the word art scripting worked in FF4 and Chrome but that the wordart itself only rendered in Chrome]

4 comments:

Kurt Cagle said...

Dave,

Both your statement and mine are correct - SVG itself is supported in varying fashion across all browsers, but there is no question that not all of it is supported equally. However, until this year, even being able to have an external SVG graphic render universally was still something of a pipe dream.

However, I also think that you get self-reinforcing structures on browsers - once a capability exists, JavaScript shims can be written to handle the differences, and over time, these merge into a uniform interface as the browser vendors chase the market leader.

David French said...

I agree with you, Kurt and I was a bit quick off the mark in my response here. I could not get comments to work on your site.
I really wanted to add a note of caution to those who want to just use SVG for its intended standardisation. The rendering itself (where available) is not yet consistent.
As long as users are not faced with an insistence that they use a specific version of a browser I am happy we are going in the right direction. In the short term, two things would accelerate adoption:
1) a library of shims to fix up differences apparent in the browsers
2) an easy 'show my page in browser X' service

otherwise the effort of discovering , for example, why a set of vectors is being scaled differently across browsers will be a serious disincentive.

Ronald van Kuijk said...

Dave,

It works great on Firefox 3.6.13 here, so not sure what is the problem on your side, but if you want a real great usecase of SVG in the browser, take a look at http://www.signavio.com/en/signavio-screencasts.html.

David French said...

Yes Ronald, The post works fine now but you will note that Kurt has changed it since my first comment. The image is no longer scaled in the blog entry (to 200x200 I think it was). That is where one problem came in, as the effect of the scaling was different in the browser implementations that I used.