Re: Coordinate spaces in SVG and CSS

On Thu, 25 Mar 2010 01:00:19 +0100, Tab Atkins Jr. <jackalmage@gmail.com>  
wrote:

> I'm trying to spec background-repeat:extend in the CSS3 Images module.
>  This new value is essentially designed for gradients, but has
> potential application to SVG as well, and I'd like some collaboration
> on the best way to talk about this to retain working compat between
> SVG's concepts and the new ones I'll be writing.
>
> First, some background.  A CSS gradient is a new value for the <image>
> production in CSS.  Gradients, by their nature, paint themselves on an
> infinite canvas, just like a solid color does.  However, when used in
> CSS, such as in a background-image rule, the gradient is then clipped
> to the size of the box.  This clipped image can then be manipulated
> via background-size, background-position, etc.  (That is, given a rule
> like "background: -moz-linear-gradient(left, yellow, blue) gray 50px
> center no-repeat;", you can clearly see that the gradient is clipped
> to a rectangular region and shifted by 50px to the right, revealing a
> stripe of background-color underneath it.)  However, I am adding the
> 'extend' value to background-repeat which changes this behavior, and
> stops the clipping.  (In the example given, if
> background-repeat:extend; was specified, you wouldn't see any gray;
> the yellow that started the gradient would continue to extend
> leftwards, filling that 50px stripe.)

How would background-repeat:extend affect a raster image?

> I'd like to define all of this in a generic way that can be hooked
> into by later additions, and by SVG.  Fantasai brought up that this
> could be useful to allow an SVG image to 'overflow' its
> viewbox(viewport?).

Before the raster image question has been answered it's hard to answer how  
this could/should apply to svg.

If we take a concrete example - an <object> element that references some  
svg content, then current SVG/HTML implementations don't allow overflowing  
the <object> viewport, but allows the SVG to overflow its viewBox if the  
viewport has a different aspect ratio (than that of the viewBox). The  
overflow is only visible in certain cases then.

The CSS background case is still a bit underdefined for SVG content and  
current implementations may differ on what happens when the area to fill  
has a different aspectratio from the viewBox (if specified). I think it  
would be great to get that properly defined in a spec somewhere.

> I believe, then, that it would be best to define this in terms of
> viewport coordinate spaces.  I need some term to refer to 'the box
> comprising 0%-100% height and width, in the given coordinate space' to
> start with - this will be the box that gradients are sized and
> positioned relative to and clipped to by default.  Is there an
> existing term in SVG for this?

I think "initial viewport coordinate system"[1] fits what you describe  
(that's exclusive of any viewBox).

Cheers
/Erik

[1] http://www.w3.org/TR/SVG11/coords.html#InitialCoordinateSystem

-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Thursday, 25 March 2010 09:48:59 UTC