[whatwg] Including HTML more directly into SVG

Tue Sep 11 01:15:12 PDT 2012

On Mon, Sep 10, 2012 at 4:59 PM, Tab Atkins Jr. <jackalmage at gmail.com> wrote:
> ...
>
> This would be a lot easier if I could somehow invoke the CSS box model
> inside of SVG, ...

This tightly binds the list of element names in SVG to HTML, and also
breaks assumptions inside SVG DOM that HTML5 may depend upon. Indeed
SVG already has elements like <title>, <a> and <style>.

<svg>
  <a><a>
  <title></title>
  <section></section>
</svg>

The <title> and <a> elements are SVGTitleElement and SVGAElement
respectively and not HTMLElements.
The section element is an SVGElement, not an HTMLElement. This isn't
actually defined yet, but gives SVG authors some flexibility with
unknown elements when embedded in HTML5.

It would be really unfortunate if the SVG folks were prevented from
using logical names like <content> or <section> because we parse them
into HTML.

>
> Another solution could be SVG inventing their own elements for these
> kinds of things.  For example, #1 could be solved with an <svg:span>
> or <svg:p> element.  Having duplicate elements in multiple namespaces
> is regarded as an antipattern, ...

SVG has a totally different font and styling model, different kinds of
animations, filters, etc. The paragraph and span concept in SVG
wouldn't be the same thing so it's not an antipattern. You would have
to specify some kind of x/y coordinate and the width since SVG doesn't
have a flow concept so there would be nothing to size or place
against.

Even if you could use HTML in the flow chart example it's not enough
to use <p> since that wouldn't make the green <rect> any larger as SVG
doesn't have a concept of nesting text inside a rect, and if you moved
the <rect> to be a <div> now you have the problem of making sure the
lines that come out of the box still connect with the sides of box.

You'd also have problems like losing access to the <font>'s you
defined in the SVG world in the embedded HTML world.

Might be nice to add an <html> element with x/y width/height
attributes to make <foreignObject> easier though!

- E