.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: PalestraEstendendoInkscape

Últimas blogadas:

%HEADLINES{"http://softwarelivre.org/aurium/blog/feed" refresh="600" header="SoftwareLivre.org" limit="15" format=" * $title" }% %HEADLINES{"http://cirandas.net/aurium/blog/feed" refresh="600" header="Cirandas.net" limit="15" format=" * $title" }%



É preciso usar um navegador com suporte a SVG para visualizar os slides que seguem. Recomendo o uso do FireFox 2.


Start presentation

Slide 1: Construindo Extensões para Inkscape

Aurélio A. Heckert
aurium@gmail.com

PSL-BA - COLIVRE
Última modificação: 10 Jun 2015 (rev 1)

Slide 2: O que é SVG?

É isso?

smile

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

  • Dialeto XML

  • Formatável com CSS

  • Manipulável com DOM

Borboleta Vetorial

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

Logo Inkscape

Slide 7: Tipos de Extensões

Slide 8: Como um efeito é executado

Executando Efeito no Inkscape
(passo 1)

< passo anterior         próximo passo >
passo 2 passo 3 passo 4 passo 5 passo 6 passo 7

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

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
ExecutandoEfeito.svgsvg ExecutandoEfeito.svg manage 141 K 09 Apr 2007 - 22:48 AurelioAHeckert  
caminho.xmlxml caminho.xml manage 2 K 18 Jan 2008 - 13:09 AurelioAHeckert  
Copyright © 2004 - 2019 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa