Scalable Vector Graphics Imagens Digitais Prof.

Carlos Majer
SVG
SVG
Grficos Vetoriais Escalveis
Introduo
Prof. Carlos Majer
Carlos Majer
http://www.carlosmajer.com.br
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
O que ?
Uma linguagem baseada em XML que permite ao computador exibir imagens
vetoriais.

Ela prpria para desenho de formas e criada atravs de comandos que o
visualizador SVG (Exemplo: navegador) interpreta e executa.

A maior parte das verses atualizadas dos navegadores para Internet exibem e
entendem comandos e arquivos SVG.
Imagem Bitmapeada
Imagem SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="190"
height="190" id="svg2" sodipodi:version="0.32" inkscape:version="0.46"
sodipodi:docname="checkmarks_ocal081028_f1.svg"
inkscape:output_extension="org.inkscape.output.svg.inkscape" version="1.0">

<defs id="defs4">
<inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 :
526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 :
526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
id="perspective10" />

<inkscape:perspective id="perspective3331" inkscape:persp3d-
...
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
A linguagem vetorial
Uma imagem bitmapeada (composta por pixels) ao ser aumentada exibe
imperfeies ao passo que a imagem vetorial, pelo fato de ser composta por
comandos interpretados e executados pelo visualizador, no perde
informaes e nem qualidade, no importa a escala utilizada no
dimensionamento da imagem.
Imagem Bitmapeada aumentada Imagem SVG aumentada
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
A linguagem vetorial
Embora uma imagem SVG tenha propriedades interessantes, verifica-se que
no a mais adequada para exibio de imagens baseadas em mapas de bits
(bitmapeada), como tambm filmes ou fotos.

Isto ocorre em funo destes tipos de imagens terem muita variao (nmero de
pixels), o que geraria muitos comandos para exibio de alguns poucos pixels.

As vantagens no uso de uma imagem SVG ocorre quando existe a necessidade
de se inserir uma forma (Exemplo: quadrado, circulo, retngulo, etc.), grficos,
diagramas ou de redimensionamentos diversos.
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
A linguagem vetorial
Para salvar uma imagem vetorial que esteja sendo exibido em seu computador,
clique com o boto direito sobre a imagem e salve-a.

Para visualizar os comandos vetoriais que criam a imagem, exiba seu cdigo-
fonte.
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
A linguagem vetorial
X
Posio inicial (0,0)
Y
A posio inicial da rea de desenho do SVG comea no topo,
diferente do tradicional diagrama cartesiano X,Y que comea na
base.
(20,0)
(0,60)
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
No exemplo abaixo, criaremos uma imagem SVG contendo um quadrado
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="100" height="100" rx=0" ry=0"
stroke="#000000" stroke-width="2" fill="#0000ff" />
</svg>
<?xml version="1.0" standalone="no"?>
Declarao de arquivo formato XML. Atributo Standalone com valor=no significa que o
arquivo no est sozinho, isto , deve aguardar informaes complementares para validao do
arquivo.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Define o arquivo doctype (document type) que define as regras para validao de seu contedo.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
Define o tipo de formato (svg), a localizao de informaes detalhadas e sua verso.
Fonte
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
Continuao...
<rect x="100" y="100" width="100" height="100" rx="0" ry="0" stroke="#000000" stroke-
width="2" fill="#0000ff" />

Utiliza a marca <rect> para a criao de um retngulo, com a seguinte configurao
Posio x,y determinada em (0,0)
Largura (width) de 100 pixels
Altura (height) de 100 pixels
Arredondamento da borda no eixo do x (rx=0" ).
Experimente alterar este valor para metade da largura (rx =50" ).

Arredondamento da borda no eixo do y (ry=0" ).
Experimente alterar este valor para metade da altura (rx =50" ).

Cor do trao da linha de borda = preto (stroke="#000000)
Largura do trao da linha de borda=2 (stroke-width="2)
Preenchimento do objeto= azul ( fill="#0000ff)

</svg>
Finaliza a marca <svg>

Fonte
http://www.w3.org/TR/SVG/shapes.html#RectElement
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
Circulo
<circle cx="100" cy="120" r="80" stroke="black" stroke-width="2" fill="yellow" />

<circle> - Marca para criao de um circulo
cx = Coordenada do centro do eixo X.
Quando no especificada, o valor 0 (zero) assumido.

cy = Coordenada do centro do eixo Y.
Quando no especificada, o valor 0 (zero) assumido.

r = Raio. Valor positivo maior que zero e define o raio do circulo.
Fonte
http://www.w3.org/TR/SVG/shapes.html#CircleElement
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
Elipse
<ellipse cx="110" cy="100" rx="100" ry="30" fill="gray" />

<ellipse> - Marca para criao de uma elipse.
cx = Coordenada do centro do eixo X.
Quando no especificada, o valor 0 (zero) assumido.

cy = Coordenada do centro do eixo Y.
Quando no especificada, o valor 0 (zero) assumido.

rx = Raio do X. Valor positivo maior que zero e define o raio da elipse no eixo do X.

ry = Raio do Y. Valor positivo maior que zero e define o raio da elipse no eixo do X.

Fonte
http://www.w3.org/TR/SVG/shapes.html#EllipseElement
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
Linha
<line x1="100" y1="100" x2="200" y2="100" stroke-width="5" stroke="black" />

<line> - Marca para criao de uma linha.

x1 = Posio inicial do ponto da linha, no eixo dos X.
x2 = Posio final do ponto da linha, no eixo dos X.

y1 = Posio inicial do ponto da linha, no eixo dos Y.
y2 = Posio final do ponto da linha, no eixo dos Y.

Quando uma das propriedades acima no for especificada, o valor 0 (zero)
assumido.

Fonte
http://www.w3.org/TR/SVG/shapes.html#EllipseElement
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Formas Bsicas
Exerccios
1) Crie as seguintes formas usando comandos SVG
2) Cada uma das formas abaixo deve ser criada num arquivo SVG separado
DICA Cores utilizadas
#ff0000
#ff00ff
#00ffff
#00ff00
#0000ff
red
green
blue
Scalable Vector Graphics Imagens Digitais Prof. Carlos Majer
SVG
Fim!
Obrigado
Presena Digital
Carlos Majer
http://www.carlosmajer.com.br