Making SVG Icons for Sugar: Difference between revisions

From OLPC
Jump to navigation Jump to search
(→‎Other notes: Add Inkspace note.)
(Redirecting to Making Sugar Icons)
Line 1: Line 1:
#redirect [[Making Sugar Icons]]
= Translated section =
{{Ongoing Translation}}
THIS IS A TRANSLATION INTO ENGLISH OF A FOREIGN WIKI-PAGE IN SPANISH
[[Tuquito]] | [http://tuquito.org.ar SITE] | [http://tuquito.org.ar/olpc/index.php?title=Portada WIKI] | [http://tuquito.org.ar/olpc/index.php?title=Icono_SVG_para_Sugar ORIGINAL] | [http://tuquito.org.ar/olpc/index.php?title=Icono_SVG_para_Sugar&oldid=2029 VERSION] | [http://tuquito.org.ar/olpc/index.php?title=Icono_SVG_para_Sugar&diff=current&oldid=2029 DIFF]

First, we must edit the image and save it as [[SVG]]. One way to do this is to use [[Inkscape]]. (There's a little problem with Inkscape v0.45 that ignores manual changes, so we must make sure to finish editing the image before continuing, or else we'll find ourselves redoing our work.)

<font size="1"><blockquote>Como primer paso, debemos editar la imagen y grabarla como SVG. Una buena forma puede ser con Inkscape.
El problema es que la version actual de Inkscape (0.45), no respeta los cambios que hacemos manualmente, por lo que debemos estar seguros de haber hecho la imagen definitiva o deberemos hacer la edicion nuevamente.
Los archivos SVG, son casos particulares de archivos xml, por lo tanto son archivos de texto y se pueden editar en cualquier editor,</blockquote></font>


[[SVG]] files are special cases of [[XML]] files, which means that they are text files that can be edited with any text editor. Now we must add the after the header:
<nowiki><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 51448) --></nowiki>
the following (right before the <tt>&lt;svg&gt;</tt> element):
<nowiki><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink " http://www.w3.org/1999/xlink">
<!ENTITY stroke_color "#000000">
<!ENTITY fill_color "#AAAAAA">
]></nowiki>

<font size="1"><blockquote>Una vez con la imagen obtenida, debemos agregar luego del header:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 51448) -->

Lo siguiente

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink " http://www.w3.org/1999/xlink">
<!ENTITY stroke_color "#000000">
<!ENTITY fill_color "#AAAAAA">
]>

justo antes del elemento <svg></blockquote></font>

Finally, we will be replacing the values of the <tt>fill</tt> and <tt>stroke</tt> properties for each entity elements defined in the [[SVG]]. For example:
<path
style="fill:<u><i>#AAAAAA</i></u>;fill-rule:evenodd;stroke:<u><i>#000000</i></u>;stroke-width:2.5;stroke-linejoin:round"
sodipodi:nodetypes="ccccc"
id="path613"
d="M 428.08025,540.20085 L 476.93844,533.16915 L 488.52424,575.20081 L 439.66604,582.23252 L 428.08025,540.20085 z " />
Resulting in:
<path
style="fill:<u><i>&fill_color;</i></u>;fill-rule:evenodd;stroke:<u><i>&stroke_color;</i></u>;stroke-width:2.5;stroke-linejoin:round;"
sodipodi:nodetypes="ccccc"
id="path613"
d="M 428.08025,540.20085 L 476.93844,533.16915 L 488.52424,575.20081 L 439.66604,582.23252 L 428.08025,540.20085 z " />
<font size="1"><blockquote>Finalmente en cada elemento del svg reemplazaremos los valores de las propiedades fill y stroke por los entitys definidos.
Por ejemplo:


<path
style="fill:#AAAAAA;fill-rule:evenodd;stroke: #000000;stroke-width:2.5;stroke-linejoin:round"
sodipodi:nodetypes="ccccc"
id="path613"
d="M 428.08025,540.20085 L 476.93844,533.16915 L 488.52424,575.20081 L 439.66604,582.23252 L 428.08025,540.20085 z " />

Queda:

<path
style="fill:&fill_color;;fill-rule:evenodd;stroke: &stroke_color;;stroke-width:2.5;stroke-linejoin:round;"
sodipodi:nodetypes="ccccc"
id="path613"
d="M 428.08025,540.20085 L 476.93844,533.16915 L 488.52424,575.20081 L 439.66604,582.23252 L 428.08025,540.20085 z " /></blockquote></font>

In some cases we can just use one of the colors:
<nowiki><circle
cx="38"
cy="38"
r="19.903"
id="circle1642"
sodipodi:cx="38"
sodipodi:cy="38"
sodipodi:rx="19.903"
sodipodi:ry="19.903"
transform="translate(0.604798,0.251984)"
style="fill:&fill_color; ;stroke:#ffffff;stroke-width:3.5"
/></nowiki>
Please note that the ''entity'' ends with a semi-colon (e.g.: <tt>&fill_color;</tt>).
<font size="1"><blockquote>En otros casos podemos utilizar uno solo de los colores:

<circle
cx="38"
cy="38"
r="19.903"
id="circle1642"
sodipodi:cx="38"
sodipodi:cy="38"
sodipodi:rx="19.903"
sodipodi:ry="19.903"
transform="translate(0.604798,0.251984)"
style="fill:&fill_color; ;stroke:#ffffff;stroke-width:3.5"
/>

Tener en cuenta que el entity termina con el punto y coma (Ej:&fill_color;).</blockquote></font>

= This section is ''not'' part of the translation =

== Other notes ==

* Activity icons for the frame can use any colors, but a fill/stroke color of #AAAAAA/#000000 is nice.
* Icons for toolbars should use
<!ENTITY fill_color "#000000">
<!ENTITY stroke_color "#FFFFFF">
because the toolbar isn't currently smart enough to set them.
* For more readable SVG files from Inkscape, use the "Save As" command, and then choose the file format "Plain SVG". This produces a much shorter and more readable SVG file.

== See also ==
*[[Icon Creation]]
*[[Sugar Icon Format]]
*[[Sugar Activity Tutorial]]
*[[OLPC_Human_Interface_Guidelines/The_Sugar_Interface/Icons]]
*[[Svg-grabber.py|Download .svg collection]] (~800 non-sugar svg's)
*[[Image:IconRuler.svg]]

[[Category:Sugar]]
[[Category:HowTo]]

Revision as of 23:21, 20 March 2008

Redirect to:

Retrieved from "http://wiki.laptop.org/mediawiki/index.php?title=Making_SVG_Icons_for_Sugar&oldid=118166"