1 / 13

S calable V ector G raphics

S calable V ector G raphics. Ricardo Alexandre G. C. Martins ram@di.uminho.pt. O que é ? Para que serve ?. Aplicação XML Maneira portável e compacta de representar informação gráfica (imagens vetoriais)

lani-atkinson
Download Presentation

S calable V ector G raphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Scalable Vector Graphics 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 empresascomo 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 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="520" height="300"> <title> Exemplo do uso de primitivas</title> <!-- Linha, circulo, retangulo, poligono e arco --> <line x1="420" y1="16" x2="420" y2="150" style="stroke:black;"/> <circle cx="350" cy="41" r="25" style="stroke:blue; fill:green;"/> <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;"/> <path d="M125,185 A100,50 0 1,0 225,185" style="fill:none; stroke:red"/> </svg>

  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 <filter id="sombra"> <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> </filter> <filter id="glow"> <feColorMatrix type="matrix" values= "0 0 0 0 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1 0"/> <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter>

  7. Código fonte (cont) <text x="190" y="50" style="filter:url(#glow); fill:#003333; font-size:18;"> Have a nice day !!! </text> <g id="smile"> <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;"/> </g> <use xlink:href="#smile" x="190" y="0"/>

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

  9. Animações controladas pelo autor … <circle cx="110" cy="240" r="10" style="stroke:black; fill:#CCCCCC;"> <animate attributeName="cx" attributeType="XML" from="110" to="340" begin="0s" dur="5s" fill="freeze"/> </circle> …

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

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

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

  13. The End

More Related