Making SVG Icons for Sugar
- This is an on-going translation
THIS IS A TRANSLATION INTO ENGLISH OF A FOREIGN WIKI-PAGE IN SPANISH Tuquito | SITE | WIKI | ORIGINAL | VERSION | DIFF
As a first step, we must edit the image and save it as SVG. A way to do this is to use Inkscape. There's a little problem with Inkscape v0.45 that ignores manual changes, and we must make sure to make the edition definitive, else we'll find ourselves redoing our work. SVG files are special cases of XML files, which means that they are text files that can be edited with any text editor.
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,
Once the image is obtained, we must add the after the 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) -->
the following (right before the <svg> element):
<!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">
]>
Una vez con la imagen obtenida, debemos agregar luego del header:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
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>
Finally, we will be replacing the values of the fill and stroke properties for each entity elements defined in the SVG. For example:
<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 " />
Resulting in:
<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 " />
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 " />
In some cases we can just use one of the colors:
<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" />
Please note that the entity ends with a semi-colon (e.g.: &fill_color;).
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;).