F2F/Seattle 2011/Agenda/HTMLinSVG

HTML in SVG

INCOMPLETE- NOT READY FOR REVIEW

Right now, the authors have to use <foreignObject> to embed HTML elements in SVG. For example:

<svg ....>

<foreignObject x="10" y="10" width="200" height="200">
     <ul>
         <li>item A</li>
         <li>item B</li>
         <li>item C</li>
     </ul>
</foreignObject>

</svg>

or, for a block of text:

<svg ...>
<foreignObject x="10" y="10" width="200" height="200">
     <div class="my-block">
          <p>....</p>
          <p>... <span>...</span></p>
     </div>
</foreignObject>
</svg>

One option is to not address this problem. However, it would be a lot easier if the elements could be used more easily.

Option 1

This first option is to add x/y to html root or to all elements. It would look like the following:

<svg...>
     <div class="my-block" style="x:10; y:10; width:200; height:200">
         <p>....</p>
         <p>... <span>...</span></p>
     </div>
</svg>

The initial value for x and y would be 0. x would be an offset along the x-axis in the user space coordinate system and y an offset along the y-axis. The width and height would be in that same coordinate system too and the containing block would be defined as the SVG viewport.

Option 2

This second option is to "cast SVG model in terms that CSS can manipulate". It would look like the following:

<svg...>
     <div class="my-block" style="left:10; top:10; width:200; height:200">
         <p>....</p>
         <p>... <span>...</span></p>
     </div>
</svg>

SVG in HTML

IMPORTANT NOTE: This proposal is no longer considered following the July 2011 Seattle F2F meeting.

To insert SVG graphics into an HTML element, it needs to be wrapped into an SVG element. For example:

<table>
    <tr>
        <td>
            <svg ...>
                 <circle r="20" fill="red" />
            </svg>
         <td>
            <svg ...>
                 <rect width="40" height="40" fill="orange" />
            </svg>
        </td>
    </tr>
</table>

It would be easier to be able to express this as:

<table>
    <tr>
        <td>
            <circle r="20" fill="red" />
         <td>
            <rect width="40" height="40" fill="orange" />
        </td>
    </tr>
</table>

and define that:

1. For SVG elements other than <svg> embedded directly in an HTML element, the element's transform is ignored
2. The element's bounding box is used to have the element participate in the CSS visual formatting.