segunda-feira, 13 de novembro de 2017

O Que é SVG

gráfico escalável vetorial


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.

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, JPG, etc. 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. Eles 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 e Chrome. O Internet Explorer começou o suporte a partir da versão 9, isto fez com que a maioria dos navegadores suportassem este formato de imagem, o que trouxe uma maior utilização do formato.

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 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, você pode desenhar diretamente na ferramenta sem se 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. O desenho 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 tradicionais tipo JPG ou PNG.
  • A impressão da imagem fica com uma qualidade superior do que a impressão de imagens JPG e PNG.

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.

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