W3C home > Mailing lists > Public > www-svg@w3.org > August 2010

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

From: Charles Pritchard <chuck@jumis.com>
Date: Mon, 23 Aug 2010 16:51:37 -0700
Message-ID: <4C730989.3050400@jumis.com>
To: Patrick Dengler <patd@microsoft.com>
CC: Ian Hickson <ian@hixie.ch>, Tony Schreiner <tonyschr@microsoft.com>, Kevin Ar18 <kevinar18@hotmail.com>, "www-svg@w3.org" <www-svg@w3.org>
  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 

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.


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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:27 UTC