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

Aurium :: PalestraSVG

Ú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: SVG - Arte para Nerds e Código para Artistas

Aurélio A. Heckert
aurium@gmail.com

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

Slide 2: O que é SVG?

É isso?

smile
baixar original

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>
baixar original

Slide 4: SVG é…

  • Formato aberto definido pela W3C

  • Dialeto XML

  • Formatável com CSS

  • Manipulável com DOM
 
Borboleta Bitmap
SVG é Vetorial
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: Potrace Show

Vetorizando com qualidade
Malvados
Memorial de Juri Dolgoruky

Slide 8: Extendendo o Inkscape

Executando Extenções do Inkscape

Slide 9: SVG + XHTML

Se esse navegador tem suporte nativo a svg você pode ver um circulo laranja ao lado com a borda vermelho escuro. Ele foi criado dinâmicamente com javascript e adicionado dentro de um elemento <div>. Clique nos botões ao lado para modificar seus atributos.
   
Mudar Cor:


Tamanho:
+   -
var svgCircle = document.createElementNS(svgNS,"circle");
svgCircle.setAttribute("r", "45");
htmlElement.appendChild(svgRoot);

Slide 10: Mais possibilidades na interação via Markup

Crie seu Smile:

Crie seu Smile

Slide 11: Para quando o chefe sair

Tetris
Moon Lander
Tetris em SVG
Moon Lander em SVG
…e GNOME Games

Slide 12: Fluxograma Solucionador de Problemas

Fuxograma

Slide 13: Gáficos Estatísticos - Bonitos!

gráfico 1
gráfico 2

Google mostra algumas estatísticas em SVG, mas pela praticidade.
( http://code.google.com/webstats/index.html )

Slide 14: Criando Gáficos Estatísticos com PHP

class ChartSVG {
  …
  function ChartSVG( $w, $h ) { … }
  function setSteps( $steps ) { … }
  function addData( $dataObj ) { … }
  …
  function generateSVG() { … }
  …
}

class ChartData {
  …
  var $type;
  …
  var $color;
  …
}
 $graf = new ChartSVG( 350, 300 );

 $graf→setSteps( Array(
       "Jan", "Fev", "Mar",
       "Abr", "Mai", "Jun"
     ) );

 $g1 = new ChartData( Array( … ) );
 $g1→setType( "Bar" );

 $g2 = new ChartData( Array( … ) );
 $g2→setType( "Line" );

 $graf→addData( $g1 );
 $graf→addData( $g2 );

 header("Content-type: image/svg+xml");
 print $graf→generateSVG();

Mais Info: http://aurium.cjb.net/ChartSvgInPHP

Slide 15: Acabou

FIM
aurium@gmail.com

 

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
Borboleta_bitmap.pngpng Borboleta_bitmap.png manage 63 K 23 Aug 2006 - 14:50 AurelioAHeckert  
Borboleta_vetorial.pngpng Borboleta_vetorial.png manage 67 K 23 Aug 2006 - 14:50 AurelioAHeckert  
CreateYourSmile.pngpng CreateYourSmile.png manage 9 K 24 Jun 2006 - 21:27 AurelioAHeckert  
ExecutandoExtencoes.jpgjpg ExecutandoExtencoes.jpg manage 27 K 24 Jun 2006 - 21:27 AurelioAHeckert  
ExecutandoExtencoes.svgsvg ExecutandoExtencoes.svg manage 138 K 24 Jun 2006 - 21:27 AurelioAHeckert  
MemorialToJuriDolgoruky.jpgjpg MemorialToJuriDolgoruky.jpg manage 48 K 24 Jun 2006 - 21:27 AurelioAHeckert  
MoonLanderSVG.jpgjpg MoonLanderSVG.jpg manage 28 K 24 Jun 2006 - 21:27 AurelioAHeckert  
TetrisSVG.pngpng TetrisSVG.png manage 4 K 24 Jun 2006 - 21:27 AurelioAHeckert  
graf1.pngpng graf1.png manage 4 K 24 Jun 2006 - 21:27 AurelioAHeckert  
graf2.pngpng graf2.png manage 23 K 24 Jun 2006 - 21:27 AurelioAHeckert  
inkscape.jpgjpg inkscape.jpg manage 6 K 24 Jun 2006 - 21:27 AurelioAHeckert  
malvados.gifgif malvados.gif manage 5 K 24 Jun 2006 - 21:27 AurelioAHeckert  
smile.svgsvg smile.svg manage 1 K 09 Apr 2007 - 21:16 AurelioAHeckert  
smile_g.jpgjpg smile_g.jpg manage 27 K 24 Jun 2006 - 21:27 AurelioAHeckert  
Copyright © 2004 - 2019 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa