Using container elements in clippings

[Mariano Kamp <ma...@gmail.com>]

Hi,

I generate svg/png icons for an Android app. Those icons (see attached
example) look somewhat flat according to the UI guidelines
(link<http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#menustructure>),
but should have a little bit of structure. One vehicle for that is a
background gradient.

As there are more than one shape used in a graphic I cannot use a new
gradient over and over again, but I would like to use a single gradient that
fills the whole icon, but only shines through where there are holes in a
mask I would apply. I thought the implementation would be easy: Just take
the shapes and containers I have and wrap them in a clipPath element.

Alas this doesn't seem to work.

One minor thing is that the line shape doesn't seem to work. I think I could
work around that by using rectangles in its place.
But the other � more serious � issue is that containers don't seem to be
allowed as children of clipPath which does seem like a game-over obstacle.

Here is a simplified example: http://pastebin.com/cTJAYdxf

Are those obstacles real or imaginary? In the former case, is there another
way to do what I want? Can I use a filter to apply a gradient over the whole
image's background? I thought about doing this with a light effect, but then
I couldn't specify the exact RGB values that the UI guidelines specify.

On a sidebar. Just to state the obvious: I am fairly inexperienced with SVG.
So if you see something which you'd consider obvious, please let me know and
don't think I would see that too ;)

Cheers,
Mariano

Re: Using container elements in clippings

[Mariano Kamp <ma...@gmail.com>]

Thomas,

thanks. I tried it and it works great.

Now I feel stupid that I oversaw the mask element. I was in that document a
couple of times and saw it before, but it didn't register ;-)

Cheers,
Mariano

On Tue, Apr 6, 2010 at 11:54 AM,  <th...@kodak.com> wrote:

> Hi Mariano,
>
> Mariano Kamp <ma...@gmail.com> wrote on 04/06/2010 04:47:01 AM:
>
>
> > As there are more than one shape used in a graphic I cannot use a
> > new gradient over and over again, but I would like to use a single
> > gradient that fills the whole icon, but only shines through where
> > there are holes in a mask I would apply. I thought the
> > implementation would be easy: Just take the shapes and containers I
> > have and wrap them in a clipPath element.
>
>
>    I suggest you look at the 'mask' element:
>         http://www.w3.org/TR/SVG/masking.html#Masking
>
>    It will be much better for what you want to do.  Most
> importantly it has anti-aliased edges which clip-path
> generally doesn't (although Batik will render anti-aliased
> clip-paths if you set shape-rendering to geometricPrecision
> on the clip-path element).
>
> > One minor thing is that the line shape doesn't seem to work.
>
>     Right, Clip uses the raw geometry not the stroked geometry,
> there isn't much to a line w/o stroking.
>
> > But the other – more serious – issue is that containers don't seem
> > to be allowed as children of clipPath which does seem like a game-
> > over obstacle.
>
>     Right you a clip-path can't have groups and stuff, just
> geometry elements, of course you are allowed to have a 'use'
> element and that can have complex children.
>
> > On a sidebar. Just to state the obvious: I am fairly inexperienced
> > with SVG. So if you see something which you'd consider obvious,
> > please let me know and don't think I would see that too ;)
>
>    It's worth browsing the SVG standard just to see what tools
> are available.  I imagine if you knew there was a mask element
> you would have tried it.
>
>
> *Thomas DeWeese* | CDG Advanced Development |
> Eastman Kodak Company | 343 State Street | Rochester, NY 14650-0128 | *
> **Thomas.DeWeese@Kodak.com* <Th...@Kodak.com> | 585 724-0294 | *
> **www.kodak.com* <http://www.kodak.com/>
>

Re: Using container elements in clippings

[th...@kodak.com]

Hi Mariano,

Mariano Kamp <ma...@gmail.com> wrote on 04/06/2010 04:47:01 AM:

> As there are more than one shape used in a graphic I cannot use a 
> new gradient over and over again, but I would like to use a single 
> gradient that fills the whole icon, but only shines through where 
> there are holes in a mask I would apply. I thought the 
> implementation would be easy: Just take the shapes and containers I 
> have and wrap them in a clipPath element. 

   I suggest you look at the 'mask' element:
        http://www.w3.org/TR/SVG/masking.html#Masking

   It will be much better for what you want to do.  Most
importantly it has anti-aliased edges which clip-path 
generally doesn't (although Batik will render anti-aliased
clip-paths if you set shape-rendering to geometricPrecision
on the clip-path element).

> One minor thing is that the line shape doesn't seem to work.

    Right, Clip uses the raw geometry not the stroked geometry,
there isn't much to a line w/o stroking.

> But the other ? more serious ? issue is that containers don't seem 
> to be allowed as children of clipPath which does seem like a game-
> over obstacle. 

    Right you a clip-path can't have groups and stuff, just 
geometry elements, of course you are allowed to have a 'use'
element and that can have complex children.

> On a sidebar. Just to state the obvious: I am fairly inexperienced 
> with SVG. So if you see something which you'd consider obvious, 
> please let me know and don't think I would see that too ;)

   It's worth browsing the SVG standard just to see what tools
are available.  I imagine if you knew there was a mask element
you would have tried it.


Thomas DeWeese | CDG Advanced Development | 
Eastman Kodak Company | 343 State Street | Rochester, NY 14650-0128 | 
Thomas.DeWeese@Kodak.com | 585 724-0294 | 
www.kodak.com