Changes

Jump to navigation Jump to search

Development Team/Almanac/Making Icons (view source)

Revision as of 09:12, 17 December 2019

3,064 bytes added ,  09:12, 17 December 2019
Replace old sugariconify.py with new version from sugarlabs
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 [[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 [[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 126: Line 126:  
====Inserting Entity References====
 
====Inserting Entity References====
   −
Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG.  Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some  fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[Design_Team/Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]
+
Next, we have to make use of the defined entities by replacing all occurrences of those colors within the body of the SVG.  Entity references begin with an ampersand (&) an end with a semi-colon (;), with their name in the middle (eg. <tt>&stroke_color;</tt>). Note that if we had a more complex SVG, it may be appropriate to set some  fills to the stroke color, and some strokes to the fill color, within the rules set forth in the HIG for [[Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]
    
  <nowiki>
 
  <nowiki>
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]]
Srevin03
79

edits

Retrieved from "https://wiki.sugarlabs.org/go/Special:MobileDiff/35849...103472"

Navigation menu