Aula 3

Imagens Vetoriais
 Ferramentas que serão usadas

• Para editar o código:

1. Visual Studio Code
2. Notepad++
3. Atom

• Para visualizar a imagem:

1. SVG Viewer (Visual Studio Code) RECOMENDADO
2. Inkscape
3. Algum visualizador de SVG online
4. Jogar em um navegador recente
 O que são imagens vetoriais

• Imagens formadas por primitivas geométricas.

• Diferem de imagens matriciais (raster), que por sua vez são formadas
por pixels.

• Vantagens das imagens vetoriais:

1. Imagens vetoriais são mais leves que imagens raster.
2. Imagens vetoriais apresentam escalabilidade sem perda de qualidade.
3. Imagens vetoriais não apresentam problemas de aliasing.
4. Operações de processamento são mais eficientes.
 O que são imagens vetoriais

• Desvantagens de imagens vetoriais:

1. Inadequação para representação de imagens naturais
2. Tempo para exibição proporcional à complexidade do modelo

• Uso de imagens vetoriais:

1. Ilustrações
2. Logos
3. Animações
4. Impressão
 Formatos

• AI: imagens vetoriais criadas e editadas pelo Adobe Illustrator.

• PDF: pode armazenar tanto imagens vetoriais quanto matriciais.
• DWG: originário e usado no AutoCAD.
• WMF: formato vetorial padrão do Windows (16 bits).
• EMF: versão mais recente e avançada do formato WMF (32 bits).
• SVG: definido por arquivos de texto XML.
Exemplos
Exemplos
 XML

• XML (Extensible Markup Language) é uma linguagem de marcação,

assim como HTML.
• XML foi projetado para armazenar e transportar dados.
• XML, por si só, não faz nada.
 XML

<?xml version="1.0" encoding="ISO-8859-1"?>

<receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">
<titulo>Pão simples</titulo>
<ingredientes>
<ingrediente quantidade="3" unidade="xícaras">Farinha de Trigo</ingrediente>
<ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente>
<ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente>
<ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente>
</ingredientes>
<instrucoes>
<passo>Misture todos os ingredientes, e dissolva bem.</passo>
<passo>Cubra com um pano e deixe por uma hora em um local morno.</passo>
<passo>Misture novamente, coloque numa bandeja e asse num forno.</passo>
</instrucoes>
</receita>
 SVG

• SVG (Scalable Vector Graphics) define imagens vetoriais em XML.

• Por consequência, essas imagens são muito mais flexíveis que em outros
formatos, como por exemplo JPG ou PNG.

<svg width="200" height="200">

<rect x="5" y="5" width="40" height="40" fill="green"/>
<rect x="5" y="5" width="40" height="40" fill="blue" transf
orm="translate(50)"/>
<circle cx="100" cy="100" r="20" fill="red" transform="tran
slate(-25, -20)"/>
<path d="M 5,65 H 45 L 5,105 z" fill="yellow"/>
</svg>
 Elementos mais comuns
• Círculo
<svg>
<circle cx="50" cy="50" r="50" fill="#529fca"/>
</svg>

• Retângulo
<svg>
<rect x="0" y="0" width="100" height="100" fill=“r
ed"/>
</svg>
 Elementos mais comuns
• Linha
<svg>
<line x1="0" y1="0" x2="100" y2="100" stroke=“red"
/>
</svg>

• Polígono
<svg>
<polygon points="30,140 200,30 370,140 200,250"/>
</svg>
 Elementos mais comuns
• Agrupamento

<svg width="200" height="200">

<rect x="0" y="0" width="100" height="100" fill="#
529fca"/>
<g fill=“blue">
<rect x="0" y="100" width="100" height="100“/>
<rect x="100" y="0" width="100" height="100"/>
</g>
</svg>
 Elementos mais comuns

• Forma qualquer

<svg height="300" width="300">

<path d=“M 130,140 Q 200,110 270,140 z"
fill="#59fa81" stroke="#d85b49" stroke-
width="3" />
</svg>
 Elementos mais comuns

• path
• Atributo d: contém comandos de direcionamento.
• M: mover referência para coordenada x,y
• L: traça linha da última coordenada até coordenada x,y
• H: traça linha horizontal a partir da última coordenada em x
• V: mesmo que acima, porém verticalmente
• Z: finaliza o path (traça uma linha até o começo)
• Q: curva de Bézier quadrática (2 pontos âncora e 1 ponto de controle)
• C: curva de Bézier cúbica (2 pontos âncora e 2 pontos de controle)

OBS: Comando em maiúsculo: coordenada absoluta

Comando em minúsculo: coordenada relativa
 Exercício

• Escreva um código SVG que desenhe a bandeira do Brasil e a

rotacione em 30º com ponto de referência sendo o vértice inferior
esquerdo do retângulo verde da bandeira.
• Isto é, se a bandeira tem dimensões 400x300, o ponto de referência será x = 0
e y = 300.
• O texto “Ordem e Progresso” e as estrelas são opcionais, porém o
restante da bandeira é obrigatório.
• Envio para henrique.barcia@gec.inatel.br até 15/08/2019 12:00
(meio dia) com assunto “[C209 – L1] 1ª entrega”. Informar no corpo
do email nome completo e matrícula.
 Exercício

https://www.schemecolor.com/brazil-flag-colors.php
https://pt.wikipedia.org/wiki/Bandeira_do_Brasil