Diagrams in HTML
Please put ideas for what it should look like here.
Each example should have a green circle, with an embedded HTML table, and should say how to handle tokeniser errors and tree construction errors.
Hardcoded element names
<p> Hello world. <svg viewbox="0 0 10 10"> <circle x=5 y=5 r=5 stroke=green> <foreignObject> <table><tr><td>1<td>2<tr><td>3<td>4</table> </foreignObject> </svg> </p>
Tokeniser recovers from errors by ignoring them and moving on.
Tree construction recovers from errors by closing the <svg> element.
<p>Hello world. <ext> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"> <circle x="5" y="5 r="5" stroke="green"/> </svg> </ext> </p>
(The <ext> element would have a name that doesn't clash with existing content. Inside you can use XML.)
We should define a content model for where the <ext> element can occur, and if there are implications for different locations (such as inside a table, a paragraph, the head, etc). The simplest thing, at least for SVG (and probably MathML), would be that it would have the same restrictions as an <img> element. Also, there should be a default block model for <ext> in CSS.
Note that this is similar to IE's "XML islands" with the <xml> element. It's believed that there are some conflicts with the <xml> element itself, since it creates a separate document that is tied to the <xml> element in the DOM, but more research is needed.