SVG in HTML5 served as text/html and foreignObject validation issues

Back on 12 April 2008 I built an HTML page with SVG served as text/html off of the college server. At that time the page could only be rendered by Amaya 10. This past June Mozilla Developer Preview 3.7 alpha 5 rendered the page with namespaces still present. I removed the namespaces and added a MathMl chunk and the page both renders and validates.

A check of FireFox 3.6.6 with html5.enable set to true also renders the page.
FireFox 3.6.6 with html5.enable set to true

The complication comes with foreignObject. A similar page renders correctly in FireFox 3.6.6 with html5.enable set to true as seen above, but does not correctly render in Mozilla Developer Preview 3.7 alpha 5.The page renders everything except the SVG that follows the HTML foreignObject inside the SVG chunk as seen below. Note that not only is the SVG not rendered, but (off-screen in the image below) the HTML that follows the SVG with the foreignObject is NOT styled by the CSS.
Mozilla Developer Preview 3.7 alpha 5

The new Gecko 1.9.3 HTML5 enabled parser is quoted as supporting foreignObject in SVG, and this remains true for XHTML parsed by the XML parser. I have an XHTML5 page that is valid XHTML with an HTML foreignObject in an SVG chunk. I copied the chunk, deleted the namespace calls, and found that the resulting page rendered correctly in 3.6.6 but not in 3.7a5. This is puzzling and remains under study as I write this.

Opera Version 10.60 Build 3445 does not render either the MathMl nor the SVG in the html5 document. Opera 10.60 does render MathMl and SVG in XHTML5 documents. Support for foreignObject, appears to be absent based on a MathMl object in SVG and an XHTML object in SVG. Since Opera reports that foreignObject is supported back in Opera 9, I am somewhat baffled. The cited pages render in FireFox and both validate.

Update: "The foreignObject support in Opera 9 is only for when you link to external content via xlink:href IIRC (as specified in SVG 1.2 Tiny)." - Erik. Thanks Erik! I should note that even on my best day I am a moron.

Google Chrome 5.0.375.99 beta can render XHTML5 including foreignObject chunks but not SVG and MathMl served at HTML, let alone pages with foreignObject.

At this time the page served as text/html with foreignObject does not validate. The problem is that the validator objects to the second appearance of the html tag. Removal of the tag, however, causes the foreignObject to fail to render at all.

Comments

  1. The foreignObject support in Opera 9 is only for when you link to external content via xlink:href IIRC (as specified in SVG 1.2 Tiny).

    ReplyDelete
  2. Thanks, Eric! Although I keep and use a mix of Mozilla FireFox, Google Chrome, Opera, and yes even IE8, I do not keep up with the details on the rendering engines. Thanks for the clarification!

    ReplyDelete
  3. Post-script: This was deemed a new bug, Bug 577418 - [HTML5] Parser does not return to SVG namespace after encountering foreignObject with html and body tags. I built a more focused example including images of the correct and incorrect rendering. The bug has a even simpler and more direct test case built by Robert Longson.

    ReplyDelete

Post a Comment

Popular posts from this blog

Plotting polar coordinates in Desmos and a vector addition demonstrator

Setting up a boxplot chart in Google Sheets with multiple boxplots on a single chart

Traditional food dishes of Micronesia