Sugar Labs

Development Team/Almanac/Making Icons: Difference between revisions

← Older edit
Srevin03 (talk | contribs)
79 edits
Replace old sugariconify.py with new version from sugarlabs
Tag: visualeditor-switched
 
(12 intermediate revisions by 5 users not shown)
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 35: 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.
Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.
There is also the start of a vector icon-drawing activity at http://dev.laptop.org/git/users/cscott/icon-draw-activity/ -- please adopt it and finish it off!


====Templates====
====Templates====
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/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=====


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


===Basic Conversion===
===Basic Conversion===
Line 138: Line 138:
  </svg>
  </svg>
  </nowiki>
  </nowiki>
== 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:
<pre><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' [
<!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">
<g display="block" id="activity-example">
<rect display="inline" fill="&fill_color;" height="30.771" width="41.438" x="6.705" y="12.213"/>
<linearGradient
  id="gra"
  gradientUnits="userSpaceOnUse"
  x1="0"
  y1="9"
  x2="0"
  y2="53"
  >
<stop
  offset="0.1044"
  style="stop-color:#0;stop-opacity:0" />
<stop
  offset="0.1813"
  style="stop-color:#0;stop-opacity:0"/>
<stop
  offset="0.489"
  style="stop-color:#0;stop-opacity:.3"/>
<stop
  offset="0.9451"
  style="stop-color:#0;stop-opacity:.6"/>
</linearGradient>
<rect display="inline" fill="url(#gra)" height="30.771" stroke="0" stroke-linejoin="round" stroke-width="3.5" width="41.438" x="6.705" y="12.213"/>
<circle cx="27.504" cy="27.598" display="inline" fill="&stroke_color;" r="2.946"/>
</g>
</svg>
</nowiki></pre>
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:
<pre><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' [
<!ENTITY stroke_color "#666">
<!ENTITY fill_color "#fff">
]><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      height="55px" width="55px" viewBox="0 0 55 55" x="0px">
<defs>
  <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"/>
  </radialGradient>
  <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"/>
  </linearGradient>
</defs>
<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)"/>
</svg>
</nowiki></pre>


== See also ==
== See also ==
Line 147: Line 212:
[[Category:Design]]
[[Category:Design]]
[[Category:Graphic Design]]
[[Category:Graphic Design]]
[[Category:Sugar LI]]
Retrieved from "https://wiki.sugarlabs.org/go/Development_Team/Almanac/Making_Icons"