Páginas

Pesquisar neste blog

Mostrando postagens com marcador Imagem Vetorial. Mostrar todas as postagens
Mostrando postagens com marcador Imagem Vetorial. Mostrar todas as postagens

13 de novembro de 2017

O Que é Formato SVG para Imagens


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. 

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. 

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

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.

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:


<!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.

desenhos-google.png

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.

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.

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.

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 SVG
Using SVG as placeholders — More Image Loading Techniques