Jump to: navigation, search

Development Team/Almanac/Making Icons

1,456 bytes added, 12:13, 11 October 2012
Show gradient defined using entities, link to the incomplete icon-draw activity.
Kidscape aka inkscape child friendly version(olpc): please cc yourself to this bug, and comment as appropriate.
There is also the start of a vector icon-drawing activity at -- please adopt it and finish it off!
== Using gradients ==
''Is there a way to render gradients using the fill color? For example, if the child's XO fill color is red, I would like to render an activity icon using a red gradient.''
Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:
The "stop-color" properties of an SVG gradient will also accept the &stroke_color; and &fill_color; entities, if you want a gradient in the user's colors. For example, this shows two gradients between transparent and opaque versions of the child's stroke and fill colors:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' '' [
<!ENTITY stroke_color "#666">
<!ENTITY fill_color "#fff">
]><svg xmlns="" version="1.1"
height="55px" width="55px" viewBox="0 0 55 55" x="0px">
<radialGradient cx="29.547" cy="27.726" gradientUnits="userSpaceOnUse" id="radialGradient3776" r="16.875">
<stop offset="0" stop-color="&fill_color;"/>
<stop offset="1" stop-color="&fill_color;" stop-opacity="0"/>
<linearGradient gradientUnits="userSpaceOnUse" id="linearGradient3784" x1="12.672" x2="46.422" y1="27.726" y2="27.726">
<stop offset="0" stop-color="&stroke_color;"/>
<stop offset="1" stop-color="&stroke_color;" stop-opacity="0"/>
<path d="m45.204,27.726a15.657,15.657,0,1,1,-31.315,0,15.657,15.657,0,1,1,31.315,0z" fill="url(#radialGradient3776)" stroke="url(#linearGradient3784)" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4" stroke-width="2.43559003" transform="matrix(1.4370235,0,0,1.4370235,-14.959677,-12.342744)"/>

Navigation menu