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]] |