É preciso usar um navegador com suporte a SVG para visualizar os slides que seguem. Recomendo o uso do
FireFox 2.
Slide 1: Construindo Extensões para Inkscape
Aurélio A. Heckert
aurium
@gmail.com
PSL-BA - COLIVRE
Última modificação: 18 Jan 2008 (rev 3)
Slide 2: O que é SVG?
É isso?
Slide 3: O que é SVG?
Ou isso?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="600" height="500">
<defs>
<marker> ... </marker>
<radialGradient> ... </radialGradient>
</defs>
<rect x="10" y="10" rx="50" ry="50"
width="480" height="480" />
<path d="M 300 300 C 350 460 560 500 550 350"
marker-end="url(#triangulo)" />
<circle cx="250" cy="250" r="200" />
<g>
<ellipse cx="300" cy="200" rx="30" ry="50" />
<path d="M 150 230 L 220 240 C 240 245 240 227 230 220 L 190 190 L 215 220 z" />
</g>
<path d="M 320 380 A 150 150 0 0 1 100 250" />
<g>
<ellipse cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFC; stroke-width:28px; opacity:0.5" />
<ellipse cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFF050; stroke-width:20px; opacity:0.6" />
</g>
</svg>
|
Slide 4: SVG é...
- Formato aberto definido pela W3C
Slide 5: Como diria Jack: Vamos por partes...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="600" height="500">
<defs>
<marker id="triangulo"
viewBox="0 0 10 10" refX="0" refY="5"
fill="#800" orient="auto" markerUnits="strokeWidth"
markerWidth="4" markerHeight="3">
<path d="M 0 1 L 7 5 L 0 9 z" />
</marker>
<radialGradient id="rg1"
cx="45%" cy="45%" r="50%" fx="35%" fy="35%">
<stop stop-color="#FE7" offset="0%" />
<stop stop-color="#FD0" offset="50%" />
<stop stop-color="#DA0" offset="100%" />
</radialGradient>
</defs>
<rect id="caixaAzul"
x="10" y="10"
width="480" height="480"
rx="50" ry="50"
style="fill:#4DF; stroke:#08A; stroke-width:20px;" />
<path id="rabo"
d="M 300 300 C 350 460 560 500 550 350"
fill="none" stroke="#800" stroke-width="28"
stroke-linecap="round"
marker-end="url(#triangulo)" />
<circle id="cabeca"
cx="250" cy="250" r="200"
style="stroke:#000; stroke-width:20px;
fill:url(#rg1);" />
<g id="olhos" transform="translate( 0, 5 )">
<ellipse id="olhoDir"
cx="300" cy="200" rx="30" ry="50"
style="fill:#000; stroke:none;" />
<path id="olhoEsq"
style="fill:#000; stroke:none;"
d="M 150 230 L 220 240 C 240 245 240 227 230 220
L 190 190 L 215 220 z" />
</g>
<path id="boca"
d="M 320 380 A 150 150 0 0 1 100 250"
style="fill:none; stroke:#000; stroke-width:20px;
stroke-linecap:round;" />
<g id="aureola">
<ellipse id="brilho1"
cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFC; stroke-width:28px;
opacity:0.5" />
<ellipse id="brilho2"
cx="250" cy="75" rx="160" ry="50"
style="fill:none; stroke:#FFF050; stroke-width:20px;
opacity:0.6" />
</g>
</svg>
Slide 6: ...e então veio o Inkscape
- 1999 - Gill - GNOME Illustrator application criado por Raph Levien
- 2001 - Sodipodi - editor vetorial para uso geral
- 2003 - Inkscape - Compatibilidade total com o padão SVG
Bryce Harrington, MenTaLguY, Nathan Hurst e Ted Gould
- Mais abertura a comunidade
- Investimento na interface
- Troca da linguagem para C++
- Participação no Open Clip Art
- Amadurecimento mais rápido
Slide 7: Tipos de Extensões
- Entrada : provê tradução de um formato qualquer para SVG.
- Saida : provê tradução de SVG para um formato qualquer.
- Efeito : modifica o SVG automatizando processos mais complexos.
- Path Effects : modificação dinâmica do caminho, com a ferramenta de nós.
- Tools : provê novas ferramentas para o Inkscape.
Slide 8: Como um efeito é executado
Slide 9: Estrutura de um INX
<inkscape-extension>
<_name>{Nome Amigável da Extensão}</_name>
<id>{org.domain.sub-domain.extension-name}</id>
<dependency type="executable"
location="[extensions|{outro local}]">{arqivo dependencia}</dependency>
<param name="{nome-do-argumeto}" type="[int|string|boolean|...]"
min="{number}" max="{number}"
_gui-text="{Nome Amigável do Argumento}">{valor padrão}</param>
<effect>
<object-type>[all|{tipo do elemento}]</object-type>
<effects-menu>
<submenu _name="{Nome do Grupo da Extensão}"/>
</effects-menu>
</effect>
<script>
<command reldir="extensions"
interpreter="[python|perl|bash|{outro}]">{program}.{ext}</command>
</script>
</inkscape-extension>
Slide 10: Caminho
svg 
xml 
