intertwingly

The candy-to-content ratio of the source is appalling - 5:1 (10K:2K approx) for the SVG to HTML+CSS versions.
And there is no semantic value in the SVG.

I’m all for SVG, but not so sure about SVG in HTML - surely SVG enhancements applied using XBL would be a better future solution for this sort of thing?

"perhaps it could even work on IE."

who cares? IE is the past. HTML5 and modern browser are the future

Go WHATWG, W3C HTML5 working group!

orlando ( from argentina )

Sean: I happen to believe that the candy is the content, that “semantics” are overrated — the true value that we need to optimize is view source (see my presentations), and that XBL is still essentially science fiction at this point.

It even looks great on a reasonably powerful mobile browser (Mobile Safari, in this case):

[link]
[link]

Hmm. The text in the glossy SVG page is too big for the bounding boxes and overflows. This might be my UA (chromium 4.0.222.4~svn20091011r28689-0ubuntu1~ucd1), as it fits ok for me with Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1) Gecko/20090707 Iceweasel/3.5 (Debian-3.5-1) (i.e. Firefox 3.5).

if I try to resize the page, with chromium all the elements resize proportionally. This might be because they are all defined proportionally (haven’t checked) or because chromium does a “full zoom”. Amusingly if I zoom out a lot I can see a grey box warning underneath telling me that “you are using a browser which doesn’t support SVG and so you get the boring looking page.”

Back to FF 3.5, with or without “full zoom” I cannot resize it at all (better hope you made the right font size choices for my poor eyes, Mr. Emacs!)

Those issues aside, it’s nice to see SVG graphics in use like that, it’s just a shame that the one killer feature for me about SVG graphics (accurate scaling) doesn’t work in the two browsers I’ve tried with this example.

Yes, I definitely want to fix that bug you point to, which is basically to support direct HTML5 embedding into a page, with some of the restrictions you’ve found yourself (no XML empty tags, for example). Can’t wait to knock that one out :)

BTW, at some point I’m going to open up the View Source tutorial series as something that anyone can do on any blog. We will have a small JS script and some basic metadata you drop into one of the tutorials identifying the license, tags for the technologies used, etc. The JS file will live at one location and act as a ping that basically identifies that another View Source tutorial has been created on the web. The blog author will also have a nice badge they can drop on the blog post. We’re still baking the ideas. The cool thing is that the View Source tutorial would then show up on the Open Web Developer Network (owdn.org) we’ve been kicking around, and users can find them and rate them. So you get the benefits of centralization (discovery) coupled with the benefits of the web (decentralized content creation). What do you think? Still baking as I said; jump on the Open Web Advocacy list if you are interested.

10/GUI. ignorethecode.net (2009-10-14). Technological civilization is awesome (cont’d). (Linked Wednesday 2009-10-14.) Extend the ACORN Standard! jwalker@reason.com (Jesse Walker), Jesse Walker: Reason Magazine articles and blog posts. (2009-......

I just think it’s ugly. Nothing more to add to that.