[css3-images] Using SVG Paint Servers as <image>

Quick background: I've been interested in unifying CSS's concept of
"images" and SVG's concept of "paint servers" for some time, as
they're basically identical.  The push to conceptually unify CSS and
SVG gradients made this more of a priority for me.

About 3 years ago, roc explored this very subject with some
experimental code in Firefox, documented at
<http://weblogs.mozillazine.org/roc/archives/2008/07/svg_paint_serve.html>.
  His definitions sound perfect to me, and make the unification very
simple.

Basically, paint servers paint into the CSS canvas as if the canvas
was something that could be filled.  The origin is always the origin
of the canvas.  If the paint server uses "userSpaceOnUse" units, those
units correspond to CSS px.  If it uses "objectBoundingBox" units, the
unit size is the width and height of the canvas (so, frex, giving
something a width of ".5" would make it half as wide as the canvas).

Conversely, if a CSS <image> is used as a paint server, it's treated
as using userSpaceOnUse units, and otherwise paints into the SVG
canvas as normal.

First, is this okay to add to the current spec?  I'm trying to get
Image Values stabilized in preparation for an LC soon after the f2f,
and adding new features is obviously the opposite of stabilization.
This can potentially be pushed to Image Values 4 (I've already got a
few things planned for exploration in level 4), but the fact that the
code has already been written once for FF means it probably wouldn't
be a hold-up to IV3 advancing.

Second, how should paint servers be referenced?  In roc's old code,
you simply used url(), with the fragment pointing to the paint
server's id.  More recently, though, roc has suggested using
element(), extending it to take a url.  I'm not so much a fan of this
latter solution; for one, it's confusing to have both an idselector
and a url with a fragid, as they'll refer to different things -
element(#foo) refers to the element with id=foo in the host document,
while element("#foo") would refer to the element with id=foo in the
CSS document (which wouldn't refer to anything at all if the CSS was
external).  Also, would this then mean that you could reference
arbitrary elements from external pages (presumably same-origin
restricted)?

You can already refer to a particular element of an SVG by referencing
the id of a <view> element in url().  Unless there are compat problems
caused by people referencing a paint server and expecting the full SVG
image to be shown, I'd prefer to just use url() here, and keep
element() just referring to the host document.

Opinions?  (Btw, I've already run this through the FXTF, and the SVG
people approve.)

~TJ

Received on Thursday, 14 July 2011 01:13:51 UTC