E-book - Ilustração Vetorial para Web [ETEPAC 2021]

Prévia do material em texto

Ilustração Vetorial para Web 
Cinthya Cavalcanti Flório 
Leonardo Guimarães de Holanda 
 
Curso Técnico em Informática 
Educação a Distância 
2021 
 
 
 
 
 
 
 
 
 
 
 
 
 
Ilustração Vetorial para Web 
Cinthya Cavalcanti Flório 
 
Curso Técnico em Informática 
 
 
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa 
 
Educação a Distância 
 
Recife 
 
1.ed. | Fev. 2021 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Catalogação e Normalização 
Hugo Cavalcanti (Crb-4 2129) 
 
Diagramação 
Jailson Miranda 
 
Coordenação Executiva 
George Bento Catunda 
Renata Marques de Otero 
Manoel Vanderley dos Santos Neto 
 
Coordenação Geral 
Maria de Araújo Medeiros Souza 
Maria de Lourdes Cordeiro Marques 
 
Secretaria Executiva de 
Educação Integral e Profissional 
 
Escola Técnica Estadual 
Professor Antônio Carlos Gomes da Costa 
 
Gerência de Educação a distância 
 
 
Professor(es) Autor(es) 
Cinthya Cavalcanti Flório 
Leonardo Guimarães de Holanda 
 
Revisão 
Cinthya Cavalcanti Flório 
 
Coordenação de Curso 
José Américo Teixeira de Barros 
 
Coordenação Design Educacional 
Deisiane Gomes Bazante 
 
Design Educacional 
Ana Cristina do Amaral e Silva Jaeger 
Helisangela Maria Andrade Ferreira 
Izabela Pereira Cavalcanti 
Jailson Miranda 
Roberto de Freitas Morais Sobrinho 
 
Descrição de imagens 
Sunnye Rose Carlos Gomes 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sumário 
Introdução .............................................................................................................................................. 4 
1.Competência 01 | Introdução à Ilustração Vetorial para Web ........................................................... 5 
1.1 Conhecendo os principais formatos de representações vetoriais para web ............................................. 5 
1.1.1 Imagens Bitmap ....................................................................................................................................... 5 
1.1.2 Imagens Vetoriais .................................................................................................................................... 8 
1.1.2.1 Formatos das imagens vetoriais ......................................................................................................... 14 
1.1.3 SVG ......................................................................................................................................................... 19 
1.1.3.1 Primeiro Exemplo................................................................................................................................ 22 
1.1.3.2 Segundo Exemplo ............................................................................................................................... 26 
1.1.3.3 Terceiro Exemplo ................................................................................................................................ 29 
1.1.3.4 Quarto Exemplo .................................................................................................................................. 30 
1.1.4 Imagens Bitmap x Imagens Vetoriais ..................................................................................................... 34 
2.Competência 02 | Planejar Layouts e Peças Gráficas com Base em Vetores para Web .................. 36 
2.1 Inkscape .................................................................................................................................................... 37 
2.1.1 Instalação ............................................................................................................................................... 38 
2.1.2 Interface ................................................................................................................................................. 50 
2.1.2.1 Menu Textual ...................................................................................................................................... 52 
2.1.2.2 Barra de Comandos ............................................................................................................................ 52 
2.1.2.3 Barra de Ferramenta de Atração ........................................................................................................ 52 
2.1.2.4 Barra de Controle de Ferramentas ..................................................................................................... 53 
2.1.2.5 Barra de Ferramentas ......................................................................................................................... 53 
2.1.2.6 Réguas ................................................................................................................................................. 54 
2.1.2.7 Barra de Rolagem................................................................................................................................ 54 
2.1.2.8 Paleta de Cores ................................................................................................................................... 55 
2.1.2.9 Barra de Status .................................................................................................................................... 55 
 
 
 
 
 
 
2.1.2.10 Área de Desenho............................................................................................................................... 56 
2.1.3 Funcionalidades ..................................................................................................................................... 57 
2.1.3.1 Elipse ................................................................................................................................................... 57 
2.1.3.2 Paleta de cores .................................................................................................................................... 58 
2.1.3.3 Texto ................................................................................................................................................... 62 
2.1.3.4 Gradiente ............................................................................................................................................ 63 
2.1.4 Planejamento de WebSites com Inkscape ............................................................................................. 65 
2.1.4.1 Personalizar a área de desenho .......................................................................................................... 66 
2.1.4.2 Importar uma imagem ........................................................................................................................ 67 
2.1.4.3 Exportar uma imagem ........................................................................................................................ 74 
Conclusão ............................................................................................................................................. 76 
Referências ........................................................................................................................................... 77 
Minicurrículo do Professor ................................................................................................................... 78 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
Introdução 
É com satisfação que dou a vocês as boas-vindas à disciplina de Ilustração Vetorial para 
Web. Os assuntos que serão tratados nesta disciplina fazem parte de uma área da informática 
conhecida como Web Design. Essa área está relacionada com a computação gráfica e é fortemente 
utilizada na elaboração de interfaces gráficas digitais, layout de páginas na web, material de 
publicidade e marketing, entre outros. Uma das principais tarefas é a criação e manipulação de 
imagens digitais. 
As imagensdigitais são arquivos específicos que são armazenados em formatos 
previamente estabelecidos para serem exibidos e modificados pelo computador. Essas imagens se 
dividem em dois grandes grupos, imagens bitmaps e vetoriais. A escolha de qual tipo de imagem 
utilizar vai depender da aplicação que ela terá. Cada tipo de imagem possui determinadas 
características e particularidades, fazendo com que ela se torne mais apropriada a um dado contexto. 
O processamento de imagens digitais é uma das áreas em maior expansão nos últimos 
anos pois, refere-se a um ramo da ciência que pode ser aplicado em vários tipos de segmentos da 
indústria, como por exemplo, área da saúde, projetos automobilísticos, aeronáutica, projetos 
marítimos, arquitetura e design, entre outros. 
Para facilitar a absorção do conteúdo e o aprendizado, o nosso caderno possui duas 
competências. A primeira será mais teórica e você aprenderá sobre os principais conceitos 
relacionados a tipos de imagens digitais, suas características e diferenças. A segunda competência 
será mais prática e você conhecerá sobre a ferramenta gráfica Inkscape pois, será apresentada a 
interface gráfica dessa ferramenta, bem como suas funcionalidades principais. 
 
Desejo que você aproveite ao máximo essa disciplina! 
 
 
 
Para conhecer algumas das funcionalidades disponíveis no Inkscape acesse: 
https://www.youtube.com/watch?v=JtzutknwoF0 
 
https://www.youtube.com/watch?v=JtzutknwoF0
 
 
 
 
 
 
Competência 01 
5 
1.Competência 01 | Introdução à Ilustração Vetorial para Web 
Na nossa primeira competência vamos aprender sobre os principais tipos de imagens 
utilizadas na web, as características de cada tipo, como esses tipos de imagens são formados, quais 
são os principais formatos de imagens com suas respectivas descrições e extensões, quais são as 
principais diferenças entre esses tipos de imagens, quais são suas utilizações, e por fim, quais são as 
ferramentas gráficas vetoriais mais utilizadas. 
 
1.1 Conhecendo os principais formatos de representações vetoriais para web 
Atualmente as imagens digitais estão muito presentes nas nossas vidas cotidianas, 
através de fotos nas redes sociais, emojis em programas de bate-papo, páginas web, outdoors nas 
ruas, entre outros. Contudo, poucos usuários sabem que elas são o produdo de diversas tarefas que 
envolvem a computação gráfica e o trabalho de vários profissionais. 
Essas imagens podem ter como ponto de origem um computador (geralmente esse tipo 
de imagem é vetorial) ou um dispositivo eletrônico como por exemplo um tablet, celular ou câmera 
fotográfica digital (na maioria das vezes esse tipo de imagem é bitmap). Vamos agora conhecer dois 
tipos de imagens muito utilizados na web, imagens bitmaps e vetoriais. 
 
1.1.1 Imagens Bitmap 
As imagens bitmap são também conhecidas como imagens matriciais ou raster. Esse tipo 
de imagem recebe esse nome, bitmap (que significa mapa de bits), porque são imagens que são 
constituídas de conjuntos de bits. Elas são compostas por vários pixels, mas o que são pixels? 
A palavra pixel é a abreviação da expressão picture element (que significa elemento de 
uma imagem) e, como o próprio nome diz, representa o menor elemento que compõe uma imagem 
digital, ou seja, quando as imagens bitmaps são ampliadas é possível observar que os pixels são 
diversos quadrados muito pequenininhos (pontinhos) que juntos formam uma determinada imagem, 
como um mosaico composto por várias peças bem pequenas. 
 
 
 
 
 
 
Competência 01 
6 
 
É muito importante que esse conceito fique muito claro para você estudante então, para 
facilitar a absorção dele e dos próximos que virão, este ebook está repleto de figuras, por isso peço 
que você tenha muita atenção a todas elas afinal, uma imagem vale mais que mil palavras. 
A figura a seguir exibe um exemplo de imagem bitmap com a fotografia de duas peras em 
alta resolução, na qual é possível visualizar do lado esquerdo um círculo azul contornando uma parte 
da imagem ampliada. Essa parte ampliada está apresentando deformidade e perda de qualidade pois, 
está sendo possível visualizar os pixels que a compõem. Em compensação, do lado direito é exibida a 
imagem completa das duas peras sem deformidade e com alta qualidade. Estudante, se você quiser 
visualizar melhor os detalhes dessa figura ou de qualquer outra desse caderno, recomendo que você 
a amplifique por meio do recurso zoom disponível no seu leitor de PDF (Portable Document Format). 
 
Figura 1 - Exemplo de imagem bitmap 
Fonte: Adaptado de https://www.palamin.com.br/post/as-diferen%C3%A7as-entre-arquivos-bitmap-e-vetor 
Descrição: Imagem bitmap em alta resolução de duas peras verdes, uma caída e outra em pé. A pera da esquerda 
possui um círculo com contorno azul ampliando uma parte dela, de forma a salientar os pixels existentes. 
 DICA IMPORTANTE! 
Resumidamente, um pixel é a menor parte de uma imagem. 
 
 
 
 
 
 
Competência 01 
7 
Os olhos de um ser humano não possuem a habilidade de visualizar individualmente cada 
um dos pixels que formam uma imagem, em vez disso é possível obter um panorama geral da imagem 
enxergando a associação dos vários pixels que a formam. Um exemplo disso é o fato de podermos 
ver o círculo exibido na Figura 2a, porém não conseguimos ver particularmente cada um dos pixels 
dela. Caso desejássemos ver os pixels da Figura 2a teríamos que selecionar uma parte da imagem e 
ampliá-la conforme é mostrado na Figura 2b. 
 
Figura 2 – Diferentes perspectivas de uma imagem bitmap. (a) imagem de um círculo (b) imagem de alguns pixels do 
círculo 
Fonte: https://www.rickardo.com.br/apresentacoes/!AP_IntroMulti_FormatDig_bx.pdf 
Descrição: Duas figuras identificadas pelas letras a e b. A primeira figura, letra a, apresenta um círculo inserido em uma 
matriz, contornado por outro cículo laranja. Já a segunda figura, letra b, mostra uma parte do cículo apresentado na na 
figura a. Essa parte está ampliada, exibindo a matriz X e Y dos pixels. 
 
Estudante, imagine agora que você tem uma imagem bitmap de um círculo e você precisa 
ampliar o tamanho dessa imagem em 100 vezes. O acontecerá será algo semelhante ao que foi 
exibido anteriormente na Figura 2b, ou seja, a imagem bitmap do círculo irá perder qualidade à 
medida que for sendo ampliada. Essa é uma das principais desvantagens das imagens bitmaps pois, 
quando ocorre a necessidade de redimensionar uma imagem, aumentar ou diminuir, ela irá sofrer 
perda de qualidade. 
Nesse momento você estudante deve está se perguntando: “Que tipo de imagem eu 
posso utilizar quando precisar redimensioná-la sem perder a qualidade?” A resposta para essa 
pergunta é um tipo de imagem chamada vetorial. Vamos aprender sobre esse tipo de imagem no 
próximo tópico. 
 
 
 
 
 
 
 
Competência 01 
8 
1.1.2 Imagens Vetoriais 
Estudante, agora que você já sabe o que são imagens bitmaps, entender o que são 
imagens vetoriais será muito mais fácil. Diferentemente das imagens bitmaps que são compostas por 
pixels, as imagens vetoriais são constituídas de cálculos ou expressões matemáticas que produzem 
figuras por meio de formas geométricas, como por exemplo, retângulos, círculos, triângulos, 
polígonos, linhas, elipses, pontos, além de outras formas geométricas irregulares que são mais 
complexas. 
 
Para tornar mais claro o conceito de imagem vetorial a figura a seguir exibe um exemplo 
desse tipo de imagem. Nesse momento estudante você deve observar atentamente a Figura 1 e 
compará-la com a Figura 3. Dessa forma você vai conseguir identificar a diferença entre os tipos de 
imagens bitmap e vetorial ao visualizá-las. 
 
Figura 3 – Exemplos de imagem vetorial 
Fonte: https://www.palamin.com.br/post/as-diferen%C3%A7as-entre-arquivos-bitmap-e-vetor 
Descrição: Imagem vetorial de três peras verdes, duas em pé e uma caída. Observando da direita para a esquerda, a 
primeira pera está inteira, a segunda peraestá partida pela metade e a última pera está partida, mostrando apenas 1/4 
dela. A pera do meio possui um círculo com contorno azul ampliando uma parte dela, de forma a salientar que mesmo 
após ampliá-la esta não sofre deformidade. 
 
DICA IMPORTANTE! 
 
Imagem vetorial, vetorizada, gráfico vetorial, forma vetorial, objeto vetorial ou 
desenho vetorial significam o mesmo tipo de imagem. 
 
 
 
 
 
 
 
Competência 01 
9 
As equações ou objetos matemáticos que produzem as formas geométricas das imagens 
vetoriais são chamados de vetores matemáticos. Esses vetores descrevem uma imagem conforme as 
características geométricas dela. 
Para entender melhor esse conceito vamos utilizar a figura abaixo como exemplo, entre 
outros elementos essa figura exibe uma pipa sendo empinada, essa pipa foi formada a partir de uma 
definição matemática de um losango desenhado com duas linhas no interior dele que se cruzam 
formando uma cruz. Além disso, também foi calculada matematicamente a posição das linhas no 
interior da pipa, para que por fim as quatros diferentes cores que compõem a pipa possam ser 
preenchidas. 
 
Figura 4 - Desenho vetorial da igreja do país gratuito 
Fonte: https://pt.vecteezy.com/arte-vetorial/88447-desenho-vetorial-da-igreja-do-pais-gratuito 
Descrição: Imagem vetorial de uma igreja localizada em um campo com árvores e gramado, em um dia ensolarado com 
uma pipa sendo empinada no céu. 
 
 
Resumidamente, as formas geométricas das imagens vetoriais possuem coordenadas e 
pontos de controle, também chamados de alças. As coordenadas definem a posição no espaço, os 
pontos de controle estabelecem quais são os limites de manipulação das formas geométricas, além 
DICA IMPORTANTE! 
Imagens vetoriais não possuem pixels. Elas são formadas a partir de vetores 
matemáticos. 
 
 
 
 
 
 
Competência 01 
10 
de determinar as curvas Béziers. Essas curvas são utilizadas para as mais variadas finalidades como 
por exemplo, desenho de projetos para a indústria automobilística e programas médicos voltados 
para cirurgias, inclusive cirurgias plásticas. 
Outra grande utilização das curvas de Bézier é na confecção de imagens vetoriais devido 
a sua capacidade de permitir uma enorme flexibilidade na manipulação das formas geométricas 
fazendo com que essas possam adquiram contornos fluidos, bem definidos e de fácil adaptação. As 
linhas que ligam os pontos de um desenho não precisam ser todas obrigatoriamente retas pois, as 
curvas de Bézier trazem suavidade ao desenho vetorial, além de facilitar o desenvolvimento de 
formas geométricas irregulares e mais complexas. 
A próxima figura mostra um exemplo da aplicação das curvas Béziers através da 
confecção vetorial de textos. Esse recurso é muito utilizado no mercado de publicidade e marketing 
quando se deseja criar logomarcas ou logotipos para as empresas. 
 
Figura 5 – Exemplos da aplicação das curvas de Bézier 
Fonte: Adaptado de https://www.maxwell.vrac.puc-rio.br/26530/26530.PDF 
Descrição: Imagem vetorial das letras a, g e r em minúsculo, com as curvas de Bézier. 
 
 
 
DICA IMPORTANTE! 
A curva Bézier é um componente muito importante na construção das imagens 
vetoriais. 
 
 
 
 
 
 
Competência 01 
11 
As curvas Béziers funcionam da seguinte forma, os pontos de controle exercem uma força 
sobre cada linha que constitue uma forma geométrica, de modo a deformá-la até alcançar a 
transformação desejada. Os pontos de controle ficam localizados sobre as linhas de forma 
semelhante a vários cortes nela e, os nós são os pontos de interseção que ligam a linha e os pontos 
de controle. 
A curvatura de cada uma das linhas que compõem as formas geométricas é estabelecida 
por meio de fórmulas matemáticas que são calculadas através de ferramentas gráficas digitais. A 
próxima figura mostra um exemplo de uma forma geométrica com seus pontos de controle 
(representado pelas linhas finas contínuas azuis com seus círculos e quadrados muito pequenos), seus 
nós (identificado através dos círculos e quadrados muito pequenos), e suas curvas de Bézier 
(simbolizado pela curva vermelha distorcida que é capaz de produzir formas geométricas diversas). 
 
Figura 6 – Exemplo das curvas de Bézier 
Fonte: http://tecnologiasemneura1.blogspot.com/2018/06/falando-sobre-o-inkscape.html 
Descrição: Curva de Bézier em vermelho com seus pontos de controle e nós. 
 
 
 
 
 Quer aprender mais sobre as curvas de Bézier? Então acesse 
https://www.youtube.com/watch?v=P0pnMBjIq-s 
https://www.youtube.com/watch?v=P0pnMBjIq-s
 
 
 
 
 
 
Competência 01 
12 
Por causa da forma como são construídas, as imagens vetoriais não perdem a qualidade 
quando são redimensionadas, movidas ou sofrem alteração de cor, pois cada alteração que é 
realizada as formas geométricas são recalculadas adaptando-se a nova escala ou variação aplicada. 
Como vimos anteriormente, a Figura 3 mostrou um exemplo de ampliação de uma imagem vetorial 
sem perda da qualidade. 
Devido ao fato de, até o momento, não ter sido encontrada evidências ou comprovações 
no ambiente acadêmico nem no ambiente corporativo sobre qual é o limite máximo ou mínimo que 
uma imagem vetorizada pode ser redimensionada, existe um consenso geral que esse tipo de imagem 
possui a capacidade de ser ampliada ou reduzida de forma abundante, até o limite máximo ou mínimo 
do zoom da ferramenta gráfica utilizada. Porém, é importante ficar atento a determinadas situações 
que podem surgir, tais como: 
• Caso a sua imagem vetorizada possua pequenas falhas, essas ficarão mais salientes 
se a imagem for excessivamente ampliada; 
• Por outro lado, se a sua imagem vetorizada sofrer uma redução muito grande 
algumas formas geométricas de espessuras muito finas poderão não ficar visíveis, 
assim como alguns detalhes da imagem. 
 
 
 
Uma das principais vantagens das imagens vetoriais está na capacidade de determinados 
objetos e seções poderem ser isolados do restante da imagem, fazendo com que esses possam ser 
tratados de forma individual. O grande benefício disso está no fato de ser possível alterar partes 
isoladas de uma imagem, sem nenhum tipo de interferência nas outras partes restantes, facilitando 
assim a aplicação de modificações pontuais nas imagens. Importante salientar que esse processo só 
é possível porque esse tipo de imagem é resultado da combinação de diversas formas geométricas. 
Mais uma vantagem das imagens vetoriais que precisa ser destacada está relacionada a 
alta frequência com que esse tipo de imagem ocupa pouca memória e pouco espaço em disco, 
 
DICA IMPORTANTE! 
As imagens vetoriais são independentes de resolução devido a forma como esse 
tipo de imagem é construída. 
 
 
 
 
 
 
 
Competência 01 
13 
tornando-se imagens muitos “leves”, mesmo quando são ampliadas. Isso ocorre porque os vetores 
matemáticos que produzem as respetivas formas geométricas, e as cores de cada forma é que são 
armazenados em disco ou carregados na memória. 
 
 
Importante salientar que imagens vetoriais não representam, exclusivamente desenhos 
simples e sem complexidade, ao contrário, esse tipo de imagem pode ser bastante robusta, 
trabalhada, possuir diversos detalhes e cores, como é o caso da figura abaixo. Essa figura é um 
exemplo de uma obra de arte vetorizada que foi desenvolvida para ser exibida em um evento 
nacional. 
 
Figura 7 - Exemplo de imagem uma obra de arte vetorizada 
Fonte: Obra de arte vetorizada do artista Cristiano Siqueira. Trabalho para o Portfolio Reviews de São Paulo em 2013. 
(https://crisvector.myportfolio.com/behance-porfolio-reviews-sao-paulo-poster) 
Descrição: A imagem mostra um exemplo de imagem vetorial em que aparece um homem visto do ombro para cima em 
tons de cinza com óculos escuro. Tanto o cabelo como as lentes dos óculos do homem possuem diversas gotas coloridas 
 Para conhecer os 17 melhores bancos de imagens gratuitos, acesse: 
https://enotas.com.br/blog/bancos-de-imagens-gratuitos/#https://enotas.com.br/blog/bancos-de-imagens-gratuitos/
 
 
 
 
 
 
Competência 01 
14 
saindo dele e flutuando para cima. Podemos observar que a imagem vetorial consegue preservar uma enorme riqueza 
de detalhes. 
 
 
Além disso, as imagens vetoriais podem ser comercializadas quando estão finalizadas, ou 
seja, já com aplicação de cores, ou quando ainda estão em seu estado aramado simples, ou seja, 
apenas com a arte feita em linhas. A figura a seguir exibe o mesmo desenho vetorial de duas formas 
diferentes, o primeiro desenho do lado esquerdo está em modo aperfeiçoado com aplicação de cores 
e, o segundo desenho do lado direito em modo aramado simples. 
 
Figura 8 – Diferenças na mesma imagem vetorial. (a) imagem vetorial em cores (b) imagem vetorial em modo 
aramado simples 
Fonte: Adaptado de https://www.rickardo.com.br/apresentacoes/!AP_IntroMulti_FormatDig_bx.pdf 
Descrição: Duas figuras identificadas pelas letras a e b. A primeira figura, letra a, apresenta um carro de corrida azul, 
branco e preto em uma pista de corrida. Já a segunda figura, letra b, mostra o mesmo carro de corrida em uma pista, 
porém, sem as cores, apenas com as linhas e traços. 
 
1.1.2.1 Formatos das imagens vetoriais 
Assim como nas imagens bitmap, nas imagens vetoriais também existe uma grande 
diversidade de formatos de imagens por isso, é importante que você estudante conheça quais são os 
principais formatos de imagens vetoriais utilizados. Para ajudá-lo nessa tarefa a tabela abaixo 
apresenta quatro colunas com: a abreviação, o nome do formato, a extensão e um resumo de alguns 
dos desses formatos. 
ABREVIAÇÃO NOME DO FORMATO EXTENSÃO RESUMO 
 
 
 
 
 
 
 
 
 
Esse formato misto foi desenvolvido 
na década de 80 pela empresa 
Adobe e é uma evolução do formato 
 
 
 
 
 
 
Competência 01 
15 
 
 
 
 
 
EPS 
 
 
 
 
 
Encapsulated Post Script 
 
 
 
 
 
.eps , .epsf, 
.epsfi 
PS (Post Script). Ele recebe essa 
classificação de misto porque pode 
ser usado tanto para imagens 
vetoriais e como bitmap. Apesar 
desse formato ser misto ele não 
pode ser editado em ferramentas 
gráficas bitmaps pois, caso isso 
ocorra seus dados seriam 
inteiramente convertidos para 
pixels. Por outro lado, esse formato 
pode ser aberto e editado em 
ferramentas gráficas vetoriais sem 
problemas. Esse formato foi muito 
utilizado nas décadas passadas, 
contudo atualmente vem sendo 
substituído cada vez mais pelo 
formato PDF pois, esse último 
apresenta uma qualidade muito 
superior. 
 
 
 
 
 
 
 
 
WMF 
 
 
 
 
 
 
 
 
Windows Meta File 
 
 
 
 
 
 
 
 
.wmf,.wmz 
Surgiu na década de 90 através da 
empresa MicroSoft com o objetivo 
de ser o formato nativo para exibição 
de imagens no sistema operacional 
Windows pois, esse formato possui 
funções embutidas nativas do 
Windows. Esse formato é um padrão 
de intercâmbio de imagens entre os 
diferentes softwares da empresa 
Microsoft como por exemplo, Word, 
Power Point, Excel e todos os outros 
 
 
 
 
 
 
Competência 01 
16 
programas que compõem o pacote 
Office. Assim como o formato EPS 
esse também é misto, além de 
possuir uma paleta de cores com 
baixa definição, apenas 16-bits. 
Apesar disso, esse formato é 
escalável e flexível fazendo com que 
ele seja utilizado por diversas 
ferramentas gráficas. 
 
 
 
 
 
 
 
 
EMF 
 
 
 
 
 
 
 
 
Enhanced MetaFile 
 
 
 
 
 
 
 
 
.wmf, .emf, 
.wmz, .emz 
Foi criado na década de 90, pela 
empresa MicroSoft incluído no 
sistema operacional Windows 95 
com o objetivo de substituir o 
formato WMF. O próprio nome do 
formato já diz que ele é uma 
evolução do WMF, pelo fato de 
Enhanced significar aperfeiçoado ou 
melhorado em inglês. Assim como o 
antecessor, esse formato também é 
misto, compatível com todas as 
versões do sistema operacional 
Windows, amplamente aceito por 
diversas ferramentas gráficas e pelos 
softwares que compõem o pacote 
Office. A principal diferença para o 
seu antecessor está no fato desse 
possuir uma paleta de cores com o 
dobro capacidade, 32-bits. 
 
 
 
 
 
 
Foi desenvolvido pela empresa 
Autodesk na década de 80 com a 
 
 
 
 
 
 
Competência 01 
17 
 
 
 
 
 
 
DXF 
 
 
 
 
 
 
Drawing Interchange Format 
 
 
 
 
 
 
.dxf 
finalidade de facilitar o envio e 
recebimento de imagens vetoriais 
entre os diferentes softwares de CAD 
(Computer Aided Design) existentes 
na época. Esse formato possui uma 
paleta de cores bastante limitada, 
apenas 256 cores o que corresponde 
a 8-bits. Existem algumas 
ferramentas gráficas vetoriais que 
aceitam esse formato, como por 
exemplo, Corel Draw e Adobe 
Illustrator, além de muitos 
programas CAD. 
 
 
 
 
 
 
 
 
CDR 
 
 
 
 
 
 
 
 
CorelDRAW 
 
 
 
 
 
 
 
 
.cdr 
Assim como outros formatos já 
apresentados, esse formato também 
é misto e também surgiu na década 
de 80. Um dos diferenciais desse 
formato é o fato de ser nativo da 
ferramenta gráfica Corel Draw, isso 
faz com que ele possua uma vasta 
disponibilidade de recurso, seja 
fortemente utilizado em imagens 
vetoriais e possuia uma enorme 
flexibilidade em relação a 
manipulação de imagens. Uma das 
maiores desvantagens desse 
formato está no fato dele possuir 
pouca compatibilidade com 
ferramentas gráficas diferentes do 
Corel Draw, ou seja, ao importar esse 
 
 
 
 
 
 
Competência 01 
18 
tipo de formato em uma ferramenta 
gráfica diferente do Corel Draw a 
imagem pode apresentar 
imperfeições. 
 
 
 
 
 
 
 
 
AI 
 
 
 
 
 
 
 
 
Adobe Illustrator 
 
 
 
 
 
 
 
 
.ai, .ait 
Surgiu na década de 80 por meio da 
empresa Adobe Systems com o 
propósito de ser o formato nativo 
para salvar os arquivos da 
ferramenta gráfica Adobe Illustrator. 
Isso faz com que esse formato misto 
possua uma vasta disponibilidade de 
recurso, seja bastante popular e 
versátil. Contudo, assim como o 
formato CDR, esse formato também 
possui pouca compatibilidade com 
ferramentas gráficas diferentes do 
Adobe Illustrator inclusive, também 
é importante ficar atento se a versão 
do Adobe Illustrator que originou a 
imagem possui compatibilidade com 
a versão está sendo utilizada para 
exibir e manipular a referida 
imagem. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Foi criado pela principal organização 
de padronização da web, a W3C 
(World Wide Web Consortium), por 
volta dos anos 2000. Apesar disso, 
esse formato é nativo da ferramenta 
gráfica Inkscape. Suas principais 
vantagens estão no fato desse 
 
 
 
 
 
 
Competência 01 
19 
 
SVG 
 
Scalable Vectorial Graphics 
 
.svg, .svgz 
formato ser misto, aberto, 
desenvolvido em modo texto e 
suportado por diversos browsers e 
ferramentas gráficas. Além disso, ele 
é fortemente utilizado para criar, 
exibir e salvar imagens vetoriais, 
principalmente em duas dimensões 
(2D). 
Tabela 1 – Resumo dos principais formatos de imagens vetoriais 
Fonte: A autora 
Descrição: Tabela com os principais formatos de imagens vetoriais. A tabela apresenta quatro colunas com a 
abreviação, o nome do formato, a extensão e um resumo dos desses formatos. 
 
1.1.3 SVG 
SVG (Scalable Vectorial Graphics) é uma linguagem de marcação baseada em textos para 
descrição de imagens e aplicações gráficas bidimensionais (2D) em XML (eXtensible Markup 
Language). Ou seja, o SVG utiliza códigos-fontes para representar imagens e elementos gráficos. Além 
disso, ele atua em conjunto com a também linguagem de marcação HTML (HyperText Markup 
Language) e pode ser aplicado para construção de imagens estáticas ou dinâmicas, as chamadas 
animações. 
Uma das principais vantagens do SVG está relacionada ao fato dele ser um formato 
aberto, ou seja, para utilizá-lo ou alterá-lo não é preciso pagar royalties ao proprietário pois, elenão 
é propriedade de nenhuma empresa específica. Além disso, caso algum desenvolvedor ou equipe de 
desenvolvedores deseje modificar, melhorar ou corrigir erros em códigos-fontes SVG também é 
possível pois, ele é livre e possui repositórios com o código-fonte aberto disponíveis ao público na 
plataforma do GitHub. 
 
 
 Se você deseja ajudar a equipe de desenvolvimento e manutenção do SVG então, 
acesse: https://www.w3.org/PM/Groups/repositories.html?gid=19480 
https://www.w3.org/PM/Groups/repositories.html?gid=19480
 
 
 
 
 
 
Competência 01 
20 
O SVG pode ser utilizado para os mais vários propósitos, alguns deles são: 
• Aplicações móveis – a indústria de telefonia móvel selecionou o SVG como a 
plataforma base para criação, exibição e manipulação de imagens e gráficos. Devido 
a essa necessidade da indústria de telefonia móvel muitas empresas se uniram para 
produzir o SVG Tiny e SVG Mobile, como por exemplo Nokia, Ericsson e Motorola. 
Com o passar dos anos o SVG Mobile foi incorporado pelo SVG Tiny. Para esse tipo 
de aplicação o SVG é usado, principalmente, para mensagens em aplicativos como 
cartões de felicitações, diagramas e animações; 
• Impressão – devido a riqueza de detalhes em que são produzidas as imagens SVG, 
independência de resolução e a facilidade de interoperabilidade entre sistemas, é 
comum utilizar esse formato para impressão em gráficas, inclusive algumas empresas 
que fabricam hardware de impressoras estão cada vez mais se aperfeiçoando nas 
especificidades do SVG, como por exemplo Canon e HP (Hewlett-Packard); 
• Páginas web – utilização de imagens e gráficos na web nunca foi uma tarefa fácil e 
simples pois, muitos browsers apresentavam erros no momento de interpretar os 
comandos para exibição das imagens. Esses problemas são reduzidos drasticamente 
com a utilização do SVG pois, ele possui suporte nativo aos browsers mais novos e 
além disso, também possui suporte a scripts e eventos poderosos, facilitando muito 
a produção gráfica de aplicativos e interfaces de usuário com riqueza de detalhes. 
• Mapeamento e GIS (Geographic Information Systems) – sistemas direcionados para 
gerenciamento de mapas e geolocalização são sistemas que precisam de atenção 
especial devido as suas características, ou seja, eles necessitam de gráficos muito 
detalhados, de suporte a imagens vetoriais e bitmaps e capacidade de manipulação 
de uma enorme quantidade de dados. Um exemplo desse tipo de sistema é o Google 
Maps e Google Earth. O SVG é amplamente utilizado nesse tipo de sistema pois, eles 
fornecem exportação nesse formato. Além disso, o SVG incorpora metadados que 
são extremamente úteis para o mapeamento dos locais, como por exemplo, lagos, 
fronteiras e estradas. Isso faz com que outros softwares consigam interagir com esses 
metadados graficamente. 
 
 
 
 
 
 
 
Competência 01 
21 
O SVG foi desenvolvido pela W3C (World Wide Web Consortium), a principal organização 
de padronização da web, fato que contribui bastante para que ele seja muito utilizado em diversas 
páginas da web. Isso também é facilitado pelo fato dele ser suportado por vários browsers, como por 
exemplo, Chrome, Firefox, Opera, Internet Explorer e Safari. As versões mais recentes desses 
browsers suportam o SVG de forma nativa ou através das bibliotecas JavaScript, por outro lado os 
browsers mais antigos apresentam dificuldades e limitações para executar essa tarefa. 
Para você estudante perceber como o SVG revolucionou a forma como as imagens são 
exibidas e manipuladas nas páginas web leia com a atenção essa tradução e adaptação da fala de 
Timothy John Berners-Lee: “Após o SVG, finalmente imagens e gráficos puderam ser exibidos 
perfeitamente em todos os tamanhos de tela de dispositivos”. Timothy é físico, cientista da 
computação e professor do MIT (Massachusetts Institute of Technology) e criador da World Wide 
Web. 
 
O SVG permite três maneiras diferentes de representação, são elas: 
• Imagens vetoriais – formas geométricas que são construídas através de código-fonte 
com tags e comandos específicos para criar e transformar diversos tipos de desenhos 
vetoriais desdo mais simples até o mais complexo; 
• Imagens bitmap – ao exportar um arquivo SVG é possível exportá-lo com extensões 
de imagens bitmap. Além disso, o SVG também possui capacidade de manipular 
arquivos que são formados por mapa de bits; 
• Texto – são informações sobre o texto que ficam armazenadas para posteriormente 
serem editadas, caso necessário. Essa ação não é possível em imagens do tipo 
bitmap. 
 
Até o momento, a versão mais recente do SVG é a 1.1 segunda edição que foi inicialmente 
lançada em 2006 e vem sofrendo ajustes e atualizações desde então. A errata mais recente foi 
 Para aprofundar seus conhecimentos em SVG, acesse: 
https://developer.mozilla.org/pt-BR/docs/Web/SVG 
https://developer.mozilla.org/pt-BR/docs/Web/SVG
 
 
 
 
 
 
Competência 01 
22 
lançada com alguns ajustes pela W3C em 2018. A segunda versão do SVG está em processo de 
desenvolvimento pela W3C sem previsão de lançamento. 
 
Estudante, para que fique mais claro para você como o SVG é utilizado nas páginas web, 
a seguir serão exibidos alguns exemplos que usam SVG na web de formas bastante diferentes. Serão 
exibidos o código-fonte e o resultado que é gerado no browser, se você quiser reproduzir os exemplos 
basta inserir o código-fonte em um bloco de notas, salvar com a extensão .html e executar esse 
arquivo pelo browser. Vamos aos exemplos então. 
 
1.1.3.1 Primeiro Exemplo 
A figura abaixo exibe o primeiro exemplo de utilização do SVG apresentando um código-
fonte em XML com algumas tags que tem como objetivo desenhar seis formas geométricas 
diferentes: um círculo, um retângulo, uma linha, uma sequência de linhas, um polígono e uma elipse. 
Perceba que existe uma tag mais externa <svg> que vai conter as tags dessas formas geométricas. 
 
Para conhecer mais detalhes sobre o SVG versão 1.1 acesse a documentação 
oficial disponível em: 
 https://www.w3.org/TR/SVG11/ 
https://www.w3.org/TR/SVG11/
 
 
 
 
 
 
Competência 01 
23 
 
Figura 9 - Primeiro exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: Código-fonte em XML com as tags <circule>, <rect>, <line>, <polyline>, <plygon> e <ellipse>. Cada uma 
dessas tags possuem seus atributos com valores específicos para o desenho no browser de um círculo, um retângulo, 
uma linha, uma sequência de linhas, um polígono e uma elipse, respectivamente. 
 
Os componentes da tag <svg> e das tags que estão dentro dela, formando o código-fonte 
da figura acima, são descritos abaixo: 
• width="520" corresponde a largura do gráfico vetorial que será construído. No caso 
desse exemplo específico são 520; 
• height="520" corresponde a altura do gráfico vetorial que está sendo montado no 
browser. No caso desse exemplo específico são 520; 
• circle diz respeito ao desenho de um círculo; 
o cx="70" diz respeito a distância do centro do círculo em relação a coordenada 
x. No caso desse exemplo específico são 70; 
o cy="100" diz respeito a distância do centro do círculo em relação a coordenada 
y. No caso desse exemplo específico são 100; 
 
 
 
 
 
 
Competência 01 
24 
o r="50" diz respeito ao raio do círculo. No caso desse exemplo específico são 
50; 
o fill="green" diz respeito a cor de preenchimento do círculo. No caso desse 
exemplo específico é verde; 
o stroke="black" diz respeito a cor da linha que vai contornar o círculo. No caso 
desse exemplo específico é preta; 
• rect está relacionado ao desenho de um retângulo; 
o x="150" está relacionado a distância do canto superior esquerdo do retângulo 
em relação a coordenada x. No caso desse exemplo específico são 150; 
o y="50" está relacionado a distância do canto superior esquerdo do retângulo 
em relação a coordenada y. No caso desse exemplo específicosão 50; 
o rx="20" está relacionado ao raio do arco elíptico que circunda os cantos do 
retângulo em relação a coordenada x. No caso desse exemplo específico são 
20; 
o ry="20" está relacionado ao raio do arco elíptico que circunda os cantos do 
retângulo em relação a coordenada y. No caso desse exemplo específico são 
20; 
o width="135" diz respeito a largura do retângulo que será construído. No caso 
desse exemplo específico são 135; 
o height="100" diz respeito a altura do retângulo que será sendo montado no 
browser. No caso desse exemplo específico são 100; 
o fill="yellow" diz respeito a cor de preenchimento do retângulo. No caso desse 
exemplo específico é amarelo; 
o stroke="black" diz respeito a cor da linha que vai contornar o retângulo. No 
caso desse exemplo específico é preta; 
• line equivale ao desenho de uma linha; 
o x1="325" equivale ao primeiro ponto da linha em relação a coordenada x. No 
caso desse exemplo específico são 325; 
o y1="150" equivale ao primeiro ponto da linha em relação a coordenada y. No 
caso desse exemplo específico são 150; 
 
 
 
 
 
 
Competência 01 
25 
o x2="375" equivale ao segundo ponto da linha em relação a coordenada x. No 
caso desse exemplo específico são 375; 
o y2="50" equivale ao segundo ponto da linha em relação a coordenada y. No 
caso desse exemplo específico são 50; 
o stroke="black" diz respeito a cor da linha. No caso desse exemplo específico é 
preta; 
• polyline corresponde ao desenho de uma sequência de linhas; 
o points corresponde a uma sequência de números relacionados as coordenadas 
x e y; 
o fill="white" corresponde a cor de preenchimento entre as linhas. No caso 
desse exemplo específico é branco; 
o stroke="black" corresponde a cor das linhas. No caso desse exemplo específico 
é preta; 
• polygon representa o desenho de um polígono; 
o points representa a uma sequência de números relacionados as coordenadas 
x e y; 
o fill=" red" representa a cor de preenchimento do polígono. No caso desse 
exemplo específico é vermelho; 
o stroke="black" representa a cor da linha que vai contornar o retângulo. No 
caso desse exemplo específico é preta; 
• ellipse refere-se ao desenho de uma elipse; 
o cx="400" refere-se a distância do centro da elipse em relação a coordenada x. 
No caso desse exemplo específico são 400; 
o cy="300" refere-se a distância do centro da elipse em relação a coordenada y. 
No caso desse exemplo específico são 300; 
o rx="72" refere-se ao raio do arco elíptico que circunda os cantos da elipse em 
relação a coordenada x. No caso desse exemplo específico são 72; 
o ry="50" refere-se ao raio do arco elíptico que circunda os cantos da elipse em 
relação a coordenada y. No caso desse exemplo específico são 50; 
o fill=" blue" refere-se a cor de preenchimento da elipse. No caso desse exemplo 
 
 
 
 
 
 
Competência 01 
26 
específico é azul; 
o stroke="black" refere-se a cor da linha que vai contornar a elipse. No caso 
desse exemplo específico é preta; 
A próxima figura exibe o resultado da execução no browser do código-fonte apresentado 
na figura anterior, ou seja, seis formas geométricas diferentes: um círculo, um retângulo, uma linha, 
uma sequência de linhas, um polígono e uma elipse. O círculo possui preenchimento verde, o 
retângulo possui preenchimento amarelo, a linha e a sequência de linhas não possuem 
preenchimento, o polígono possui preenchimento vermelho, a elipse possui preenchimento azul. 
Todas as formas geométricas são contornadas por uma linha fina preta. 
 
Figura 10 – Resultado do primeiro exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: São exibidas seis formas geométricas, na primeira fileira existem três desenhos da esquerda para a direita, 
são: um círculo verde, um retângulo amarelo e uma linha. Na segunda fileira, da esquerda para a direita, estão: uma 
sequência de linhas, um polígono vermelho e uma elipse azul. 
 
 
1.1.3.2 Segundo Exemplo 
A figura abaixo mostra o segundo exemplo de utilização do SVG apresentando um código-
fonte em XML com algumas tags que tem como objetivo desenhar um retângulo branco com o 
contorno de uma linha preta e, dentro do retângulo um pato verde limão é desenhado, também com 
o contorno de uma linha preta. Perceba que existe uma tag mais externa <svg> que vai conter a tag 
do retângulo <rect> e a tag <path> que irá de fato desenhar o pato verde. 
 
 
 
 
 
 
 
Competência 01 
27 
 
Figura 11 – Segundo exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: Código-fonte em XML com as tags <rect>, <g> e <path>. Cada uma dessas tags possuem seus atributos com 
valores específicos para o desenho no browser de um retângulo e dentro dele um pato verde limão. 
 
Os componentes da tag <svg> e que estão dentro dessa mesma tag, formando o código-
fonte da figura acima, são descritos abaixo: 
• width="520" corresponde a largura do gráfico vetorial que será construído. No caso 
desse exemplo específico são 520; 
• height="220" corresponde a altura do gráfico vetorial que está sendo montado no 
browser. No caso desse exemplo específico são 220; 
• rect diz respeito ao desenho de um retângulo; 
o width="320" diz respeito a largura do retângulo que será construído. No caso 
desse exemplo específico são 320; 
o height="220" diz respeito a altura do retângulo que será sendo montado no 
browser. No caso desse exemplo específico são 220; 
o fill="white" diz respeito a cor de preenchimento do retângulo. No caso desse 
 
 
 
 
 
 
Competência 01 
28 
exemplo específico é branco; 
o stroke="black" diz respeito a cor da linha que vai contornar o retângulo. No 
caso desse exemplo específico é preta; 
• g está diretamente relacionado ao desenho vetorial que será criado no browser. 
o fill="lime" está relacionado a cor de preenchimento do desenho. No caso desse 
exemplo específico é verde limão; 
o stroke="black" está relacionado a cor da linha que vai contornar o desenho. 
No caso desse exemplo específico é preta; 
▪ path está relacionado ao desenho propriamente dito que será criado 
no browser. No caso desse exemplo específico é um pato. 
Para melhor entender o conteúdo da tag <path> a tabela abaixo apresenta cada uma das 
principais letras utilizadas nessa tag e seu siginificado, respectivamente. 
 
COMANDO SIGNIFICADO 
M Define um ponto específico de origem se baseando nas coordenadas 
bidimensionais X e Y 
L Traça uma linha da posição atual até um ponto específico 
H Traça uma linha horizontal da posição atual até um ponto específico 
V Traça uma linha vertical da posição atual até um ponto específico 
Z Traça uma linha do ponto atual até o ponto de origem 
 
Tabela 2 – Resumo das principais letras utilizadas na tag <path> 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: Tabela que apresenta as principais letras utilizadas na tag <path>. A tabela apresenta duas colunas com o 
comando e o significado correspondente a cada comando. 
 
A próxima figura exibe o resultado da execução no browser do código-fonte apresentado 
na figura anterior, ou seja, um retângulo com preenchimento branco e contornado por uma linha fina 
preta e, dentro do retângulo é desenhado um pato verde limão, também contornado por uma linha 
preta. 
 
 
 
 
 
 
Competência 01 
29 
 
Figura 12 – Resultado do segundo exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: É exibida a imagem de um retângulo sem preenchimento com um pato verde limão dentro 
 
 
1.1.3.3 Terceiro Exemplo 
A figura abaixo mostra o terceiro exemplo apresentando um código-fonte em XML com 
algumas tags que tem como objetivo carregar uma imagem vetorial com extensão .svg no browser. 
Observe que existe uma tag mais externa <object> que contém alguns elementosnela e, no seu 
interior está uma mensagem, que será exibida caso algum erro aconteça. 
 
 
Figura 13 - Terceiro exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: Código-fonte em XML com a tag <object> e seus atributos com valores específicos para caregar no browser 
uma imagem. 
 
Os componentes da tag <object> que formam o código-fonte da figura acima são 
descritos abaixo: 
 
 
 
 
 
 
Competência 01 
30 
• width="320" corresponde a largura do arquivo que será exibido. No caso desse 
exemplo específico são 320; 
• height="520" corresponde a altura do arquivo que está sendo carregado no browser. 
No caso desse exemplo específico são 520; 
• data="myfirstsvg.svg" corresponde a localização e o nome do arquivo SVG que será 
exibido. Nesse exemplo específico a localização do arquivo não foi indicada porque ele 
está no mesmo diretório do código-fonte e o nome do arquivo é myfirstsvg juntamente 
com a extensão .svg; 
• type="image/svg+xml" corresponde ao tipo do arquivo SVG que está sendo carregado 
no browser. 
A próxima figura exibe o resultado da execução no browser do código-fonte apresentado 
na figura anterior, ou seja, o ícone do SVG. 
 
Figura 14 – Resultado do terceiro exemplo de utilização do SVG 
Fonte: https://commons.wikimedia.org/wiki/File:SVG_logo.svg 
Descrição: É exibida a imagem do ícone do SVG. 
 
1.1.3.4 Quarto Exemplo 
A figura abaixo exibe o quarto exemplo apresentando um código-fonte em XML com 
algumas tags que tem como objetivo carregar uma animação no browser. Observe que existe uma 
tag mais externa <svg> que contém duas outras tags dentro dela, a tag <rect> que irá desenhar um 
retângulo e a tag <animate> que irá animar o retângulo. 
 
 
 
 
 
 
Competência 01 
31 
 
Figura 15 – Quarto exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: Código-fonte em XML com as tags <rect> e <animate>. Cada uma dessas tags possuem seus atributos com 
valores específicos para o desenho no browser de um retângulo vermelho com duas animações correspondentes ao 
movimento de contração e expansão da direita para a esquerda e de cima para baixo, respectivamente 
 
Os componentes da tag <svg> e das tags que estão dentro desta, formando o código-fonte 
da figura acima, são descritos abaixo: 
• width="520" corresponde a largura do gráfico vetorial que será construído. No caso 
desse exemplo específico são 520; 
• height="520" corresponde a altura do gráfico vetorial que está sendo carregado no 
browser. No caso desse exemplo específico são 520; 
• rect diz respeito ao desenho de um retângulo; 
o x="20" diz respeito a distância do canto superior esquerdo do retângulo em 
relação a coordenada x. No caso desse exemplo específico são 20; 
o y="10" diz respeito a distância do canto superior esquerdo do retângulo em 
relação a coordenada y. No caso desse exemplo específico são 10; 
o width="120" diz respeito a largura do retângulo que será construído. No caso 
desse exemplo específico são 120; 
o height="40" diz respeito a altura do retângulo que será sendo montado no 
browser. No caso desse exemplo específico são 40; 
o fill="red" diz respeito a cor de preenchimento do retângulo. No caso desse 
 
 
 
 
 
 
Competência 01 
32 
exemplo específico é vermelho; 
o stroke="black" diz respeito a cor da linha que vai contornar o retângulo. No 
caso desse exemplo específico é preta; 
• animate refere-se à aplicação da primeira animação no retângulo; 
o attributeName="width" refere-se ao atributo do retângulo que irá sofrer os 
efeitos da animação. No caso desse exemplo específico é a largura; 
o from="120" refere-se ao ponto de origem que a animação irá iniciar. No caso 
desse exemplo específico são 120; 
o to="40" refere-se ao ponto de parada que a animação irá finalizar. No caso 
desse exemplo específico são 40; 
o begin="0s" refere-se ao tempo em segundo que a animação irá iniciar após o 
carregamento da página no browser. No caso desse exemplo específico é 0; 
o dur="8s" refere-se ao tempo em segundo que a animação irá durar. No caso 
desse exemplo específico são 8; 
o fill="freeze" refere-se à ação que será realizada quando a animação chegar no 
final. No caso desse exemplo específico é congelar; 
• animate refere-se à aplicação da segunda animação no retângulo; 
o attributeName="height" refere-se ao atributo do retângulo que irá sofrer os 
efeitos da animação. No caso desse exemplo específico é a altura; 
o from="40" refere-se ao ponto de origem que a animação irá iniciar. No caso 
desse exemplo específico são 40; 
o to="82" refere-se ao ponto de parada que a animação irá finalizar. No caso 
desse exemplo específico são 82; 
o begin="6s" refere-se ao tempo em segundo que a animação irá iniciar após o 
carregamento da página no browser. No caso desse exemplo específico são 6; 
o dur="8s" refere-se ao tempo em segundo que a animação irá durar. No caso 
desse exemplo específico são 8; 
o fill="freeze" refere-se à ação que será realizada quando a animação chegar no 
final. No caso desse exemplo específico é congelar. 
 
 
 
 
 
 
Competência 01 
33 
A próxima figura exibe o resultado da execução no browser do código-fonte apresentado 
na figura anterior, ou seja, um retângulo com preenchimento vermelho contornado por uma linha 
fina preta sendo exibido de várias formas de acordo com a animação que lhe foi aplicada. 
 
Figura 16 – Resultado do quarto exemplo de utilização do SVG 
Fonte: Adaptado de https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf 
Descrição: São exibidas 15 imagens de quadrados com preenchimento branco e dentro um retângulo vermelho. Todas 
as imagens são numeradas, os números estão no canto superior esquerdo. Cada quadrado mostra uma etapa de como 
ficará o retângulo vermelho após o efeito das animações. 
 
 
 
 
 
 
Para conhecer uma lista com vários códigos-fontes de diversos recursos 
disponíveis em SVG, acesse: 
https://github.com/willianjusten/awesome-svg 
https://github.com/willianjusten/awesome-svg
 
 
 
 
 
 
Competência 01 
34 
1.1.4 Imagens Bitmap x Imagens Vetoriais 
Estudante, até o momento aprendemos vários conceitos novos sobre imagens bitmaps e 
vetoriais. Então agora vamos organizar e resumir os conhecimentos que acabamos de adquirir. 
Primeiramente vamos observar a figura a seguir. Essa figura demostra visualmente a diferença 
existente entre imagens do tipo bitmap e do tipo vetorial. A Figura 17a exibe uma flor amarela com 
uma parte ampliada em torno de um círculo, essa parte ampliada destaca os pixels existentes nas 
imagens do tipo bitmap. Por outro lado, a Figura 17b mostra a mesma flor amarela com uma parte 
ampliada em torno de um círculo, porém nesse caso a parte ampliada destaca os traços e pontos 
utilizados para fazer o desenho vetorial. Ao ser ampliada a Figura 17a sofre deformidade, já na Figura 
17b isso não ocorre. 
 
Figura 17 – Diferença entre as imagens bitmap e vetorial. (a) imagem ampliada bitmap (b) imagem ampliada vetorial 
Fonte: http://4.bp.blogspot.com/-gtKMREQaEsY/VVYppkdvsBI/AAAAAAAABSA/AFEOX4FnacE/s1600/exemplo-
vetorizacao.jpg 
Descrição: Duas figuras identificadas pelas letras a e b. A primeira figura, letra a, apresenta uma flor amarela com um 
cícrulo contornado em preto com uma parte da imagem bitmap da flor ampliada, no qual os pixels estão bastante 
salientes. Já a segunda figura, letra b, mostra a mesma flor amarela, porém, dentro do círculo está uma parte da 
imagem vetorial da flor ampliada com as linhas e traços destacados. 
 
A tabela abaixo mostra um resumo das principais características dos tipos de imagem 
bitmap e vetorial, destacando as diferenças entre elas. 
 
 
 
 
 
 
 
Competência 01 
35 
IMAGEM BITMAP IMAGEM VETORIAL 
É constituída por vários pixels É constituída por cálculos matemáticos 
Sofre deformidade e perda de resoluçãoquando é demasiadamente ampliada 
Pode sofrer ampliações e alterações que 
continua com a mesma qualidade 
Difícil de redimensionar Fácil de redimensionar 
Gera arquivos com tamanho muito grande 
quando possui alta resolução 
Na maioria das vezes produz arquivos com 
tamanho pequeno 
Muito utilizada na captura de imagens por 
câmeras fotográficas ou outros dispositivos, 
ilustrações realistas, processamento de 
fotografias e mídias impressas de uso comercial 
de alta qualidade como por exemplo, livros e 
revistas 
Muito utilizada em ilustrações técnicas-artísticas, 
papel timbrado, fontes, logotipos, aplicativos 
móveis, páginas na web e projetos que precisam 
de impressão em grandes dimensões como por 
exemplo, cartazes, publicidade, outdoors 
Os formatos mais utilizados são BMP, GIF, JPEG 
e PNG 
Os formatos mais utilizados são EPS, CDR e AI. 
 
Tabela 3 – Resumo das principais características das imagens bitmaps e vetoriais 
Fonte: A autora 
Descrição: Tabela que apresenta as das principais características das imagens bitmaps e vetoriais. A tabela apresenta 
duas colunas com imagem bitmap e imagem vetorial. 
 
 
 
 
 
 
 
 
 
 
Videoaula! 
Os quatro exemplos do SVG são executados em nossa primeira videoaula, 
assista. 
 
 
 
 
 
 
Competência 02 
36 
2.Competência 02 | Planejar Layouts e Peças Gráficas com Base em 
Vetores para Web 
Estudante, na competência anterior você aprendeu que existem dois tipos de imagens 
digitais que são muito utilizadas na web, imagens bitmaps e vetoriais. Lhe foi explicado o conceito de 
cada uma delas, assim como suas principais características. Além disso, foram destacadas as 
diferenças existentes entre elas e foram apresentadas imagens comparativas para que você 
conseguisse distinguir visualmente entre as imagens bitmaps e as imagens vetoriais. 
Você obteve um conhecimento mais aprofundado sobre imagens vetoriais através do 
entendimento de como esse tipo de imagem é constituída, o que são e para que servem as curvas 
Béziers e quais são os principais formatos de imagens vetoriais. Dentre todos os formatos o SVG foi 
selecionado para ser explorado com mais detalhes, por isso lhe foram apresentados quatro exemplos 
de como utilizar o SVG em uma página web, são eles: 
• Primeiro Exemplo – você estudou sobre como desenhar seis formas geométricas 
diferentes: um círculo, um retângulo, uma linha, uma sequência de linhas, um 
polígono e uma elipse. Cada uma das formas geométricas possui tags e componentes 
específicos que foram detalhadamente explicados; 
• Segundo Exemplo – você entendeu como se faz um desenho utilizando várias 
combinações de traços e pontos. Além disso, você também conheceu as letras que 
são utilizadas na tag <path> e o significado das principais; 
• Terceiro Exemplo – você aprendeu o que é preciso fazer para carregar uma imagem 
vetorial com extensão .svg no browser. 
• Quarto Exemplo – você compreendeu o que é preciso fazer para carregar uma 
animação no browser. Além do mais, também foi explicada detalhadamente a tag 
<animate> com seus respectivos componentes. 
 
Apesar das imagens vetoriais serem constituídas de cálculos ou expressões matemáticas, 
isto não que dizer que você precisa ser um gênio da matemática ou da física para utilizar esse tipo de 
formato. Pode ficar tranquilo. Caso você queira criar ou utilizar imagens vetoriais por meio de código-
fonte como foi mostrado nos exemplos em SVG, saiba que você estará adquirindo uma habilidade 
 
 
 
 
 
 
Competência 02 
37 
importante e estará se tornando um profissional diferenciado no mercado de trabalho. Contudo, se 
você não tiver se identificado com esse aspecto do Web Design não tem nenhum problema. 
Atualmente existem diversas ferramentas gráficas que podem lhe ajudar bastante para 
que a criação e manipulação de imagens vetoriais seja realizada de forma mais rápida e prazerosa. 
Por isso estudante, diversas ferramentas gráficas foram analisadas para escolha daquela que melhor 
atendesse as necessidades da nossa disciplina. Após algumas verificações a ferramenta gráfica 
Inkscape foi selecionada. 
 
2.1 Inkscape 
Nesse momento você estudante deve está se perguntando: “Porque a ferramenta gráfica 
Inkscape foi selecionada?” A resposta para essa pergunta está na descrição dos itens a seguir: 
 
• Gratuita – é grátis, ou seja, qualquer usuário poderá fazer download, utilizar e 
distribuir sem nenhum tipo de custo associado a isso, nem realização de nenhuma 
operação ilegal, como pirataria por exemplo. Também possui código-fonte aberto 
com a licença GPL (General Public License), ou seja, todo o código da ferramenta está 
publicado e disponível caso algum usuário queira fazer alguma contribuição, como 
por exemplo, desenvolver alguma funcionalidade, corrigir algum erro, testar os 
recursos já existentes, traduzir a documentação. 
• Multiplataforma – essa ferramenta pode ser instalada e executada em qualquer um 
dos principais sistemas operacionais existentes, Windows, distribuições Linux e 
MacOS X; 
• Profissional – o Inkscape possui a capacidade de exportar seus projetos para diversos 
tipos de formatos que possuem como finalidade serem utilizados em browsers ou em 
impressoras profissionais de propósito comercial. Além de gerar projetos para uma 
enorme diversidade de áreas diferentes no ambiente corporativo, como por 
exemplo, trabalhos de marketing, projetos automobilísticos e de engenharia, obras 
de arte vetorial; 
• Recursos – essa ferramenta é uma excelente alternativa às ferramentas gráficas 
Adobe Illustrator e ao CorelDraw pois, como foi dito anteriormente, ela é gratuita e 
 
 
 
 
 
 
Competência 02 
38 
essas últimas são pagas. Ainda por cima, o Inkscape possui uma ampla variedade de 
funcionalidades para desenvolvimento de vários tipos de desenhos vetoriais, desde 
os mais simples até obras de arte vetorial; 
• Comunidade – por ser um software livre essa ferramenta possui uma extensa 
comunidade muito integrada, comunicativa, solidária e participante. Existem 
diversos fóruns de discussão para troca de ideias e opiniões sobre os mais variados 
assuntos relativos ao Inkscape. A comunidade trabalha ativamente para melhoria 
contínua dessa ferramenta; 
• Literatura – existe uma grande quantidade de materiais didáticos disponíveis para 
ajudar no aprendizado do Inkscape. Essa ferramenta é muito abordada por muitos 
autores como a melhor opção custo-benefício para criação e manipulação de 
desenhos vetoriais. Inclusive, a própria página web da ferramenta possui uma opção 
para o usuário acessar vários conteúdos didáticos sobre o Inkscape. 
 
2.1.1 Instalação 
Estudante, agora que você já entendeu porque o Inkscape foi a ferramenta gráfica 
selecionada, vamos então iniciar a explicação da instalação dela no computador. Primeiramente você 
precisa acessar o site através do link https://inkscape.org. Após isso, será carregada a página inicial 
do site conforme exibe a figura abaixo. 
https://inkscape.org/
 
 
 
 
 
 
Competência 02 
39 
 
Figura 14 – Página inicial do Inkscape 
Fonte: https://inkscape.org/ 
Descrição: Página inicial do site do Inkscape com muitas cores, links, menu textual, campo de busca e botões. 
 
 
Apesar do site está em inglês você verá que é bem fácil obter essa ferramenta. No próximo 
passo você deverá um menu com oito opções da esquerda para a direita. Você deverá clicar na 
segunda opção do menu chamada “DOWNLOAD”. Após isso um submenu irá se expandir com três 
opções, conforme a figura abaixo. Em seguida é preciso clicar na primeira opção de cima para baixo 
desse submenu, a chamada “Current Version”. 
 
 
 
 
 
 
Competência 02 
40 
 
Figura 15 – Página inicial do Inkscape com menu submenu expandido 
Fonte: https://inkscape.org/ 
Descrição: Página inicial do site do Inkscape com muitas cores, links, menu textual, campo de busca, botões e o menu 
Download expandido. 
 
Ao clicarna opção “Current Version” você está indicando que deseja obter a versão mais 
recente do Inkscape, ou seja, a versão 1.0.1. Até o momento essa é a versão também é a mais estável 
e com maior quantidade de erros corrigidos. 
Posteriormente, será carregado no site uma barra inferior com algumas opções de 
sistemas operacionais para você escolher qual deles você está utilizando para fazer download da 
ferramenta com uma versão compatível com o seu sistema. A figura a seguir mostra como ficará o 
site após carregar as opções de sistemas disponíveis. 
 
 
 
 
 
 
 
Competência 02 
41 
 
Figura 16 – Página inicial do Inkscape com as opções de sistemas opercionais 
Fonte: https://inkscape.org/ 
Descrição: Página inicial do site do Inkscape com muitas cores, links, menu textual, campo de busca e botões, 
mostrando as opções de sistemas operacionais. 
 
Pelo fato do sistema operacional Windows ser amplamente utilizado no ambiente 
acadêmico e corporativo então, vamos continuar a explicação da instalação da ferramenta com esse 
sistema. Contudo, você estudante deverá selecionar o sistema que você já possui instalado no seu 
computador. 
Imediatamente após você clicar na opção Windows será carregada uma página de acordo 
com a figura abaixo. Nessa página são exibidas duas opções de arquitetura do Windows, a primeira 
opção com 32-bits e a segunda opção com 64-bits. Você deverá selecionar qual opção é compatível 
com o seu computador e com o seu Windows. Se você não sabe como descobrir se o seu computador 
é 32-bits ou 64-bits, não se preocupe a seguir tem uma dica de como você pode descobrir isso de 
maneira rápida e fácil. 
 
 
 
 
 
 
Competência 02 
42 
 
 
 
Figura 17 – Página inicial do Inkscape com as opções de arquitetura do Windows 
Fonte: https://inkscape.org/ 
Descrição: Página inicial do site do Inkscape com muitas cores, links, menu textual, campo de busca e botões, 
mostrando as opções de arquitetura de computadores. 
 
Em seguida são carregadas no site três opções de instalador para o Windows com mostra 
a figura abaixo. Observando da esquerda para a direita, você deverá selecionar a primeira opção 
chamada “Installer in .exe format”. 
 
Quer aprender como descobrir qual é a arquitetura do seu processador e do 
seu Windows? Então acesse: 
https://www.youtube.com/watch?v=Syxmj0LEBtw 
https://www.youtube.com/watch?v=Syxmj0LEBtw
 
 
 
 
 
 
Competência 02 
43 
 
Figura 18 – Página inicial do Inkscape com as opções de instalador 
Fonte: https://inkscape.org/ 
Descrição: Página inicial do site do Inkscape com muitas cores, links, menu textual, campo de busca e botões, 
mostrando as opções de instaladores. 
 
Logo após a escolha do instalador, você será direcionado para uma nova página que será 
carregada informando que o download iniciará em breve e, caso não inicie você poderá clicar no link 
em laranja “click here”, como pode ser visualizado na figura abaixo. Após alguns instantes será 
mostrada uma caixa de diálogo com dois botões, “Save File” e “Cancel”. Você deverá clicar no botão 
“Save File” para você indicar o local no seu computador que você deseja salvar o instalador da 
ferramenta. 
 
 
 
 
 
 
Competência 02 
44 
 
Figura 19 – Página de download do Inkscape 
Fonte: https://inkscape.org/ 
Descrição: Página de download do site do Inkscape com muitos links, menu textual, campo de busca e botões, 
mostrando uma janela para obter o instalador da ferramenta. 
 
O próximo passo é ir na pasta onde você fez o download do instalador da ferramenta e 
executá-lo. Logo depois disso aparecerá a tela inicial de boas-vindas do instalador do Inkscape 
conforme a figura abaixo. Para prosseguir na instalação você deverá clicar no botão “Próximo”. 
 
 
 
 
 
 
 
 
Competência 02 
45 
Figura 20 – Tela inicial de boas-vindas do Inkscape 
Fonte: A autora 
Descrição: Tela inicial de instalação do Inkscape, mostrando as boas-vindas. 
 
A seguir é exibida uma nova tela com os termos da licença GPL da ferramenta. Você 
deverá clicar no botão “Eu concordo”. 
 
Figura 21 – Tela de aceitação do termo da licença GPL do Inkscape 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando os termos de acordo da licença GPL da ferramenta. 
 
Posteriormente é mostrada uma outra tela com as opções para adicionar o caminho da 
ferramenta nas variáveis de ambiente do sistema. Você não deverá alterar nada. Apenas marque o 
checkBox que possui a frase “Create Inkscape Desktop Icon” para que um ícone do Inkscape seja 
criado na área de trabalho do seu computador. E clique no botão “Próximo”. 
 
 
 
 
 
 
Competência 02 
46 
 
Figura 22 – Tela adição do caminho do Inkscape nas variáveis de ambiente 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando as opções de instalação. 
 
Logo em seguida é exibida uma nova tela com a escolha do local de instalação do Inkscape 
no seu computador, conforme ilustra a figura abaixo. O instalador da ferramenta já indica um local 
padrão para instalação, mas se você quiser alterar esse local, você pode fazer isso clicando no botão 
“Procurar” e indicando o local que você prefere. Contudo, é recomendado que você não altere esse 
local e deixe a ferramenta ser instalada no local padrão indicado pelo instalador. 
 Além disso, nessa mesma tela também é mostrada a quantidade de espaço em disco 
rígido necessário para a instalação do Inkscape e a quantidade de espaço em disco disponível. É muito 
importante que você possua no mínimo 500MB sobrando no seu disco para que a instalação ocorra 
sem problemas. Após a realização dessas verificações clique no botão “Próximo”. 
 
 
 
 
 
 
Competência 02 
47 
 
Figura 23 – Tela para escolha do local de instalação do Inkscape 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando o local de instalação da ferramenta. 
 
 
O próximo passo é escolher a pasta do menu iniciar que irá conter um atalho para o 
Inkscape, como pode ser visualizado na figura abaixo. O instalador da ferramenta já indica por padrão 
uma pasta com o nome da própria ferramenta. Caso você queira modificar isso basta selecionar uma 
das opções exibidas na lista ou digitar um novo nome no campo texto. Contudo, é recomendado que 
você não altere o nome dessa pasta e clique no botão “Próximo”. 
 
 
 
 
 
 
 
Competência 02 
48 
Figura 24 – Tela para escolha a pasta de atalho do Inkscape 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando a escolha da pasta do menu iniciar. 
 
A próxima tela que é exibida diz respeito a escolha dos componentes do Inkscape, 
conforme mostra a figura abaixo. É muito importante que você não modifique nada nessa tela, 
apenas clique no botão “Instalar”. 
 
Figura 25 – Tela para escolher os componentes do Inkscape 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando a escolha dos componentes da ferramenta. 
 
Em seguida é exibida uma tela com o progresso da instalação da ferramenta, como pode 
ser visto na figura abaixo. 
 
 
 
 
 
 
Competência 02 
49 
 
Figura 26 – Tela progresso da instalação do Inkscape 
Fonte: A autora 
Descrição: Tela de instalação do Inkscape, mostrando o processo de instalação da ferramenta. 
 
Após a finalização com sucesso da instalação do Inkscape é mostrada uma tela conclusão, 
conforma a figura abaixo. Agora basta você clicar no botão “Concluir” que a ferramenta será iniciada. 
 
Figura 27 – Tela conclusão da instalação do Inkscape 
Fonte: A autora 
Descrição: Tela de conclusão da instalação do Inkscape, mostrando a opção de executar a ferramenta. 
 
Ao iniciar a ferramenta a tela incial é mostrada conforme a figura abaixo. 
 
 
 
 
 
 
Competência 02 
50 
 
Figura 28 – Tela inicial do Inkscape 
Fonte: A autora 
Descrição: Tela inicial do Inkscape com vários botões, barras de ferramentas, cores e menu textual. 
2.1.2 Interface 
Estudante, agora que você seguiu todos ospassos necessários para instalação do Inkscape 
vamos conhecer a interface gráfica desta ferramenta. Essa interface é bastante rica, sendo constituída 
de diversos elementos que possuem funcionalidades variadas. A figura a seguir apresenta a tela inicial 
do Inkscape marcada nas áreas principais. 
 
 
 
 
 
 
Competência 02 
51 
 
Figura 29 – Tela inicial do Inkscape marcada nas áreas principais 
Fonte: A autora 
Descrição: Tela inicial do Inkscape com vários botões, barras de ferramentas, cores e menu textual. Essa tela 
está marcada com setas e números apontando para as áreas principais da ferramenta. 
 
A janela do Inkscape pode ser dividida em dez áreas principais, são elas: 
1. Menu Textual; 
2. Barra de Comandos; 
3. Barra de Ferramenta de Atração; 
4. Barra de Controle de Ferramentas; 
5. Barra de Ferramentas; 
6. Réguas; 
7. Barra de Rolagem; 
8. Paleta de Cores; 
9. Barra de Status; 
10. Área de Desenho. 
 
Cada uma dessas áreas será explicada nas seções a seguir. Além disso, também será 
exibida uma figura correspondente a cada área, respectivamente. 
 
 
 
 
 
 
Competência 02 
52 
2.1.2.1 Menu Textual 
É formado por vários menus e submenus que estão, geralmente, dispostos na horizontal 
e, possuem textos indicando qual recurso disponível na ferramenta está associado aquele item ou 
subitem do menu. A figura abaixo exibe o menu textual do Inkscape. 
 
 
Figura 30 – Menu textual do Inkscape 
Fonte: A autora 
Descrição: Menu textual do Inkscape com dez opções de submenu. 
2.1.2.2 Barra de Comandos 
 É uma barra que possui vários ícones que se relacionam com funcionalidades de 
propósito geral da ferramenta, como por exemplo, criar um novo documento, abrir um arquivo já 
existente, salvar o documento, imprimir o documento, entre outros. Se o usuário passar o mouse 
devagar nos ícones ele verá que é possível saber qual é a funcionalidade relacionada a cada um dos 
ícones pois, o tooltip (frase resumida) irá descrevê-las. A figura abaixo mostra a barra de comandos 
do Inkscape. 
 
Figura 31 – Barra de comandos do Inkscape 
Fonte: A autora 
Descrição: Barra de comandos do Inkscape com vários ícones coloridos representando funcionalidades de 
propósito geral. 
2.1.2.3 Barra de Ferramenta de Atração 
É uma barra que possui diversos ícones que correspondem a funcionalidades específicas 
de manipulação de imagens e formas geométricas, principalmente em relação a ajustes de objetos. 
Os recursos disponíveis nessa barra dizem respeito a ajustar às caixas delimitadoras, atrair os nós, 
caminhos e alças, entre outros. Além disso, com a ajuda do tooltip também é possível passar o mouse 
 
 
 
 
 
 
Competência 02 
53 
devagar nos ícones e descobrir qual é a funcionalidade relacionada a cada um deles. A figura abaixo 
apresenta a barra de ferramenta de atração do Inkscape. 
 
Figura 32 – Barra de ferramenta de atração do Inkscape 
Fonte: A autora 
Descrição: Barra de ferramenta de atração do Inkscape com vários ícones coloridos representando 
funcionalidades específicas de manipulação de imagens e formas geométricas, principalmente em relação a ajustes de 
objetos. 
2.1.2.4 Barra de Controle de Ferramentas 
É uma barra que possui muitos componentes entre eles ícones e campos textuais para 
inserção de valores. Essa barra é sensível ao contexto, ou seja, dependendo do elemento que for 
selecionado ou do desenho que for ajustado, diferentes ícones e campos textuais serão habilitados 
ou desabilitados. A figura abaixo exibe a barra de controle de ferramentas do Inkscape 
 
Figura 33 – Barra de controle de ferramentas do Inkscape 
Fonte: A autora 
Descrição: Barra de controle de ferramentas do Inkscape com vários ícones e campos textuais sensíveis ao 
contexto. 
2.1.2.5 Barra de Ferramentas 
É uma barra que possui vários ícones que dizem respeito a funcionalidades específicas 
para criação e manipulação de desenhos vetoriais, como por exemplo, criação e edição de retângulos 
e quadrados, caneta bézier para desenhar curvas e linhas, criação e edição de polígonos e estrelas, 
entre outros. Além disso, essa barra também possui toolttip. A figura abaixo mostra a barra de 
ferramentas do Inkscape. 
 
Figura 34 – Barra de ferramentas do Inkscape 
 
 
 
 
 
 
Competência 02 
54 
Fonte: A autora 
Descrição: Barra de ferramentas do Inkscape com vários ícones coloridos representando funcionalidades 
específicas para criação e manipulação de desenhos vetoriais. 
2.1.2.6 Réguas 
 Esse componente corresponde a duas linhas, uma na vertical e outra na horizontal, 
com diversas marcações que ficam localizadas nas partes superior e esquerda da tela. As marcações 
representam distâncias e são expressas em uma unidade, de acordo com a configuração da 
ferramenta. Por padrão a unidade é milímetro, mas para alterá-la basta modificar as configurações 
da ferramenta. A figura abaixo apresenta as réguas do Inkscape. 
 
Figura 35 – Réguas do Inkscape 
Fonte: A autora 
Descrição: Réguas do Inkscape na vertical e horizontal, na esquerda e superior, respectivamente. 
2.1.2.7 Barra de Rolagem 
Esse componente está relacionado a duas barras, uma na vertical e outra na horizontal, 
que ficam localizadas nas partes inferior e direita da tela. Essas barras são utilizadas para deslizar a 
área de desenho de forma a modificar a visualização da mesma. A figura abaixo exibe as barras de 
rolagem do Inkscape. 
 
 
 
 
 
 
Competência 02 
55 
 
Figura 36 – Barra de rolagem do Inkscape 
Fonte: A autora 
Descrição: Barra de rolagem do Inkscape na vertical e horizontal, na direita e inferior, respectivamente. 
2.1.2.8 Paleta de Cores 
Esse componente diz respeito as cores e tonalidades que estão disponíveis na ferramenta. 
Essa paleta de cores fica localizada na parte inferior da tela e, no final dela, possui uma seta 
apontando para o lado esquerdo, que possui armazenado diversos outros tipos de paletas de cores 
diferentes para o usuário utilizar. A figura abaixo mostra um tipo de paleta de cores do Inkscape. 
 
Figura 37 – Paleta de cores do Inkscape 
Fonte: A autora 
Descrição: Um tipo de paleta de cores do Inkscape com várias cores e suas tonalidades. 
2.1.2.9 Barra de Status 
É uma barra que possui diversos ícones diferentes e campos textuais que dizem respeito 
a informações sobre o elemento ou desenho que está sendo criado ou ajustado no momento. Essa 
barra fica localizada na parte inferior da tela e, além de informações ela também possui 
funcionalidades, como por exemplo, zoom, rotação, bloqueio e desbloqueio da camada atual. A figura 
abaixo apresenta a barra de status do Inkscape. 
 
Figura 38 – Barra de status do Inkscape 
 
 
 
 
 
 
Competência 02 
56 
Fonte: A autora 
Descrição: Barra de status do Inkscape com vários ícones e campos textuais correspondente as informações 
sobre o elemento ou desenho que está sendo criado ou ajustado no momento. 
 
2.1.2.10 Área de Desenho 
Esse componente corresponde a área disponível para desenvolver um projeto. É possível 
utilizar qualquer lugar dentro dessa área contudo, é aconselhado se limitar ao espaço do retângulo 
no meio da tela pois, essa é a área que será impressa, de acordo com as configurações padrões da 
ferramenta. A figura abaixo exibe a área de desenho do Inkscape. 
 
Figura 39 – Área de desenho do Inkscape 
Fonte: A autora 
Descrição: Área de desenho do Inkscape com o espaço do retângulo no meio da tela representando um papel 
impresso. 
 
 
 
DICA IMPORTANTE! 
Para facilitar e agilizar o trabalho você pode utilizar as teclas de atalho do 
Inkscape. Caso você não conheça quais são essas teclas, observe os tooltip, 
vários deles possuem essa informação. 
 
 
 
 
 
 
 
Competência 02 
57 
2.1.3 Funcionalidades 
Estudante, agora que você já fez a instalação do Inkscape e conheceu a interface gráfica 
dessa ferramenta, vamos iniciar um estudo sobre as funcionalidades disponíveis nela. Assim, você 
aprenderá