Development Team/Almanac/Making Icons - Revision history

Srevin03: Replace old sugariconify.py with new version from sugarlabs

2019-12-17T13:12:29Z

Replace old sugariconify.py with new version from sugarlabs

← Older revision		Revision as of 09:12, 17 December 2019
Line 76:		Line 76:
	===The Script===		===The Script===

	In order to streamline the process of creating sugar compatible icons, we provide the [https://github.com/~~GhostAlgorithm~~/sugariconify/blob/master/sugariconify.py sugariconify] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugariconify -h</tt> from the command line, or by viewing the dedicated [[Sugar iconify \| usage page]]. Some specific examples and use cases are illustrated below in more detail.		In order to streamline the process of creating sugar compatible icons, we provide the [https://github.com/sugarlabs/sugariconify/blob/master/sugariconify.py sugariconify] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugariconify -h</tt> from the command line, or by viewing the dedicated [[Sugar iconify \| usage page]]. Some specific examples and use cases are illustrated below in more detail.

	=====Download=====		=====Download=====

	* [https://github.com/~~GhostAlgorithm~~/sugariconify/blob/master/sugariconify.py sugariconify.py]		* [https://github.com/sugarlabs/sugariconify/blob/master/sugariconify.py sugariconify.py]

	===Basic Conversion===		===Basic Conversion===

FGrose: /* The Script */ update links

2014-01-25T22:15:39Z

The Script: update links

← Older revision		Revision as of 18:15, 25 January 2014
Line 76:		Line 76:
	===The Script===		===The Script===

	In order to streamline the process of creating sugar compatible icons, we provide the [~~[olpc~~:~~media: sugar-iconify~~.py ~~\| sugar-iconify]~~] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>~~sugar-iconify~~ -h</tt> from the command line, or by viewing the dedicated [[~~olpc:~~Sugar-iconify \| usage page]]. Some specific examples and use cases are illustrated below in more detail.		In order to streamline the process of creating sugar compatible icons, we provide the [https://github.com/GhostAlgorithm/sugariconify/blob/master/sugariconify.py sugariconify] script. This script takes an SVG file as input and outputs a new SVG (or SVGs) containing the proper entity definitions. It offers a number of command-line flags for performing variations on this process to fit smoothly into your workflow. You can view all of the available options by running <tt>sugariconify -h</tt> from the command line, or by viewing the dedicated [[Sugar iconify \| usage page]]. Some specific examples and use cases are illustrated below in more detail.

	=====Download=====		=====Download=====

	* [~~[OLPC~~:~~media: sugar-iconify~~.py ~~\| sugar-iconify~~.py]]		* [https://github.com/GhostAlgorithm/sugariconify/blob/master/sugariconify.py sugariconify.py]

	===Basic Conversion===		===Basic Conversion===

CScott: Show gradient defined using entities, link to the incomplete icon-draw activity.

2012-10-11T16:13:11Z

Show gradient defined using entities, link to the incomplete icon-draw activity.

@@ Line 33: / Line 33: @@
 Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.
 ====Templates====
@@ Line 138: / Line 140: @@
 == Using gradients ==
 Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:
@@ Line 179: / Line 179: @@
 </g>
 </svg>
 </nowiki></pre>

FGrose at 18:01, 29 January 2011

2011-01-29T18:01:27Z

← Older revision		Revision as of 14:01, 29 January 2011
Line 1:		Line 1:
	~~{{TOCright}}~~

	Save yourself some time. Don't make the mistake I made. Before you make an icon, see if it's already on the laptop!		Save yourself some time. Don't make the mistake I made. Before you make an icon, see if it's already on the laptop!

Line 192:		Line 190:
	[[Category:Design]]		[[Category:Design]]
	[[Category:Graphic Design]]		[[Category:Graphic Design]]
			[[Category:Sugar LI]]

FGrose at 02:47, 27 August 2010

2010-08-27T02:47:04Z

← Older revision		Revision as of 22:47, 26 August 2010
Line 145:		Line 145:
	Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:

	<~~code~~>		<pre><nowiki>
	<nowiki>

	<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [		<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
Line 183:		Line 182:
	</g>		</g>
	</svg>		</svg>
	</nowiki>		</nowiki></pre>

	</~~code~~>

	== See also ==		== See also ==

Erik B: /* Using gradients */

2010-08-27T02:42:33Z

Using gradients

← Older revision		Revision as of 22:42, 26 August 2010
Line 144:		Line 144:

	Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:

			<code>
	<nowiki>		<nowiki>

Line 182:		Line 184:
	</svg>		</svg>
	</nowiki>		</nowiki>

			</code>

	== See also ==		== See also ==

Erik B: /* Using gradients */

2010-08-27T02:39:33Z

Using gradients

← Older revision		Revision as of 22:39, 26 August 2010
Line 144:		Line 144:

	Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:
			<nowiki>

	~~<nowiki>~~
	<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [		<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
	<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>		<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>

Erik B: /* Using gradients */

2010-08-27T02:38:19Z

Using gradients

← Older revision		Revision as of 22:38, 26 August 2010
Line 141:		Line 141:
	== Using gradients ==		== 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.''		''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:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:

Erik B: /* Using gradients */

2010-08-27T02:34:36Z

Using gradients

← Older revision		Revision as of 22:34, 26 August 2010
Line 145:		Line 145:
	Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:

			<nowiki>
	<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [		<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
	<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>		<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>
Line 180:		Line 181:
	</g>		</g>
	</svg>		</svg>
			</nowiki>

	== See also ==		== See also ==

Erik B: /* Using gradients */

2010-08-27T02:34:01Z

Using gradients

← Older revision		Revision as of 22:34, 26 August 2010
Line 145:		Line 145:
	Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:		Here is an example of one way to do this by overlaying a gradient over the data-driven XO stroke and fill colors:

	~~<math>~~<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [		<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
	<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>		<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FF0000">]>
	<svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">		<svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
Line 179:		Line 179:

	</g>		</g>
	</svg>~~</math>~~		</svg>


	== See also ==		== See also ==