Re: [SVGMobile12] Gradient color interpolation

Hello www-svg,

Tero Karras wrote:

> Hi SVG Working Group,
> 
> What is the intended way of interpolating the colors of gradient stops, if
> opacities are also defined? The specification is being very vague about
> this.

We hadn't considered that one might premultiply the values before
interpolating them.

> Consider the following linear gradient, for example:
> 
> <linearGradient id="MyGradient" x1="0" y1="0" x2="1" y2="0">
>   <stop offset="0" stop-color="rgb(255, 0, 0)" stop-opacity="0"/>
>   <stop offset="1" stop-color="rgb(0, 255, 0)" stop-opacity="1"/>
> </linearGradient>
> 
> We can think of the colors and opacities as independent quantities,
> and thus interpolate them independently.

Yes.

>  This way, for the point at (0.5, 0), we get
> color="rgb(127.5, 127.5, 0)" and opacity="0.5". We cannot really say that
> the first stop is transparent red and the other one is opaque green.

That is exactly what they are - transparent red and opaque green.

>  Rather,
> we have a separate color ramp going from red to green, being applied through
> an opacity ramp going from fully transparent to fully opaque.

These are equivalent.

> On the other hand, we can think of the color and opacity as being
> expressed as a single pre-multiplied RGBA color.

One could, but then the color values suffer a loss of precision as
opacity increases, eventually loosing all color information when opacity
becomes zero.

>  We can interpolate the components of
> these colors linearly. For our example gradient, the color of first stop
> would be rgba_pre(0, 0, 0, 0), and the second one would be rgba_pre(0, 255,
> 0, 255). For the middle-point, we would get rgba_pre(0, 127.5, 0, 127.5),
> corresponding to color="rgb(0, 255, 0)" and opacity="0.5".
> 
> The latter method has many favorable properties. For example, if our
> gradient is painted on a solid background color, it will result in a linear
> color slide. The former method, however, will produce a quadratic slide.

The former method is the intended one and correct for SVG.

> Adobe's SVG plugin seems to do the interpolation using the former method,

As do all other SVG implementations that we are aware of.

> while OpenVG (http://www.khronos.org/openvg/) currently supports only the
> latter one.


Feedback from implementors of SVG Tiny on top of accelerated interfaces
(eg on the BitBoys chips, which uses OpenVG AFAIK) is that this is
possible. We are looking for specific details.

> Is there a certain correct interpolation method,

Yes; and the correct result is shown in the reference PNGs in the test suite.

>  or is it intentionally
> being left unspecified to allow SVG implementations to choose whichever
> method they prefer?
> 
> Regards,
> -- 
>   o Tero Karras, Programmer
>   o Hybrid Graphics, Ltd.
>   o Email: tero@hybrid.fi
>   o Web: www.hybrid.fi

-- 
 Chris Lilley                    mailto:chris@w3.org
 Interaction Domain Leader
 Co-Chair, W3C SVG Working Group
 W3C Graphics Activity Lead
 Co-Chair, W3C Hypertext CG

Received on Monday, 17 July 2006 14:04:12 UTC