Sugar Icon Format

From OLPC
Revision as of 23:26, 15 May 2007 by MitchellNCharity (talk | contribs) (→‎Example: Question example dimensions; suggest alternative.)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
  • 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" style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:2"/>
</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>