Sugar Labs - User contributions [en]

Human Interface Guidelines/The Laptop Experience/Bulletin Boards/translations

2008-09-23T13:52:38Z

AuntiMame: Undo revision 165707 by 94.102.49.85 (Talk)

[[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards|english]] | [[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards/lang-es|español]] | [[OLPC Human Interface Guidelines/The Laptop Experience/Bulletin Boards/lang-ko|한국어]]

Human Interface Guidelines/The Sugar Interface/Icons

2008-09-02T23:41:26Z

AuntiMame:

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Layout Guidelines|c_section=The Sugar Interface|c_page=Icons|n_page=Colors}}

===Icons===

====Categories of Icons====
=====The XO=====

[[Image:xo_s.png|left]]

The icons which represent People have special status on the laptops. Referred to generally as the XOs, they represent the children and their laptops on the mesh Neighborhood, and furthermore represent the OLPC project and its goals to place a laptop in the hands of every child. Each child will select a stroke and fill color for their XO, and their chosen colors will then apply to the icons of any Activities or Objects they create.

=====Activity Icons=====

=====Object Icons=====

[[Image: clipping.png|left]]

=====Action Icons=====

====Active vs. Inactive Icons====
Many instances may arise in which some elements of the interface are inactive. Sugar specifies a consistent visual style to represent the concepts of absence and inactivity. Inactive elements are buttons that are not currently actionable, or controls that are temporarily disabled. Absent elements are object icons that represent people or things which aren't actually present at the moment; for instance, an incomplete download, or an invited friend who hasn't yet joined the activity.

Generally, interfaces represent such inactivity through grayed out imagery. Of course, since the laptop also operates in grayscale mode, such a color distinction ''must not'' be used under any circumstances. Instead, Sugar will take advantage of the vector graphics used for rendering objects and buttons by rendering inactive ones as a white outlined stroke, with no fill color.

=====Active=====

=====Inactive=====

====Icon Design Guidelines====

=====Icon Format=====
All icons designed for use in Sugar must be provided in [http://en.wikipedia.org/wiki/SVG SVG format]. Since all icons exist as vectors, dynamic scaling and coloring of the icons occurs without any degradation. This allows variably sized representations of particular icons to exist depending on context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors.

=====Icon Sizes=====

[[Image: standard_icon_size.png|thumb|105px|left]]
Icons should be developed and saved at Standard (S) size, though their actual size and appearance in the interface may change dynamically. When developed at standard size, icons should fit loosely within the 3 x 3 icon-safe subcell of a standard 75px grid cell, as specified in the [[OLPC Human Interface Guidelines/The Sugar Interface/Layout Guidelines|layout section]].

Notice that when the interface scales your icons, strokes do not necessarily scale proportionally to the overall icon size. This ensures that the stroke weight remains visible enough at all sizes to convey its weight and color, but it may also limit the granularity with which you use strokes, which could begin to blend together at smaller sizes. The following chart relates the various icon sizes to their corresponding scale factors and stroke weights. We strongly suggest that you try rendering your icons at XS, S, and M sizes in order to tweak their appearance for optimal legibility.

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Icon Size Comparison Chart
!style="background:#cccccc;"|Icon Size!!style="background:#cccccc;"|Scaling Factor!!style="background:#cccccc;"|Stroke Weight
|-
|XS
|0.5
|2.25px
|-style="background: #e9e9e9;"
|S
|1.0
|3.5px
|-
|M
|1.5
|4.0px
|-
|L
|2.0
|4.5px
|-
|XL
|2.75
|6.0px
|}

=====Strokes & Fills=====
{|border=1 cellpadding=1 cellspacing=0 style="float: right; width: 175px; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
!style="background:#D6784C"|API Reference
|-
|[[Sugar Architecture/API/sugar.shell.view.stylesheet|Module: sugar.shell.view.stylesheet]]
|}

All icons render in two colors: stroke and fill. The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs. As such, the colors in which you choose to save your icon are arbitrary. However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.

All strokes within an "S" activity icon must have a line weight of 3.5px. All icons should have a primary fill which represents its overall shape. In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.

More detailed instructions for making icons can be found [[Making SVG Icons for Sugar|here]].

{{hig-subnav-intra|p_page=Layout Guidelines|c_section=The Sugar Interface|c_page=Icons|n_page=Colors}}

[[Category:Design Gang]]
[[Category:Graphic Design]]

Human Interface Guidelines/The Sugar Interface/Layout Guidelines

2008-09-02T23:41:00Z

AuntiMame:

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Input Systems|c_section=The Sugar Interface|c_page=Layout Guidelines|n_page=Icons}}

===Layout Guidelines===

====The Grid System====
In keeping with the simple, flat visual style of the Sugar interface, we have designed all of the interface elements on a straightforward grid system. The system functions like a basic floorplan which allows interface elements to tile neatly within its boundaries. The grid consists of a 16x12 array of square tiles.

The diagram below shows the screen dissected into cells. Furthermore, the cells highlighted in blue indicate the areas suitable for activity toolbars. Note the exclusion of the corners, which are reserved for the hot corners which invoke the frame. In order to prevent accidental invocation, no buttons should be placed in these locations. Though all edges of the screen are suitable for placing toolbars, we recommend that the top and left edges of the screen serve as the primary location for them unless circumstances specifically suggest an alternative. Conforming to these guidelines will both make the variety of activities supported on the laptop feel more consistent, and also reserves the right and bottom edges for scroll bars, making navigation (when required) within the primary pane much simpler. Though the grab key provides the primary means for panning, preserving these edges for scroll bars even as visual indicators will increase usability.

[[Image:Grid.png]]

Considering the screen at its maximum resolution of 1200x900 pixels in luminance mode, each square tile is 75x75 pixels in size. Each cell is comprised of a 5x5 array of 15 pixel subcells. These subcells provide layout guidelines at a finer level of detail. In general, the 3x3 subcell interior region is icon-safe.

[[Image:Grid_cell.png]]

{{hig-subnav-intra|p_page=Input Systems|c_section=The Sugar Interface|c_page=Layout Guidelines|n_page=Icons}}

[[Category:Design Gang]]
[[Category:Graphic Design]]

Human Interface Guidelines/The Sugar Interface/Text and Fonts

2008-09-02T23:40:34Z

AuntiMame:

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}

===Fonts===

[http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGC Sans]

====Sizes====

[[Image:Sugar-font.png|thumb|218px|right|The font used in Sugar menus]]

The OLPC display is 200DPI; therefore one point—1/72 inch—is just less than 3 pixels (2.78 pixels). We are settling on a default font size of 7pts. for the Sugar UI (using [http://dejavu.sourceforge.net/wiki/index.php/Main_Page DejaVu LGC Sans]). It is quite legible. This translates to a font size of approximately 19.45 pt in Adobe Illustrator, which bases its units on the traditional 72DPI display. For the purposes of preparing activity GUI mockups, you must always remember to make the conversion to the laptops' display resolution by multiplying by a constant factor of 0.36.

We will be looking at other faces, e.g., Arabic and Thai, and also looking into a large-type version of the interface for the younger children.
<br clear="all"/>

====Readability====

Due to the unique design of the OLPC display, particular techniques for text rendering will provide much better results than others. The dual mode display has a resolution of 1200x900 (200 dpi) in luminance mode, but only ~800x600 (133 dpi) in chrominance mode. Therefore, unless they are sufficiently large, fonts rendered with luminance and no chroma will appear sharper and more readable.

Additionally, the display has higher resolution in black pixels than in white pixels. This results from the fact that each pixel has a color part which contains either red, green, or blue information. In order to create white, red, green and blue parts must all work together; when off, each of the color parts is black on its own. Furthermore, a grey background limits the readability of the display in sunlight. Therefore, we recommend the use of black text on a white background for best readability of fine text, and color on white for larger print.

{{hig-subnav-intra|p_page=Colors|c_section=The Sugar Interface|c_page=Text and Fonts|n_page=Toolbars}}

[[Category:Sugar]]
[[Category:Fonts]]
[[Category:Design Gang]]
[[Category:Graphic Design]]

Human Interface Guidelines/The Sugar Interface/Colors

2008-09-02T23:39:55Z

AuntiMame:

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">
<noinclude>{{Translations}}</noinclude>
{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

=== Colors ===

====Imbuing Color with Meaning====

Sugar treats color differently from the typical UI: colors used in the interface represent the ''individuals'' who are interacting within the mesh, not the activities or objects they are using. Children personalize their laptops and their presence on the mesh by selecting a dual-tone color scheme. All of the activities, objects, and comments belonging to a child take on her own colors—even when they appear on the laptops of other children on the mesh—forming a visual identity that supplements her name and attributes.

This color treatment extends even within activities. For instance, in the Web activity a link-sharing feature encourages children to browse the web in groups, sharing interesting or useful pages with each other. Each URL object posted for the others to view appears in the colors of the child who posted the link. Similarly, chat bubbles on the Bulletin Board take on the children's colors. Likewise, any object, text, or other interface element within your activities that corresponds to a particular child should be rendered in this manner. When the display runs in grayscale mode, this colored visual identity is less apparent. However, significant differences in value, according to the Munsell System, ensure that the XOs retain a level of visual distinction even in the absence of color.

To maintain a degree of purity to this system, interface elements, buttons, and other icons that belong solely to the activity and not to any particular child should remain in grayscale to the extent possible. While removing color as a primary visual clue may seem counter-intuitive, it does encourage the icon's form to clearly indicate its function. Since the laptops will also run in grayscale mode, clearly distinct shapes become essential in the absence of chroma information, and so limiting activity icons to grayscale by default ensures compatibility in both modes. Additionally, keep in mind that the traditional method of "graying-out" inactive buttons and controls simply will not function on the laptops and must be avoided. Instead, please adhere to the guidelines for [[OLPC Human Interface Guidelines/The Sugar Interface/Icons#Active vs. Inactive Icons|inactive icons]].

See [[XO colors]] for the full list of defined and approved XO colors.

====Contrast in the Munsell Colorspace====

The basic color scheme for the laptop is constrained by the need to work in both color (backlight mode) and grayscale (reflective mode); thus we have chosen guidelines that ensure at least some achromatic contrast under all conditions. Further, sustained legibility of text is accomplished by a combination of colors whose achromatic contrast is large and whose chromatic energy is of low to moderate level. For this reason, we are striving for achromatic contrast of at least two [[Munsell]] value steps.

The default value for the Frame is N2.5; the default value for the background is N9. Therefore, to maintain sufficient contrast, the line values for icons that appear on both the Frame and the background should range between N5 and N7. The interior fill of those icons should maintain achromatic contrast with the line value, e.g., the fill color for an icon with a line value of N5 should be either ≤N3 or ≥N7.

<table cellspacing='50' style='margin: 1em auto 1em auto'><tr><td>

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Munsell Value Steps
!style="background:#cccccc"|Fill color!!style="background:#cccccc"|Line value 5
|-
|N10
|style="background:#FFFFFF; color:#7A7A7A"|'''delta 5 value steps'''
|-
|N9
|style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N8
|style="background:#C8C8C8; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N7
|style="background:#ADADAD; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N6
|style="background:#939393; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N5
|style="background:#7A7A7A; color:#7A7A7A"|'''delta 0 value steps'''
|-
|N4
|style="background:#616161; color:#7A7A7A"|'''delta 1 value steps'''
|-
|N3
|style="background:#494949; color:#7A7A7A"|'''delta 2 value steps'''
|-
|N2
|style="background:#343434; color:#7A7A7A"|'''delta 3 value steps'''
|-
|N1
|style="background:#222222; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N0
|style="background:#000000; color:#7A7A7A"|'''delta 5 value steps'''
|}

</td><td>

{|border=1 cellpadding=1 cellspacing=0 style="margin: 1em auto 1em auto; border: 1px #666666 solid; border-collapse: collapse; background: #f9f9f9;"
|+Text Against Default Laptop Colors
!style="background:#cccccc"|Font value!!style="background:#cccccc"|Frame (N2.5)!!style="background:#cccccc"|Background (N9)
|-
|N10||style="background:#414141; color:#FFFFFF"|'''delta 7.5 value steps'''||style="background:#E4E4E4; color:#FFFFFF"|'''delta 1 value step'''
|-
|N9||style="background:#414141; color:#E4E4E4"|'''delta 6.5 value steps'''||style="background:#E4E4E4; color:#E4E4E4"|'''delta 0 value steps'''
|-
|N8||style="background:#414141; color:#C8C8C8"|'''delta 5.5 value steps'''||style="background:#E4E4E4; color:#C8C8C8"|'''delta 1 value step'''
|-
|N7||style="background:#414141; color:#ADADAD"|'''delta 4.5 value steps'''||style="background:#E4E4E4; color:#ADADAD"|'''delta 2 value steps'''
|-
|N6||style="background:#414141; color:#939393"|'''delta 3.5 value steps'''||style="background:#E4E4E4; color:#939393"|'''delta 3 value steps'''
|-
|N5||style="background:#414141; color:#7A7A7A"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#7A7A7A"|'''delta 4 value steps'''
|-
|N4||style="background:#414141; color:#616161"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#616161"|'''delta 5 value steps'''
|-
|N3||style="background:#414141; color:#494949"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#494949"|'''delta 6 value steps'''
|-
|N2||style="background:#414141; color:#343434"|'''delta 0.5 value steps'''||style="background:#E4E4E4; color:#343434"|'''delta 7 value steps'''
|-
|N1||style="background:#414141; color:#222222"|'''delta 1.5 value steps'''||style="background:#E4E4E4; color:#222222"|'''delta 8 value steps'''
|-
|N0||style="background:#414141; color:#000000"|'''delta 2.5 value steps'''||style="background:#E4E4E4; color:#000000"|'''delta 9 value steps'''
|}

</td></tr></table>

{{hig-subnav-intra|p_page=Icons|c_section=The Sugar Interface|c_page=Colors|n_page=Text and Fonts}}

[[Category:Design Gang]]
[[Category:Graphic Design]]

Development Team/Almanac/Making Icons

2008-09-02T23:38:58Z

AuntiMame:

{{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!

/usr/share/icons/sugar/scalable on the laptop contains a bunch of icons for your use. Also, [[Svg-grabber.py|svg-grabber]] is a python script that will download ~800 non-sugar svg's for you to work from.

--[[User:Bjordan|Bjordan]] 16:48, 15 July 2008 (UTC)

==Icon Format==

====Scalable Vector Graphics====

Icons designed for Sugar should have the [http://www.w3.org/Graphics/SVG/ SVG] file format. This Scalable Vector Graphic format allows Sugar to dynamically scale and color the icons without any degradation in quality. Thus, variably sized representations of particular icons may exist depending on their context in the interface. Additionally, this provides support for dynamic coloring of activity and object icons based upon a child's chosen XO colors, [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Colors#Imbuing%20Color%20with%20Meaning|imbuing them with identity]].

====Defining Entities====

To aid in the dynamic colorization of sugar icons, we take advantage of [http://xmlwriter.net/xml_guide/entity_declaration.shtml entitites] within the [http://wiki.svg.org/Doctype DOCTYPE] declaration. The inserted entities act like variables whose values are inserted at any location in the SVG where the entity is referenced. Making sure that these entities are inserted correctly is essential to creating proper icons for use in Sugar.

The two entities required for Sugar icons are:

# <tt>stroke_color</tt>
# <tt>fill_color</tt>

To see an example of the XML format used to define these entities, please refer to the section below on [[#Defining_Entities_2 | hacking]] Sugar icons by hand.

==Getting Started==

====Finding an SVG Editor====

In order to create icons in the SVG format, you'll need to get your hands on a suitable editor. There are a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors options] available, and you are free to choose any that suits your particular needs. One of the most commonly used is [http://www.inkscape.org/ Inkscape], an open source vector graphics editor with a comprehensive toolset and WC3 and CSS standards compliance. In addition, Inkscape has a commitment to multilingual support and maintains ongoing translation efforts.

There are also a number of [http://en.wikipedia.org/wiki/List_of_vector_graphics_editors#Commercial_software commercial editors] which you are welcome to use as well, should you have access to such resources.

Unfortunately, no suitable vector editing tools are available as activities for the XO laptops at present. We acknowledge this omission, and hope to provide a vector-based "Draw" activity (to supplement the bitmap-based "Paint" activity) in order to provide the proper tools for icon generation on the laptops themselves in the future.

Kidscape aka inkscape child friendly version(olpc): https://bugs.launchpad.net/inkscape/+bug/170488 please cc yourself to this bug, and comment as appropriate.

====Templates====

To make it simpler to create new icons for use in Sugar, we've created some template SVGs. Though any of these template files should be editable with your choice of SVG editor, those with specific affiliations have been tweaked to make their presentation in their associated editors more natural, and their interaction with our scripts much cleaner. The third template is an extremely minimal example which is designed for those who wish to edit SVGs manually, or for those that wish to use other editors.

=====Downloads=====
These are pointers to the wiki pages for the template icons. Click through to these pages (don't "save as", yet!)
* [[:image: icon_template.inkscape.svg | icon_template.inkscape.svg]]
* [[:image: icon_template.illustrator.svg | icon_template.illustrator.svg]]
* [[:image: icon_template.generic.svg | icon_template.generic.svg]]

=====Guide=====

The non-generic template files have some extra elements within them that may make things easier for you as you create your icons. For instance, they have a guide layer which clearly denotes both the recommended (45px) and maximum (55px) areas that your icon must fit within. This layer may also be useful for previewing your icons against a dark background while editing them.

=====Swatches=====

They also contain a swatches layer which offers some small squares in all possible combinations of the default stroke and fill colors. In Illustrator you can paint a shape in your icon by selecting it, then pressing 'i' to select the Eyedropper tool, and finally clicking on the swatch of your choice to automatically apply both the stroke and fill properties of the swatch to the selection, adding or removing the stroke or fill completely as necessary.

You can accomplish something somewhat similar in Inkscape by selecting the eyedropper tool (F7). With the tool selected, you can click on a color to set the fill, or shift-click to set the stroke. Unfortunately, there doesn't seem to be a way to set both stroke and fill from a swatch with one click, nor is there a way to remove a stroke or fill by clicking on a swatch without those properties. You can, however, add strokes and fills via this method when the selected shape has none; you may also remove a stroke or a fill by checking the "pick alpha" checkbox and then clicking outside of the canvas area with or without shift, respectively.

====Designing Icons====

Sugar icons should all follow the [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons | icon design guidelines]] set forth in the Sugar Human Interface Guidelines. For information about the various types of icons and their appearances including size, colors, and layout, please refer to the HIG.

=====Default Colors=====

COMING SOON...

=====Visual Weight=====

COMING SOON...

=====Strokes and Fills=====

COMING SOON...

==Sugarizing Icons==

===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.

=====Download=====

* [[media: sugar-iconify.py | sugar-iconify.py]]

===Basic Conversion===

COMING SOON...

===Icon Sets===

http://www.openicon.org is a search engine for svg icons.
please add any icon sets using the validator.

==Hacking by Hand==

SVG adheres to the common [http://www.w3.org/XML/ XML] format, and as such may be edited within any standard text editor. For those that are interested in the internal details, don't have access to visual editing tools, or simply like the thrill of crafting their icons by hand, with the associated control, please enjoy this section.

====A Simple SVG====

You're free to examine the [http://www.w3.org/TR/SVG/ SVG 1.1 specification] in order to create icons of any complexity you desire. For the purposes of demonstrating the conversion of a standard SVG into the format Sugar expects, let's consider a really simple SVG. We define the width and height of the canvas to be 55px, which is the maximum size for "standard" icons, and the required canvas size. The recommended size for icons is 45px, which is the area we fill with the rect. By defining the 55px rect for the icon, we naturally define some padding, which gives you as the icon designer the ability to position the icon within the 55px canvas to give it proper "visual weight". In other words, it should ''appear'' to be centered within the padded 55px region, even if it technically is not.

<nowiki>
<?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">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

''Note: If you wish to use Inkscape to create your icons, and subsequently insert the entities by hand, we recommend using the "Save As" command and choosing the "Plain SVG" file format to produce more readable SVGs.''

====Defining Entities====

To prepare our SVG for use in Sugar, we need to define the entities which Sugar expects. To do this, we add an entity declaration block inside the DOCTYPE. For clarity, we'll define them to have the same colors as the SVG we started with, which also happens to have the recommended default colors for activity icons. Additions and changes are highlighted in green:

<nowiki>
<?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"</nowiki><font color='#009900'><nowiki> [
<!ENTITY stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]</nowiki></font><nowiki>>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="#666666" fill="#FFFFFF" stroke-width="3.5"/>
</svg>
</nowiki>

====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 [[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons#Strokes_.26_Fills | strokes and fills]]

<nowiki>
<?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 stroke_color "#666666">
<!ENTITY fill_color "#FFFFFF">
]>
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55">
<rect x="5" y="5" width="45" height="45" stroke="</nowiki><font color='#009900'><nowiki>&stroke_color;</nowiki></font><nowiki>" fill="</nowiki><font color='#009900'><nowiki>&fill_color;</nowiki></font><nowiki>" stroke-width="3.5"/>
</svg>
</nowiki>

== See also ==
*[[OLPC Human Interface Guidelines/The Sugar Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)

[[Category:Sugar]]
[[Category:HowTo]]
[[Category:Design Gang]]
[[Category:Graphic Design]]

Human Interface Guidelines/The Sugar Interface/Layout Guidelines

2008-08-31T00:28:01Z