A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members).

Difference between revisions of "Diagrams in HTML"

From WHATWG Wiki
Jump to: navigation, search
(+spec)
 
(37 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Please put ideas for what it should look like here:
+
{{obsolete|spec=[http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#svg-0 HTML Standard: SVG]}}
 +
 
 +
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 ==
 +
 
 +
<pre>
 +
<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>
 +
</pre>
 +
 
 +
Tokeniser recovers from errors by ignoring them and moving on.
 +
 
 +
Tree construction recovers from errors by closing the <svg> element.
 +
 
 +
== Extensibility Element (<ext>) ==
 +
 
 +
Moved to [[Extensions#Proposal_2:_Extensibility_Element_.28.3Cext.3E.29|Extensions]], since this is a potentially generic mechanism.
 +
 
 +
''Make sure to [http://software.hixie.ch/utilities/js/live-dom-viewer/?%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%09%3Ctitle%3EHTML%20Extensibility%20Test%3C%2Ftitle%3E%0A%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%09%3Ch1%20id%3D%22test_of_extensibility%22%3ETest%20of%20Extensibility%3C%2Fh1%3E%0A%09%3Cp%3EThis%20is%20a%20test%20of%20an%20extensibility%20point%20in%20text%2Fhtml%2C%20with%20a%20fallback%20mechanism.%3C%2Fp%3E%0A%09%0A%09%3Cext%3E%0A%09%09%3Cfallback%3E%0A%09%09%09%3Cimg%20src%3D%22image%22%2F%3E%0A%09%09%3C%2Ffallback%3E%0A%09%09%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%09%09%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%09%09%20%20%20%20%20width%3D%22100%25%22%20height%3D%22100%25%22%0A%09%09%20%20%20%20%20version%3D%221.1%22%3E%0A%0A%09%09%09%3Ctitle%3EMy%20Title%3C%2Ftitle%3E%0A%09%09%09%3Cdesc%3Eschepers%2C%2001-04-2008%3C%2Fdesc%3E%0A%09%09%09%3Ccircle%20id%3D%22circle_1%22%20cx%3D%2275%22%20cy%3D%2225%22%20r%3D%2220%22%20fill%3D%22lime%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E%09%09%0A%09%3C%2Fext%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E test your proposals]... :-)''
 +
 
 +
== <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.)
 +
 
 +
Rationale:
 +
 
 +
* 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.
  
 
<pre>
 
<pre>
<p>Hello world. <svg viewbox="0 0 10 10"><circle x=5 y=5 r=5 stroke=green></svg> </p>
+
<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>
 
</pre>
 
</pre>
 +
 +
<font color="red">''It's not clear that authoring would be easier with looser error handling, and introduces the incompatibilities mentioned above.  A safer approach would be to first introduce the more conservative syntax, then observe how it is used and specify from real-world use cases incrementally.  It's also not clear how this is to be distinguished from SVG content with embedded HTML (MIME Type?).  -Shepazu''</font>

Latest revision as of 16:07, 10 November 2012

This document is obsolete.

For the current specification, see: HTML Standard: SVG


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.

Extensibility Element (<ext>)

Moved to Extensions, since this is a potentially generic mechanism.

Make sure to test your proposals... :-)

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

Rationale:

  • 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>

It's not clear that authoring would be easier with looser error handling, and introduces the incompatibilities mentioned above. A safer approach would be to first introduce the more conservative syntax, then observe how it is used and specify from real-world use cases incrementally. It's also not clear how this is to be distinguished from SVG content with embedded HTML (MIME Type?). -Shepazu