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.
Unfortunately, whatever syntax we end up using, people will copy and paste it from documents that were written by competent authors that tested it against the new UAs, into documents written by authors who don't know about this, and who don't have the new UA, thus creating new "legacy documents" that use whatever syntax we come up with. -Hixie
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.
What's the error handling intended to be for this idea?
<svg> as document element
This is not a syntax proposal but I'd like to able to have SVG graphics in text/html without the need to wrap it inside HTML and without having implied <html>, <body>, etc. (I being Anne.)
- It's often easier to generate text/html documents than other types of documents (Live DOM Viewer, PHP)
- It allows you to use text/html-style syntax for SVG graphics which makes authoring easy.
- It makes creating graphics that use features from HTML and MathML easier.
<svg viewbox="0 0 10 10"> <circle x=5 y=5 r=5 fill=lime> <foreignObject> <table><tr><td>1<td>2<tr><td>3<td>4</table> </foreignOBJECT> </svG>