Re: Proper handling of SVG and rgba()

The issue of CSS3 color syntax and support in SVG has been raised as an  
issue in the SVG WG tracker:

There are at least two implementations (Firefox and Opera) supporting the  
rgba/hsla syntax for svg content (for the properties where it makes sense,  
e.g fill, stroke, stop-color etc).

I think it's up to the SVG WG to decide if CSS3 Colors should be a  
requirement or not for SVG2 (and how it's applied to svg content), so I'm  
not sure what, if anything, needs to be discussed in the public-fx  
taskforce relating to this.


On Wed, 02 Jun 2010 14:50:05 +0200, Dean Jackson <> wrote:

> My personal take is that rgba should be supported in SVG content. I'd be  
> interested to hear arguments against it (*).
> The alpha in the color should be added to the start of the list of alpha  
> blends used in the final compositing (which is a list of  
> multiplications). eg.
> fill: rgba(0, 0, 0, 0.5);
> fill-opacity: 0.6;
> opacity: 0.7;
> ... would end up (in the absence of other styles) painting a 0.5 * 0.6 *  
> 0.7 = 0.21 opaque black.
> (*) I argued against it myself when CSS was adding it back in the day,  
> because I preferred the way SVG had separated opacity - it allows you to  
> animate a fill/stroke opacity independently of color. But rgba is  
> well-loved now, and it would have been impractical to add -opacity  
> properties for every place that CSS could use a color.
> Dean
> On 01/06/2010, at 8:43 AM, Jonathan Kliegman wrote:
>> I was looking at Webkit, specifiaclly bug 16183  
>> ( - SVG doesn't support  
>> rgba() colors.  I was planning on fixing this but after reading the SVG  
>> spec at which states that SVG supports CSS2  
>> color specifications I'm unsure if this should be fixed or not. rgba()  
>> was introduced with CSS3 so is technically not supported by SVG.
>> Looking at other implementations Chrome and webkit-head both render a  
>> rgba() color as pure black.  Safari 4.0.5 I've seen render it as either  
>> black or missing.  Firefox does render it properly.  Batiq fails to  
>> render and gives an error: "The attribute "stroke" represents an  
>> invalid CSS value ("rgba(0, 255, 0, 0.5)")."
>> Looking at this bug from an end user perspective it would be good to  
>> add this feature in as its likely that people will build sites that  
>> aren't strictly compliant and would want things to just work.  However  
>> I'm always wary of making changes that go against a published standard  
>> as that path can lead to ugliness, divergent standards and future  
>> headaches.
>> What I'm looking for from the community is feedback on what the right  
>> thing to do here with respect to webkit is.  Is it worth the  
>> convenience to the user to add support for rgba() to the SVG code?
>> -Jon

Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog:

Received on Monday, 20 September 2010 08:50:56 UTC