Embed Size (px)
DESCRIPTION
S calable V ector G raphics. Ricardo Alexandre G. C. Martins [email protected]. O que é ? Para que serve ?. Aplicação XML Maneira portável e compacta de representar informação gráfica (imagens vetoriais) - PowerPoint PPT Presentation
Citation preview
O que é ? Para que O que é ? Para que serve ?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
Primitivas SuportadasPrimitivas Suportadas
Linha
Círculos e Elipses
Retângulo
Polígono
Polilinhas
Código-fonteCó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>
EstilosEstilos
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 FonteCó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>
Código fonte (cont)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"/>
AnimaçõesAnimações
Controladas pelo autor
Interativas (com o uso de Javascript)
Animações controladas Animações controladas pelo autorpelo 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>
…
Animações InterativasAnimaçõ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>
Animações Interativas Animações Interativas (cont.)(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>
ReferênciasReferências
Eisenberg, J. David, Editora O'Reilly, SVG Essentials
The End
