Mask property syntax and CSS <image>

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
   mask: url(#circleElem); // alpha

and, likewise,

   mask: linear-gradient(...); // -webkit-mask makes this alpha
   mask: url(#gradientElem); // alpha

Can anyone help?

Thanks!

Best regards,

Brian Birtles

[1] https://svgwg.org/svg2-draft/masking.html#mask-property
[2] http://dev.w3.org/csswg/css4-images/
[3] http://lists.w3.org/Archives/Public/www-svg/2012Jul/0134.html

Received on Monday, 6 August 2012 02:25:59 UTC