W3C home > Mailing lists > Public > www-svg@w3.org > July 2011

Re: inline gradient definition?

From: Erik Dahlstrom <ed@opera.com>
Date: Tue, 05 Jul 2011 11:38:32 +0200
To: www-svg@w3.org, "Jasper van de Gronde" <th.v.d.gronde@hccnet.nl>
Message-ID: <op.vx43qimrgeuyw5@localhost.localdomain>
On Mon, 04 Jul 2011 15:48:55 +0200, Jasper van de Gronde  
<th.v.d.gronde@hccnet.nl> wrote:

> On 03-07-11 14:24, Zdeněk Kedaj wrote:
>> Hi there,
>> I need to create many unique gradients in my SVG and I so far the only
>> way to specify a gradient fill is via url(#gradientId) notation. In
>> such case I would have to put all my gradients that are used only once
>> in the defs section, which seems to be a bit cumbersome to me. Is
>> there some way to define a gradient "inline" upon an element? I would
>> like to define the gradient properties right in the fill or stroke
>> attribute, without having to reference its definition in the defs
>> section.
> There is no "inline" gradient syntax, but the gradient definition need
> not necessarily be restricted to the defs section, so you can define the
> gradient just before where you use it. (I find this to be especially
> useful when generating SVG.)

You could use a data URI, not that that's very pretty in this particular  
case though, since you'd have to encode the "whole" svg file (only the  
root and the gradient are necessary, but it needs to be a valid svg image).

E.g fill="url(data:image/svg+xml;base64,...encoded full svg...#mygradient)"

Here's a testcase:

Anyway, this illustrates why it would be nice to add the CSS gradient  
syntax to the SVGPaint syntax (read: fill, stroke etc).

Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed
Received on Tuesday, 5 July 2011 09:39:25 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:25 UTC