<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:html="http://www.w3.org/1999/xhtml" height="800" width="800">
  <g transform="translate(50,50)">
    <polygon points="0,0 300,0 300,300 0,300" style="fill:lightblue; stroke:red;"/>
    <!-- switch -->
    <foreignObject x="10" y="10" width="280" height="280"
                   requiredExtensions="http://www.mozilla.org/SVGExtensions/EmbeddedXHTML">
      <html:b>Absolute Lineto</html:b><html:br/>
       &lt;path d="M50,80 L250,80 150,280 z" 
                style="fill:red; stroke:blue;"/&gt;
    </foreignObject>
    <!-- /switch -->
    <path d="M50,80 L250,80 150,280 z" 
          style="fill:red; stroke:blue;"/>
  </g>
  <g transform="translate(400,50)">
    <polygon points="0,0 300,0 300,300 0,300" style="fill:lightblue; stroke:red;"/>
    <!-- switch -->
    <foreignObject x="10" y="10" width="280" height="280"
                   requiredExtensions="http://www.mozilla.org/SVGExtensions/EmbeddedXHTML">
      <html:b>Relative Lineto</html:b><html:br/>
       &lt;path d="M50,80 l200,0 -100,200 z" 
                style="fill:red; stroke:blue;"/&gt;
    </foreignObject>
    <!-- /switch -->
    <path d="M50,80 l200,0 -100,200 z" 
          style="fill:red; stroke:blue;"/>
  </g>
  <g transform="translate(50,400)">
    <polygon points="0,0 300,0 300,300 0,300" style="fill:lightblue; stroke:red;"/>
    <!-- switch -->
    <foreignObject x="10" y="10" width="280" height="280"
                   requiredExtensions="http://www.mozilla.org/SVGExtensions/EmbeddedXHTML">
      <html:b>Abs. Horizontal and Vertical Lineto</html:b><html:br/>
       &lt;path d="M50,80 H250 V280 H50 z" 
                style="fill:yellow; stroke:green;"/&gt;
    </foreignObject>
    <!-- switch -->
    <path d="M50,80 H250 V280 H50 z" 
          style="fill:yellow; stroke:green;"/>
  </g>
  <g transform="translate(400,400)">
    <polygon points="0,0 300,0 300,300 0,300" style="fill:lightblue; stroke:red;"/>
    <!-- switch -->
    <foreignObject x="10" y="10" width="280" height="280"
                   requiredExtensions="http://www.mozilla.org/SVGExtensions/EmbeddedXHTML">
      <html:b>Rel. Horizontal and Vertical Lineto</html:b><html:br/>
       &lt;path d="M50,80 h200 v200 h-200 z" 
                style="fill:yellow; stroke:green;"/&gt;
    </foreignObject>
    <!-- switch -->
    <path d="M50,80 h200 v200 h-200 z" 
          style="fill:yellow; stroke:green;"/>
  </g>
</svg> 
