Re: Mask property syntax and CSS <image>

On Sun, Aug 5, 2012 at 7:25 PM, Brian Birtles <bbirtles@mozilla.com> wrote:

> Hi,
>
> I'm just following up on some concerns with recent changes to SVG mask
> syntax.[1]
>
> Firstly, it looks like we'll replace the element() syntax with select() to
> avoid clashes with CSS Images.[2]
>
> Secondly, ideally we'd like to make the mask property take a CSS <image>
> value. However, that introduces the issue of how to differentiate between
> the following:
>
>   mask: url(#maskElem); // Existing usage. Process as an SVG <mask>.
>   mask: url(#imgElem);  // Valid CSS <image>.
>
> Ideally we'd like to be able to differentiate between special SVG mask
> element behaviour and regular CSS <image> processing at the parser level.
>
> Some <image> values are easy, e.g. image(), element(), linear-gradient()
> etc. we can just treat as images (if nested <url> components refer to masks
> too bad?)
>
> For url() values, we could use the presence of a #hash-reference to branch?
>
>   mask: url(abc.png); // Treat as image
>   mask: url(abc.svg); // Treat as image (-webkit-mask does this)
>   mask: url(#elem);        // SVG mask processing
>   mask: url(abc.svg#elem); // SVG mask processing
>
> I think you need to use image() if you want to use media fragment
> identifiers so we'd be ok there?
>
> Also, what about url(#imgElem)? Is that valid? To refer to arbitrary HTML
> content and apply usual CSS <image> processing?
>
> Once you hit the SVG mask processing branch I think we want to do
> target-specific processing (i.e. <mask> behaves differently to
> <linearGradient> behaves differently to <circle>) but maybe that's ok?
>
> Note that one implication of branching on # is that 'url(abc.svg)' will be
> treated the same as 'url(abc.png)', i.e. will get treated as an alpha mask.
> We won't be able to implement the 'vectors are luminance, rasters are
> alpha' strategy floated on www-svg recently.[3] It probably pushes us more
> towards 'default is alpha everywhere except <mask>' so you get consistent
> behaviour between:
>
>   mask: url(circle.svg); // alpha
>

that makes sense because the SVG is treated like an image.


>   mask: url(#circleElem); // alpha
>
> and, likewise,
>
>   mask: linear-gradient(...); // -webkit-mask makes this alpha
>   mask: url(#gradientElem); // alpha
>

I don't follow this. Why do these 3 examples use alpha?

I think we need feedback from designers/tool makers.
I know many designers use the same outlines of artwork as a mask. My fear
is that since luminosity is not the default and misunderstood, it will end
up not being implemented.

Rik