Sugar Icon Format

• All icons used by Sugar should use the 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 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. 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. CScott 16:25, 10 January 2008 (EST)

See also

• Making SVG Icons for Sugar