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.)
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.