Scalable Vector Graphics
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)
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
<?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>
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
<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)
<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ções
Controladas pelo autor
Interativas (com o uso de Javascript)
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>
…
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>
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>
Referências
Eisenberg, J. David, Editora O'Reilly, SVG Essentials
The End