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

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

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

Código-fonte <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " 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;"/>

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

Código Fonte <feColorMatrix type="matrix" values= " "/>

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, ,0 200,165" style="stroke:black; fill:none;"/>

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

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

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

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

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

The End