SVG Support Tables Now Interactive

Someone mashed together the data I publish with my SVG support tables and made it much more interactive and useful! Great! That’s what makes the web so cool: sharing. Now to see if I can break his scraping script… Joking!

IE9 Likely To Support SVG?!?

As “reported” in Wired and Ajaxian: Golly. How much? When? What version/profile? Sorry, but it seems that this is a misinterpretation of the standard SVG party line from Microsoft. Mumble, grumble, integrity… journalism… something, something, mumble…

More Mozilla SMIL Progress

Brian Birtles posts on the latest progress on Mozilla implementing SMIL-in-SVG. I’m hoping to see SMIL pick up, particularly as browser native support improves further. Of course you can get a headstart on this by using the FakeSmile shim right now in 4 of the 5 big browsers.

Qt Winning Votes?

Doug seems to agree with me that a LGPL for Qt could be a big game changer. I admit, I’ve always had a soft spot for Qt, but the recent news that it will be available to commercial projects without purchasing a license from Nokia is getting a lot of people excited – even heavy fans of Java

Google I/O Registration Open

I might actually try to attend the Google I/O conference this year in May. Rob and I tried to get our ducks in a row last year but the planning never crystallized. I’ve been doing some playing with Android recently, so there’s actually a reason for me to go this year.

Thanks and congratulations go to Daniel, Brian and Robert! Also thanks to Erik and Ian for putting some SMIL tests into Acid3. Not that this had anything to do with it. Oh, no.

Opera has supported SMIL in SVG for a couple years now. Anyone want to place bets on who will be the second to release a browser that supports it? Mozilla? Apple? Google? Microsoft? What, did I say something funny?

Flickr Badges

Flickr is a pretty popular site for sharing photos with friends, family and the world. Flickr even lets you embed ‘badges’ of your recent or popular photos into your own web page using HTML or Flash. Of course the Flash badge has some animation effects that are not easily achievable in HTML. I thought I’d use FakeSmile + SVG to create my own badge. I started with some backend code that Rob has had kicking around in his repository for almost two years.

You can see the results to the right and also on my personal info page. The badge has been tested in Firefox, Opera or Safari. There seems to be some trouble with the Renesis 1.1 plugin for Internet Explorer, so please stay tuned there. The badge can be seen full-browser here (sorry for the low-quality rasters, I’m only grabbing 75×75 pixel thumbnails from Flickr at the moment).

The images are cached from Flickr using a bit of PHP and the Flickr feed is checked every hour for new photos. If you want to see the source of the PHP, please click here.

SMIL Timesheets

Others have started experimenting with FakeSmile, too. Usually the people that I talk to that have used SMIL are pretty delighted with the technology. It’s a shame that it’s not well-supported across modern browsers yet – perhaps it has something to do with the slow public response rate of the SYMM Working Group?

However, while Opera (and now WebKit) have started to support SMIL within SVG, there are no browsers that support SMIL Timesheets yet. So FakeSmile will have to do for now (here’s another alternative that I have not experimented with).

You can think of SMIL Timesheets as the counterpart to CSS for web pages. If stylesheets are like the set decoration of your web page, then timesheets are like the choreography. What’s really nice about this is that you can have a nice, concise bit of markup representing your content (the images, in this case) and then you can externally link to a separate timesheet to animate the web page. You can use CSS selectors to apply animations to any of your web elements and use the same timesheet across multiple pages. You can see my SMIL Timesheet here.

If anyone wants to send me a SMIL timesheet with other cool effects, please feel free (look for my email address here). Perhaps I’ll eventually have my PHP pick a random effect one day.

FakeSmile

The FakeSmile script has come a long way since David released it a few months ago. It implements a decent amount of SMIL and SMIL Timesheets so that you can actually use these technologies now while the browser vendors catch up. David has also recently included a full version of jQuery inside the FakeSmile script, so it’s beefed up with lots of power now. I think he will probably be releasing minimized/compressed versions eventually.

[Update: I should also acknowledge Damian Cugley for being the original inspiration behind Rob starting his project]

Anyway, with the patch, a Mozilla trunk nightly gains about 4.5% to their overall SVG score. Put another way, they score 25/116 on the SVG+SMIL animation tests in the Full test suite. While this isn’t in the league of current WebKit nightlies (and neither of these platforms are in the league of Opera 9+), it does show that progress could be made on this were it applied to the trunk (once Firefox 3 ships, of course). Does anyone know if this patch means that a Firefox build would pass those SVG+SMIL tests in Acid 3?

[Update: Chris has made the Firefox builds available for download here]

[Update 2008-04-20: Chris' latest build now makes the SMIL score 38/125, though some tests have now regressed.]

Table Of Contents

• SVG In HTML: Did You Blink?
• SVG Working Group Going Public
• SMIL Getting Some Love
• Cool Demo: GEMi
• Slanty Blog Comments

SVG In HTML: Did You Blink?

For about a week, there was a pretty solid proposal for how HTML5 could include support for existing popular XML languages currently making up the fabric of the ‘open web’ platform – this included Scalable Vector Graphics.

Specifically, the spec described how HTML5 could allow inline markup that (very closely) resembled SVG and MathML (in a special mode of the HTML5 parser). However, very recently, the SVG WG requested the SVG part of the proposal be removed from the HTML5 spec so that the SVG WG could investigate if there were any improvements that could be made that would preserve interoperability with existing user agents and tools.

My biggest concern about the original proposal was that ’round-tripping’ SVG images was not guaranteed. Round-tripping means that I should be able to take a valid SVG document made in an editor like Inkscape and copy-paste that XML code into an HTML5 document and vice versa. The trip from Inkscape-to-HTML was supported by the original proposal (where the HTML parser would just ignore namespace prefixes). But the trip the other way (copy-paste from a HTML5+SVG document to Inkscape) was not guaranteed.

This is because the HTML5 parser is much more forgiving about certain things. It does not mandate namespace prefixes, double-quotes on attribute values, or case sensitivity for all modes. It doesn’t even require you to close all your elements. This is by design.

This means that an author could not be guaranteed to take valid SVG markup embedded in HTML5 and paste it into a standalone document and expect a graphical editor to be able to bring up the image.

However, if we require that any browser supporting SVG-in-HTML5 must support a means of exporting the DOM as XML – then my concerns are very much alleviated. It was clarified to me that this was indeed recommended, but it could not be a requirement because User Agent Interface requirements are out of scope of the HTML5 specification. I’m not really sure why – we are not talking about capturing all UA requirements, only those that are required for interoperability with a foreign language such as SVG – but c’est la guerre. See Ian’s comment below for more clarity.

SVG Working Group Going Public

The SVG Working Group has been rechartered as a Public Working Group. This means that the general public will be able to read emails, conference transcripts, action items, etc. I really think this is a great idea, and I look forward to more transparency around SVG activities. Here’s their new charter.

Another activity within the W3C surrounding SVG is the creation of a SVG Interest Group. This is an interesting idea – not sure if it’s the first of its kind within the W3C. Based on their charter, the IG will:

“provide requirements, specification feedback, errata suggestions and tests to the SVG WG”

Sounds like a good opportunity to gather more folks interested in vector graphics on the web into one place for some interaction.

SMIL Getting Some Love

In case you missed it, the WebKit nightly builds now includes some support for declarative animation (SMIL). I’m really pleased to see two native browsers now supporting SVG animation interoperably. Now I’d like to see this patch land as soon as Firefox 3 ships so that we can have some declarative animation support in all 3 major native SVG browsers.

Cool Demo: GEMi

Domenico Strazzullo announced today a very nice demo of a windowing system built in SVG for browsers. Kind of reminds me of AjaxWindows, but this GEMi demo actually works really well in all 3 major SVG browsers without the help of XUL. Apparently it also works in IE+ASV.

I was really impressed with this – but I can’t wait to see if anybody tries to build anything with it, since the goal of the project was a framework that can be integrated into some other project.

Click here to try it out!

Slanty Blog Comments

More blog experimentation last night by adding ‘slanty comments’. After futzing with PHP, CSS, HTML and SVG, I finally got the effect I was after. It took me over 2 hours. Of course that was also testing it in Firefox 2, Firefox 3, Safari 3.1, Opera 9.20, WebKit nightly, Internet Explorer 6 and on two platforms (Windows and Linux).

Unfortunately, when all was said and done, I wasn’t really happy with the result. Maybe I’m just not used to seeing that on a website? If anybody has ideas on how to improve it, I’ll gladly steal them.

What I thought was really interesting about this? Well first, let me explain how I serve my website and blog: I author my content in XHTML served the content as application/xhtml+xml for those browsers that support it (which is, incidentally, all major browsers except for Internet Explorer). For IE, I simply change the MIME type to text/html and cross my fingers (ok, in fairness, I did do some tweaking and did design a horrid little HTML table-based fallback menu).

Anyway, for my slanted comment links, I use inline SVG. Here is a snip of the code for a blog comment:

  <div>

  </div>

Most browsers (IE included) simply ignore elements they do not recognize. So how does the above look to IE6? See the bold markup below:

  <div>

  </div>

So the svg:a element looks like a html:a element to IE. So in this one case, my inline SVG kinda sorta falls back as HTML content for the one browser that doesn’t support SVG (again, Internet Explorer). Yes, I know – horrible horrible horrible. However, it works. I kind of shudder to think what this would do in IE8 (without an SVG plugin), I guess I’ll have to test it eventually.

Oh, and if you don’t know what I mean by slanty comments, well you’ll just have to post a comment…

Out of 58 tests involving animation, WebKit r31344 fails 54, gets 3 of the tests partially right and only gets 1 test to completely pass. To put this into ‘acid’ terms, this means that WebKit r31344 gets a score of 5/116 when it comes to SVG animation support (as compared to Opera 9.5′s 110/116). See my top-secret scoring mechanism here.

My concern at this point is that releasing such a nonconforming SMIL implementation into the wild will just frustrate authors and users. But I suppose there isn’t much SMIL out there at the moment. Here’s one data point, at least: My menus no longer animate properly in WebKit r31344, producing ‘fluttering’ icons… Is there a way I can turn off WebKit’s native SMIL when visiting my website? Does anyone know of any other sites out there using SMIL in their UI?

Anyway, I’m very much looking forward to future Webkit releases that will improve upon the SMIL implementation – and please release the build for Windows too. And I would be remiss if I didn’t congratulate the WebKit team for releasing a downloadable application that shows 100/100 on Acid3. Hopefully this post is just a little bit of cold water in the face to those fans thinking that WebKit is somehow “perfect”

What does it mean for Apple and Opera fans? Probably a lot. What does it mean for web standardistas? Apple and Opera care (more?). What does this all actually mean for web developers at the moment? Not a single thing. Oh well, time to tally up my own similarly-meaningless SVG support score…

[Update 10:25 PM CST: Apple did it. They are the first to achieve 100/100 in Acid3 with a publicly downloadable browser (even if it is only for MacOS)]

As with all experiments of late, you need a cool browser like Opera, Firefox or Safari to see this stuff. I’d be interested to hear if Konqueror 4.0 supports it. Internet Explorer will just not do, I’m afraid.

I currently use SMIL in my menu above, in the leering FakeSmile icon to the right (which I’ve inlined to see what happens when it gets aggregated in feed readers like Planet Venus), and now in my comment box when you focus and blur it.

Yes, this is just shiggles and not very productive – but I’m not alone in experimenting with some advanced web features on my blog.

Yes, SMIL intermixes “presentational”-type markup with “content” markup – but SMIL Timesheets looks to me like an attempt by the SYMM Working Group to address this. Maybe something in the future for FakeSmile to support?

And yes, it’s kinda fun. SMIL is the blink tag of the new millenium…

Oh, and in case you missed it above, I’ve started using SMIL in my blog’s comment textarea – that’s XHTML, not SVG. The FakeSmile library supports a limited subset of SMIL functionality in not just SVG content but on any attribute in a XML-based language (provided you properly namespace where required, like in XHTML):

That’s what makes XHTML so attractive to me – the X is for eXtensibility. While I still support the effort, the current HTML 5 activity is mostly focused on SVG (and to a lesser extent MathML) integration with text/html. I hope they do address more flexible extensibility within HTML5 at a later date. It would be great if someone had already done HTML+SMIL so there was some basis off which to work. Snarkiness aside, I will admit to not understanding the ins-and-outs of namespaces within HTML and all the problems it poses, but I’m trying to learn in my spare time…

One semi-amusing footnote: You won’t see the textarea expand when you focus it in Opera. This is because Opera supports SMIL-in-SVG already, so the FakeSmile script is not executed (short-circuited). It would be great if Opera went ahead with XHTML+SMIL support. I’m not sure why that hasn’t happened yet…

[Update: David has fixed his library to allow Opera to use the library for XHTML+SMIL as well as interpolate between properties with units (i.e. 2em).]