[css3-images] Defining SVG paint servers as a CSS <image>

As the title states, I'd like to define SVG paint servers as a CSS
<image> type.  They would be addressable via the url() function as
normal, like "background: url(doc.svg#gradient1);".

I'm planning to follow the experimental work that Robert O'Callahan
did in Firefox, as outlined in
<http://weblogs.mozillazine.org/roc/archives/2008/07/svg_paint_serve.html>.
 Basically, the paint server is painted into the canvas in the obvious
manner.  The only tricky bit is defining how the *Units attributes
work, and I think roc got this right - "userSpaceOnUse" units will be
CSS px, while an "objectBoundingBox" unit will be the size of the
canvas.  For both, the origin of the coordinate space is the top left
corner of the canvas.

This also suggests how to unify <image> and paint servers in the
reverse direction - all CSS <image> types can become paint servers
trivially now.  CSS-defined paint servers automatically work in
userSpaceOnUse units, is all.

Theoretically, then, it should be acceptable to do this:

<rect fill="linear-gradient(90deg, red, green 25px, blue)" width="100"
height="100" />

And it would work in the obvious way.  (You could also
machine-translate linear-gradient() and radial-gradient() into
<linearGradient> and <radialGradient>, as they're identical in
functionality and only differ in syntax, but that's not possible for
all <image> types.)

Anyone see any problems with this?  If not, I'll put the appropriate
text for paint-server-as-<image> into Image Values.  What would be the
appropriate location for <image>-as-paint-server?

~TJ

Received on Friday, 17 June 2011 17:28:20 UTC