S calable V ector G raphics Ricardo Alexandre G. C. Martins

Apresentação em tema: "S calable V ector G raphics Ricardo Alexandre G. C. Martins"— Transcrição da apresentação:

1 S calable V ector G raphics Ricardo Alexandre G. C. Martins ram@di.uminho.pt

2 O que é ? Para que serve ? Aplicação XML Maneira portável e compacta de representar informação gráfica (imagens vetoriais) Atualmente é suportado por diversos softwares de grandes empresas como Adobe (SVG Viewer) e Jasc (Paint Shop Pro) Permite desenvolver aminações e interação com o usuário, utilizando Javascript Possibilidade de criação de imagens on-demand através do uso de stylesheets

3 Primitivas Suportadas Linha Círculos e Elipses Retângulo Polígono Polilinhas

4 Código-fonte <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> Exemplo do uso de primitivas <rect x="160" y="16" width="120" height="60" style="stroke:#99CC00; stroke-dasharray:5,2; fill:blue"/> <polygon points="48,16 16,96 96,48 0,48 80,96" style="fill:#ccffcc; stroke:green;"/>

5 Estilos Possibilidade da criação de grupos Possível manipulação das características (cores, larguras, transparência, orientação do texto, etc.) Utilização de filtros, que permitem criar e alterar sombras, iluminação, gradientes

6 Código Fonte <feColorMatrix type="matrix" values= "0 0 0 0 0 0 0 0 0.9 0 0 0 0 1 0"/>

7 Código fonte (cont) Have a nice day !!! <circle cx="165" cy="155" r="60" style="stroke:black; filter:url(#sombra);"/> <circle cx="160" cy="150" r="60" style="stroke:black; fill:yellow;"/> <ellipse cx="140" cy="125" rx="5" ry="10" style="stroke:black; fill:black;"/> <ellipse cx="180" cy="125" rx="5" ry="10" style="stroke:black; fill:black;"/> <path d="M 120,165 A80,150 0 0,0 200,165" style="stroke:black; fill:none;"/>

8 Animações Controladas pelo autor Interativas (com o uso de Javascript )

9 Animações controladas pelo autor … <animate attributeName="cx" attributeType="XML" from="110" to="340" begin="0s" dur="5s" fill="freeze"/> …

10 Animações Interativas <![CDATA[ function aumenta(evt) { circulo = evt.getTarget(); circulo.setAttribute("r","50"); } function diminui(evt) { circulo = evt.getTarget(); circulo.setAttribute("r","25"); } // ]]>

11 Animações Interativas (cont.) Imagem interativa Exemplo de imagem interativa <circle cx="250" cy="100" r="25" style="fill:red;" onmouseover="aumenta(evt)" onmouseout="diminui(evt)"/> Passe o rato sobre o circulo para mudar seu tamanho

12 Referências Eisenberg, J. David, Editora O'Reilly, SVG Essentials

13 The End