svg:foreignobject in Firefox 3
June 20th, 2006
Thse svg:foreignobject changes in Firefox 3 are pretty sweet. If you have a Firefox 3.0 trunk build which was built by Cairo (e.g. Windows builds here) you’ll be able to use this testcase which let’s you render content, rotate it and zoom it.
Robert O’Callahan did note there are a lot of bugs:
- Popups (e.g. SELECT comboboxes) — actually it’s not 100% clear how these should work
- Some theme problems
- Scrolling
- Some painting problems on Windows (apparently)
- incredibly SLOW performance; some for reasons we understand and can fix, some for reasons that are fundamental (rotating images is slower than just drawing them normally), and probably some for reasons we don’t understand yet
- Seams between rotated rectangular areas (e.g. visible in the Google logo in the screenshot below). These are fundamental with cairo’s coverage-based antialiasing strategy, and we may have to move to FSAA to get rid of them.
I’ve noticed a couple of rendering bugs – for example when content is rotated and you scroll it, the whole screen doesn’t update. Flash movies also don’t rotate and Firefox crashed when I rotated TinyMCE.
About the Author: Hi! I'm Ken. I've been using mobiles for over 10 years and technology for a lot longer! I'd love to hear from you.
- Browsers , Firefox , Web Development
- Comments(3)
I’m not sure why someone wanted to turn a webpage. It might be a nice gimmick or something, but is there any real usecase? I could only think of some image service that allows you to turn a (thumbnail) preview of your pic instead of having to turn it on their servers and update the preview everytime. If it’s used similar to those DHTML effects that animate going from page to page it’ll get annoying pretty fast, as it prevents you from doing something right.
One other usecase might be an analog clock and the hands are turned by JS. However, these might look better and are better supported if realized in e.g. Flash.
However the zoom function seems pretty nice if all bugs are fixed and it will hopefully allow *real* zoom in 3.0 like Opera does/did for years and IE7 builds do more or less statisfying. Nice to see that they are working on some good features while still managing to create "final" versions that offer some of the advantages to the everyday users (e.g. developing Firefox 2.0 in time altghough it misses some features that could be implemented if they had took more time.). I’m thinking of phpBB which took years to implement some "trivial" features because they were working on a bunch of other features and didn’t include or update the already finished features for older builds (in this case phpBB 2.0x).
xeen
Well, I don’t think there’s any point of being able to rotate but it’s a nice handy demonstration of what you can do using svg:foreignobject. It’s implemented like this:
It’s simply a way of embedding HTML documents inside SVG documents. The rest is just SVG features. I can’t think of any real uses either but I’m sure someone will think of some way to combine SVG features and iframes.
Perhaps someone could create a 3D carousel (like when you switch between desktops in XGL) which could transform and change the opacity of different pages to achieve the effect.
Stunning work from the Mozilla team!!!!
The real power of foreign objects comes from the ability to use XHTML controls inside your SVG. You can now have text boxes, drop down boxes etc. in your SVG.
Scaling and rotating is critical and very useful. You can now create a website that scales exactly to the user’s screen with much, much more control than previously possible. Our website – http://www.locateandtrade.com – can do this, but scaling is currently disabled because scaling foreign objects is immature under Firefox and Opera. It looks like we will be able to flick the switch within a couple of months though