martes, marzo 13, 2007

Mini HowTo: Como editar una imagen svg para poder usarla como un icono en Sugar:

Para usar un svg como icono en sugar hay que editarlo manualmente, aqui un mini howto.

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,

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>

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 " />

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;)
Publicar un comentario