Re: HTML5 and SVG

Hello Patrick,

--Original Message--:
>We resolved the issue with overflow and SVG in HTML.  However, we have been experiementing with the default developer experience of SVG in HTML5.  We believe that developers more than often will simply use the <svg> tag to deliniate vector graphics.  e.g.
>
><h1>Hello</h1>
>Some Text
><svg><rect ../></svg>
>
>By default the sizing should be 100% on the SVG.  Does that mean it should 
>   resolve to the dimensions of the SVG contained therein
>   should it take into account overflo
>   should it adjust document layout if the size changes

Are you aware of the work done by the Compound Documents Format (CDF)
working group (now defunct).

It was formed to address these sort of issues when trying to mix different
namespaces in XML. That work predates the HTML5 effort but it did include
representatives of most of the browser vendors.

I believe a lot of the considerations apply directly to the HTML5 case. So
you should read these documents as prerequisite since many questions such
as the one you posted were considered at length at F2Fs and many telconfs:

http://www.w3.org/TR/WICD/
http://www.w3.org/TR/2007/CR-CDR-20070718/

Now for an interpretation of your question which was faced during
the CDF work as well:

<html>
<h1>Hello</h1>
Some text<svg><rect width="100%" height="100%"/></svg>

That example should (almost) answer the question for you.
"By default the sizing should be 100% on the SVG.
   Does that mean it should"
a) "resolve to the dimensions of the SVG contained therein?"
b) "should it take into account overflo"
c) "should it adjust document layout if the size changes"

(a) clearly is impossible. The rect has size 100%, so has
no intrinsic size unless the containing <svg> establishes one.
(b) No. overflow is overflow _out_ of the established viewport size
    otherwise it isn't overflow anymore, is it?
(c) Correct.

The most logical size to take is 100% of the containing block.
So, for example:

<html>
<h1>Hello again</h1>
<div>
<svg><rect rx="2%" width="100%" height="100%" fill="yellow"/></svg>
This is a nice div with a yellow background that's a rounded rect.
<p>And another paragraph</p>
</div>
</html>

Something like that should show a yellow rounded rect as the
background for the <div>. That example won't work anywhere
but I hope you understand the intention.

The SVG content can never size from what's inside the tags
due to the possibility of percentage sizing of the content itself
is important to remember.

Cheers,
Alex

Received on Friday, 16 July 2010 22:55:02 UTC