As part of a talk I did down at Kansai Open Forum in Osaka last week, I played around with ways to use the SVG foreignObject tag and came up with this quick header menu example (note: requires a FF3 build). The example shows two svg graphics, one for each language menu, with some rotated foreignObject elements enclosing HTML anchor tags. A bit silly since SVG has its own anchor tag but for those who feel more comfortable working with HTML layout it’s an easy way to get interesting rotated layouts. Others like Mark Finkle have blogged about this before but I wanted to explore the types of situations where this might be useful.

Note: the Webkit folks have proposed some interesting additions to CSS to allow for transformations with which you wouldn’t need SVG foreignObject’s lay out elements like this.

P.S. Who knew that CSS stood for “Combat Service Support”?!? Oy vey…