Sugar Icon Format: Difference between revisions
Jump to navigation
Jump to search
(Fix recommendations.) |
(Making Sugar Icons has been moved, it is now a redirect to Making Sugar icons) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
#redirect [[Making Sugar icons]] |
|||
* All icons used by Sugar should use the [http://www.w3.org/Graphics/SVG/ SVG] format. |
|||
* The following entities should be defined to allow to dynamically modify the icons. |
|||
<!ENTITY fill_color "#FFFFFF"> |
|||
<!ENTITY stroke_color "#000000"> |
|||
* Size, colors and layout should respect the HIG [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons|guidelines]] |
|||
= Example = |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ |
|||
<!ENTITY fill_color "#FFFFFF"> |
|||
<!ENTITY stroke_color "#000000"> |
|||
]> |
|||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"> |
|||
<rect x="1" y="1" width="48" height="48" fill="&fill_color;" stroke="&stroke_color;" stroke-width="3.5"/> |
|||
</svg> |
|||
:Shouldn't that have a surface height and width of 45, and a stroke-width of 4.5, to make sure it looks ok at XS. See [[OLPC Human Interface Guidelines/The_Sugar_Interface/Icons#Icon Design Guidelines]] and [[OLPC Human Interface Guidelines/The Sugar Interface/Layout Guidelines]]. [[User:MitchellNCharity|MitchellNCharity]] 19:26, 15 May 2007 (EDT) |
|||
Perhaps: |
|||
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45"> |
|||
<rect x="3" y="3" width="40" height="40" style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:4.5"/> |
|||
</svg> |
|||
::The guidelines state 'loosely' in a 45x45 area, with a maximum size of 75x75. So any size between those guidelines should be okay. "Icons should be developed and saved at Standard (S) size" so the recommended stroke with is 3.5px. Rather than use the CSS style attribute, it's a little nicer to use explicit fill and stroke attributes. [[User:CScott|CScott]] 16:25, 10 January 2008 (EST) |
|||
==See also== |
|||
*[[Making SVG Icons for Sugar]] |
|||
[[Category:Sugar]] |
|||
Latest revision as of 16:58, 25 March 2009
Redirect to: