SVG is a nice way to create vector graphics on the web and even embedded in HTML pages. Sometimes you might embed other markup into SVG and that’s where foreignObject comes in. From the W3 SVG1.1 spec:
The ‘foreignObject’ element allows for inclusion of a foreign namespace which has its graphical content drawn by a different user agent. The included foreign graphical content is subject to SVG transformations and compositing.
One of the most common uses (IMO) of using foreignObject is to embed HTML into SVG. The examples that come to mind are:
- Using HTML to simplify text wrapping – SVG’s text wrapping abilities are far from convenient. Using
tspanto create multiline text ranges is a pain. On the other hand, using an HTMLp,div, orspanis much easier. You also get list and formatting support. Here is an example of using HTML in SVG for text handling. - Using SVG transforms on HTML content – SVG’s transformation capabilities are fairly cool and can do things that HTML can’t. However, it is possible to use SVG transformations on a
foreignObjectthat holds HTML. Here is an example of SVG transforming (rotating and translating) HTML content.
Note: These examples will only work in a recent Firefox 3 alpha (or any browser that supports SVG foreignObject). And yes, these examples could have been done as SVG embedded in HTML or XUL as well.