Re: How does the svg element handle CSS border and background-color?

  There are two routes to go; first, as an embedded context, much like 
Canvas 2d Context.

SVG is treated as an embedded block and falls within the standard CSS 
Box model.
This is where things seem to be, SVG+HTML 5 profile is being supported 
by Mozilla.

// This might be valid. SVG width/height defaults inherited.
#svgElem { border: 1px solid blue; stroke: 2px solid green; }
<svg id="svgElem">...<circle>...</circle></svg>

I'm sure we'd all like to see SVG extend the CSS line-box model
so that text and polygon areas may flow, intuitively.

This kind of integration has been mocked up several times. Here's one 
example:
http://www.csstextwrap.com/


At this point, I'd recommend treating SVG as a block element/rendering 
context (think <canvas>, with better CSS support),
as Mozilla has done, all-the-while sending in suggestions to www-svg 
with the intent
of better integrating existing CSS modules for an SVG 2.0 spec.

CSS+Canvas 2d should be integrated into an SVG profile before we look
at bringing SVG into tighter integration with HTML.


-Charles

On 8/23/2010 4:37 PM, Patrick Dengler wrote:
> Hi Ian,
>
> At the last SVG Face to Face, we were debating how and where to answer these questions about SVG embedded in HTML.  I am not sure from your answer below whether you intend to visit this in the HTML working group, or whether you expect us to define this within the SVG Working Group.
>
> At the very least, at the SVG Face-to-Face, a few vendors agreed to push some tests up somewhere so we could make sure we agree on the scenarios to start.
>
> Are there areas in the spec that clearly define the expected behavior as we move forward with SVG in HTML?  I think that we need to think of it beyond foreign content and more like stylable, scriptable, vector graphics integrated into web pages.
>
> Patrick Dengler
>
>
> -----Original Message-----
> From: www-svg-request@w3.org [mailto:www-svg-request@w3.org] On Behalf Of Ian Hickson
> Sent: Saturday, August 21, 2010 11:22 AM
> To: Tony Schreiner
> Cc: Kevin Ar18; www-svg@w3.org
> Subject: RE: How does the svg element handle CSS border and background-color?
>
> On Thu, 19 Aug 2010, Tony Schreiner wrote:
>> I strongly disagree with Jeff's interpretation of the spec. I have yet
>> to find the behavior clearly spelled out in any combination of specs
>> but the HTML5 spec says the following:
>>
>> "The svg element from the SVG namespace falls into the embedded
>> content, phrasing content, and flow content categories for the
>> purposes of the content models in this specification."
>>
>> Between this, working with our own CSS experts, and working from first
>> principles with the long-term future of SVG in mind, I've understood
>> this to mean that when an<svg>  element is embedded in HTML5 or XHTML,
>> that outermost element does participate in the box model, and as such
>> CSS formatting such as backgrounds, borders, margin, and padding
>> should apply to that outermost SVG element, just like it would to a
>> <div>,<img>,<iframe>  or any similar element.
> The line you cite does not mean that. All it means is that for the purposes of document conformance -- something that only affects authors, validators, and editors (including contenteditable implementations), but does not affect in any way CSS rendering rules or parsing or anything like that -- the<svg>  element falls into certain content model categories.
>
> You should never need to read between the lines in the HTML spec; I've tried to make everything very explicit.
>

Received on Monday, 23 August 2010 23:52:01 UTC