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

Hi all. I'm new to the mailing list so I should introduce myself: I'm a developer on IE9 working on SVG, including implementing support for the various ways that SVG content can be embedded into HTML5 and XHTML.

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 list of CSS properties Jeff referenced are the ones that apply to the SVG content itself, but I would argue that when the outermost SVG element is embedded in HTML it must behave on equal footing with similar HTML elements. Going even further, when embedded in HTML the outermost SVG element should also support being directly styled a block or inline block, positioned as absolute, relative, or fixed, and so on. None of these styles are in that list, and none of these make sense for the SVG content itself, but they do make sense on the root SVG container element in HTML.

IE9's implementation has also been guided by interoperability principles when the specification is ambiguous. Attached is a simple example which renders (nearly) identically across Opera, Firefox, Chrome, Safari, and IE9 Platform Preview 4. This suggests that up until now the interpretation has always been that borders, backgrounds, and similar HTML CSS properties should apply. It would be a huge step backwards to start treating <svg> in HTML as some kind of special kind of element with reduced capability.

Cheers,
- Tony Schreiner

From: www-svg-request@w3.org [mailto:www-svg-request@w3.org] On Behalf Of Kevin Ar18
Sent: Wednesday, August 18, 2010 5:57 PM
To: www-svg@w3.org
Cc: www-svg@w3.org
Subject: RE: How does the svg element handle CSS border and background-color?

After considering it, I tend to agree with the assesment, seeing as the HTML5 spec defines the svg element as being in the SVG Namespace.  However, there is confusion about the finer details of how svg should embed into html; there are various bugs in each browser... and the Gecko implementers seem to have a different view regarding the spec and implementation.

I would like to submit a "clarification note" for the SVG and HTML5 spec -- so, that there is no question what the spec means on some of the issues, as well as to make it easier for me to convince the implementers of the right way to implement the spec (instead of having to argue over it).
Would the mailing list be a good first place to submit a proposal (regarding the SVG spec), or should I go directly to the w3 bug system?


________________________________
From: codedread@gmail.com
Date: Wed, 18 Aug 2010 14:58:20 -0700
To: kevinar18@hotmail.com
CC: www-svg@w3.org
Subject: Re: How does the svg element handle CSS border and background-color?

My interpretation: putting it inside a HTML5 document is no different than putting it inside a XHTML document which is no different than referencing it in a <object> and having all documents reference the same CSS file:  applying a border CSS property to any SVG element has no visual effect.

<div style='border: 1px solid green'>
  <svg style='border: 1px dashed red'>
    ...
  </svg>
</div>

The div will only have a green solid border.  No red should be visible.  This has the same visual effect as:

  <object style='border: 1px solid green' data='foo.svg'/>

I guess I'm not understanding your confusion.

Also, this is a SVG-CSS issue (with behavior already clearly specified in the link I provided).  It has nothing to do with HTML5 as far as I can tell.

Regards,
Jeff Schiller

On Wed, Aug 18, 2010 at 2:34 PM, Kevin Ar18 <kevinar18@hotmail.com<mailto:kevinar18@hotmail.com>> wrote:
Those properties are not applicable to SVG elements. See the list of CSS properties that can be applied to SVG elements here: http://www.w3.org/TR/2010/WD-SVG11-20100622/styling.html#SVGStylingProperties

That is what I thought.  However, the problem area is putting the svg tag inside an html5 document.  You can then apply background-color, borders, etc.....
Several questions:
* Should the HTML5 spec forbid applying non-svg properties to the svg element when embedded in an html5 document?  (I'm not sure if this would work though)

* Should the CSS properties be allowed, but with special conditions?