A adesão da maioria dos navegadores ao suporte de imagens no formato SVG
(Scalable Vector Graphics – Gráfico Vetorial Escalável) fez com que as pessoas
começassem a utilizar este formato para imagens, ao invés dos tradicionais JPG
e PNG, porque finalmente temos a possibilidade de utilizar imagens vetoriais
na web, que podem ser redimensionadas sem perda a qualidade.
Nesse post você vai conhecer a história, a definição, as vantagens e aprender como criar, abrir e salvar figuras e gráficos no formato SVG.
Tabela de Conteúdo
Como Abrir Arquivos SVG
História do SVG
Quando se iniciou a construção de páginas HTML na web, percebeu-se a necessidade de possuir um formato para as imagens de página, que fossem compatíveis com as diferentes densidades dos displays, que pudessem ser redimensionadas, possuir transparência, camadas e até imprimir com uma qualidade melhor.Estava claro que os formatos já existentes e muito utilizados até os dias de hoje não seria o ideal como, por exemplo, as figuras com formato PNG e JPG. O grande problema destes formatos é que não permitem o redimensionamento com qualidade.
O que a web precisava era um formato que permitisse o redimensionamento, ou
seja, que fosse uma imagem vetorial que é composta por curvas, elipses,
linhas, polígonos e vários outros elementos baseados em vetores
matemáticos.
Pensando nisto Chris Lilley escreveu em 1996 um documento que era uma especificação dos requisitos gerais para gráficos vetoriais. Várias empresas na época se inscreveram para participar da definição do padrão junto a W3C, mas o grupo de trabalho decidiu não utilizar nenhuma das especificações fornecidas pelas empresas, porque cada uma tinha uma ideia diferente de como fazer.
Pensando nisto Chris Lilley escreveu em 1996 um documento que era uma especificação dos requisitos gerais para gráficos vetoriais. Várias empresas na época se inscreveram para participar da definição do padrão junto a W3C, mas o grupo de trabalho decidiu não utilizar nenhuma das especificações fornecidas pelas empresas, porque cada uma tinha uma ideia diferente de como fazer.
As empresas resolveram então, criar uma especificação do zero baseada nas
lições aprendidas até aquele momento de trabalhos anteriores, e assim nasceu o
SVG.
Nos últimos anos vários navegadores começaram a dar suporte ao formato incluindo Opera, Firefox, Safari, Edge e Chrome.
A vantagem deste formato é que além de poder redimensionar sem perda da
qualidade da imgem, podemos utilizar uma ferramenta de edição de imagem ou
simplesmente um editor de texto comum, como o Notepad. No caso do editor de
texto é necessário conhecer o XML.
Nos últimos anos vários navegadores começaram a dar suporte ao formato incluindo Opera, Firefox, Safari, Edge e Chrome.
Definição do SVG
O formato de imagem SVG utiliza o padrão XML para descrever imagens em duas dimensões, ou seja, podemos desenhar a imagem em um arquivo texto utilizando os atributos de um arquivo XML. Por exemplo, para desenhar um círculo utilizam-se os atributos e estilos para definir as coordenadas, raio, cor, borda, etc.
|
| Figura 1 - Exemplo de cículo desenhado no formato SVG |
As ferramentas de criação e edição de imagem são mais fáceis de utilizar,
porque não é necessário o conhecimento da linguagem XML, podemos desenhar
diretamente na ferramenta sem nos preocupar com a linguagem.
Se você tiver a curiosidade de conhecer a linguagem por trás do arquivo, abra o arquivo da imagem com a extensão .SVG em um editor de texto qualquer. A imagem da Figura 1 utiliza o seguinte código XML:
A imagem SVG é um bom formato de figuras para se utilizar em arquivos de ajuda
online exibidos em navegadores. Por serem vetoriais adaptam-se melhor aos
vários tamanhos de tela, desde o computador até os celulares.
Se você tiver a curiosidade de conhecer a linguagem por trás do arquivo, abra o arquivo da imagem com a extensão .SVG em um editor de texto qualquer. A imagem da Figura 1 utiliza o seguinte código XML:
<!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" xmlns:xlink="http://www.w3.org/1999/xlink" width="83px" height="83px" version="1.1"><defs/><g transform="translate(0.5,0.5)"><ellipse cx="41" cy="41" rx="40" ry="40" fill="#004d99" stroke="#004d99" stroke-width="3" pointer-events="none"/></g></svg>
Vantagens do SVG
- Por ser uma imagem vetorial permite o redimensionamento sem a perda da qualidade da imagem e do texto.
- Pode ser exibido nos navegadores de celulares, o que faz com as imagens sejam apresentadas com uma qualidade superior aos arquivos tipo JPG ou PNG.
- Como o arquivo é na verdade um arquivo texto, porque utiliza à linguagem XML, o tempo que o navegador demora em exibir a imagem é muito menor do que os tradicionais formatos de imagem.
- O tamanho do arquivo é bem menor do que o tamanho dos arquivos de imagens JPG ou PNG.
- A impressão da imagem fica com uma qualidade superior do que a impressão de imagens JPG e PNG.
Como criar imagens SVG
Existem vários editores de imagem que criam arquivos SVG como o Adobe
Photoshop e InDesign. Também existem as opções gratuitas como
Inkscape e o Gimp.
Existe mais uma opção de editor de imagem que é o Desenhos Google. Você pode
usar esse editor para criar desenhos e fazer o download do arquivo em vários
formatos como PDF, JPG, PNG e o SVG.
Para usar o Desenhos Google, entre na página do Google Drive com sua conta e
clique no botão + Novo e selecione Desenhos Google.
O navegador abre uma guia com o aplicativo Desenhos Google, onde podemos
desenhar, inserir formas, fazer fluxogramas, inserir e editar imagens.
Para obter o desenho no formato vetorial, faça o download do desenho pronto
no aplicativo Desenhos Google, através do menu Arquivo >
Fazer o Download > Gráficos vetoriais escaláveis (.svg).
Como Abrir Arquivos SVG
Se você não tiver um editor de imagens vetoriais ou quiser simplesmente
visualizar um arquivo com imagem vetorial SVG, use o navegador de sua
preferência para abrir o arquivo.
Uma das opções para abrir o arquivo no navegador é copiar o caminho do
arquivo na barra de endereços do navegador.
Por exemplo, se o arquivo se encontra no diretório
c:\usuario\figuras\imagem.svg,
digite esse caminho na barra de endereços do seu navegador.
Quando o usuário vai buscar uma ajuda online que possua imagens, o melhor é
utilizar imagens vetoriais que não perdem a qualidade nos navegadores atuais e
são mais rápidas para serem exibidas.
Se você quiser conhecer a linguagem por trás do SVG acesse o Tutorial de SVG.
Using SVG as placeholders — More Image Loading Techniques
Como Salvar Figuras e Gráficos do Word como SVG
O Word permite salvar figuras e gráficos de documento para o formato SVG,
para quem possui a assinatura do Microsoft 365.
Vou mostrar como salvar um gráfico de vendas de um documento do Word, no
formato SVG.
Com o gráfico no formato SVG podemos usar a imagem em vários aplicativos
que reconhecem o formato e tirar proveito do fato da imagem ser vetorial e
podermos redimensionar sem perda de qualidade.
Siga o passo a passo para salvar o gráfico do Word no formato SVG.
1. Com o documento Word aberto, clique na área do gráfico, no menu de
contexto selecione o item Salvar como Imagem.
2. Na janela Salvar como Imagem, no campo Tipo, selecione
Elementos Gráficos Vetoriais Escaláveis (*.svg).
3. Selecione o diretório onde vai salvar o arquivo e digite o nome do
arquivo.
Agora podemos usar o gráfico na web e em vários outros aplicativos que
reconhecem o formato SVG. Esse procedimento é válido tanto para gráficos
como para figuras e SmartArt dentro do Word.
Se você quiser conhecer a linguagem por trás do SVG acesse o Tutorial de SVG.
Post Relacionado
Recursos Extras
The Secret Origin of SVGUsing SVG as placeholders — More Image Loading Techniques
