1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
  
     | 
    
      <!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title><svg>'s HTML integration points</title>
  </head>
  <body>
    <!-- self-closed elements -->
    <svg>
      <title/>
      <desc/>
      <foreignObject height=0 width=0 />
    </svg>
    <!-- null-content elements -->
    <svg>
      <title></title>
      <desc></desc>
      <foreignObject height=0 width=0></foreignObject>
    </svg>
    <!-- just white space -->
    <svg>
      <title>
      </title>
      <desc>
      </desc>
      <foreignObject height=0 width=0>
      </foreignObject>
    </svg>
    <!-- plain text -->
    <svg>
      <title>foo</title>
      <desc>foo</desc>
      <foreignObject height=0 width=0>foo</foreignObject>
    </svg>
    <!-- phrasing content -->
    <svg>
      <title>
        fee
        <a href="//example.com/">fi</a>
        <em>fo</em>
        <svg>
          <title>fum</title>
        </svg>
        <svg>
          <title>
            <svg>
              <title>
                <svg>
                  <title>Yes, this is somehow totally valid.</title>
                </svg>
              </title>
            </svg>
          </title>
        </svg>
      </title>
      <desc>
        fee
        <a href="//example.com/">fi</a>
        <em>fo</em>
        <svg>
          <title>fum</title>
        </svg>
        <svg>
          <title>
            <svg>
              <title>
                <svg>
                  <title>Yes, this is somehow totally valid.</title>
                </svg>
              </title>
            </svg>
          </title>
        </svg>
      </desc>
      <foreignObject height=0 width=0>
        fee
        <a href="//example.com/">fi</a>
        <em>fo</em>
        <svg>
          <title>fum</title>
        </svg>
        <svg>
          <title>
            <svg>
              <title>
                <svg>
                  <title>Yes, this is somehow totally valid.</title>
                </svg>
              </title>
            </svg>
          </title>
        </svg>
      </foreignObject>
    </svg>
    <!-- flow content (<title> cannot have it, it only allows phrasing) -->
    <svg>
      <desc>
        <section>
          <h1>Heading</h1>
        </section>
      </desc>
      <foreignObject height=0 width=0>
        <section>
          <h1>Heading</h1>
        </section>
      </foreignObject>
    </svg>
    <!-- metadata content not allowable in flow content (<title> and <foreignObject> cannot have this, only <desc>) -->
    <svg>
      <desc>
        <style> /* */ </style>
        <link href="/whatever" rel="stylesheet">
        <title>I'm an HTML <title>!</title>
      </desc>
    </svg>
  </body>
</html>
 
     |