Um olhar em gráficos vetoriais escaláveis ​​(SVG)

Os gráficos vetoriais têm sido amplamente aplicados na mídia impressa. Em um site, também podemos adicionar gráficos vetoriais com SVG ou Gráfico de vetor escalável. Citando a especificação oficial no W3.org, o SVG é descrito como:

Uma linguagem para descrever gráficos bidimensionais em XML. O SVG permite três tipos de objetos gráficos: formas gráficas vetoriais (por exemplo, caminhos que consistem em linhas retas e curvas), imagens e texto.

Na verdade, existe desde 1999 e, a partir de 16 de agosto de 2011, tornou-se uma recomendação do W3C. No entanto, o SVG ainda é bastante subutilizado, ao passo que há muitas vantagens em usar o Vector em vez do Bitmap para exibir gráficos ou imagens em um site..

Vantagens do SVG

Em termos de exibição de gráficos em sites, o SVG oferece algumas vantagens sobre o Bitmap, algumas das quais incluem:

Resolução Independente

O gráfico bitmap / raster depende da resolução - é construído sobre pixels. Os gráficos exibidos parecerão pixelados quando redimensionados em um determinado nível de zoom. Isso não acontece com o gráfico vetorial, que é independente da natureza da resolução, pois o gráfico é expresso com uma equação matemática que o torna escalável em qualquer nível de zoom, mantendo a qualidade, mesmo no Retina Display.

Reduzindo o pedido HTTP

O SVG pode ser incorporado diretamente em um documento HTML com svg tag, para que o navegador não precise fazer uma solicitação para exibir o gráfico. Isso também resulta em melhor desempenho de carga para o site.

Styling e Scripting

Incorporando diretamente com svg tag também nos permite estilizar o gráfico facilmente através de CSS. Podemos alterar propriedades do objeto como cor de fundo, opacidade, bordas, etc da mesma forma que fazemos com tag HTML regular. Da mesma forma, também podemos manipular o gráfico via JavaScript.

Pode ser animado e editado

O objeto SVG pode ser animado quando usa o elemento de animação ou através da Biblioteca JavaScript como jQuery. O objeto SVG também pode ser editado com qualquer editor de código de texto ou um software gráfico como o Inkscape (que é gratuito) ou o Adobe Illustrator.

Tamanho de arquivo menor

O SVG tem um tamanho de arquivo menor em comparação com o Bitmap, que tem uma apresentação gráfica semelhante.

Desenhando formas básicas com SVG

De acordo com as especificações, podemos desenhar algumas formas básicas como o retângulo, círculo, linha, elipse, polilinha e polígono com SVG e para que o navegador renderize o gráfico SVG, todos esses elementos gráficos precisam ser inseridos dentro do tag. Vamos ver os exemplos abaixo para mais detalhes:

Linha

Desenhar uma linha no SVG podemos usar o elemento. Este elemento é usado para desenhar uma única linha reta, então ele consistirá apenas de dois pontos, começar e fim.

Como você pode ver acima, a coordenada do ponto inicial da linha é expressa com os dois primeiros atributos x1 e x2, enquanto a coordenada do ponto final da linha é expressa com y1 e y2.

Existem também dois outros atributos, o acidente vascular encefálico e largura do traçado que são usados ​​para definir a cor da borda e a largura da borda, respectivamente. Alternativamente, também podemos definir esses atributos dentro de um estilo inline, assim:

acaba por fazer o mesmo.

• Ver demonstração “Linha”

Polilinha

É quase semelhante ao , mas com o elemento podemos desenhar várias linhas em vez de apenas uma. Aqui está um exemplo:

elemento tem pontos atributos que armazenam todas as coordenadas que formam as linhas.

• Ver demonstração “Polilinha”

Retângulo

Desenhar um retângulo também é simples com isso elemento. Nós só precisamos especificar a largura e a altura, assim:

• Ver demonstração “Retângulo”

Círculo

Nós também podemos desenhar um círculo com o elemento. No exemplo a seguir, vamos criar um círculo com 100 raio que é definido com r atributo:

Os dois primeiros atributos, cx e cy estão definindo a coordenada do centro do círculo. No exemplo acima, definimos 102 tanto para o x e y coordene, se esses atributos não forem especificados, 0 será tomado como o valor padrão.

• Ver demonstração “Círculo”

Elipse

Podemos desenhar uma elipse com . Ele funciona bastante semelhante ao círculo, mas desta vez podemos controlar especificamente o x raio da linha e y raio da linha com rx e ry atributo;

• Ver demonstração “Elipse”

Polígono

Com o elemento, podemos desenhar vários lados de formas como um triângulo, hexágono e até mesmo um retângulo. Aqui está um exemplo:

• Ver demonstração “Polígono”

Usando o editor gráfico vetorial

Como você pode ver, desenhar objetos simples com SVG em HTML é muito fácil. No entanto, quando o objeto se torna mais complexo, essa prática não é mais ideal e lhe dará dor de cabeça..

Felizmente, como mencionamos acima, podemos usar um editor gráfico vetorial como Adobe Illustrator ou Inkscape para fazer o trabalho. Se você estiver familiarizado com esses softwares, certamente é muito mais fácil desenhar objetos com sua GUI, em vez de codificar o gráfico você mesmo na tag HTML..

Se você está trabalhando com o Inkscape, você pode salvar seu gráfico vetorial como SVG simples e, em seguida, abri-lo no editor de código de texto. Agora, você deve encontrar os códigos SVG no arquivo. Copie todos os códigos e cole-os dentro do seu documento HTML.

Ou você também pode incorporar .svg arquivo através de um desses elementos; Embutir, iframe e objeto, por exemplo;

Os resultados serão eventualmente os mesmos.

Neste exemplo, eu uso este iPod da Apple a partir do OpenClipArt.org.

• Ver demonstração “iPod”

Suporte de Navegador

Em relação ao suporte ao navegador, o SVG tem sido muito bem suportado em todos os principais navegadores, exceto no IE8 e versões anteriores. Mas esta questão pode ser resolvida com esta biblioteca JavaScript, chamada Raphael.js. Para facilitar as coisas, usaremos essa ferramenta, ReadySetRaphael.com, para converter nosso código SVG em formato suportado pelo Raphael. Veja como.

Primeiro de tudo, baixe e inclua o Raphael.js biblioteca para o seu documento HTML. Em seguida, faça o upload do .svg arquivo para o site, copie e cole o código gerado dentro do seguinte carregamento função;

 window.onload = function () // o código de Raphael vai aqui 

Dentro de corpo tag, coloque o seguinte div com rsr atributo id;

É isso aí, você está feito. Confira o exemplo no link abaixo.

• Ver demonstração “Raphael”

Pensamentos finais

Então, isso é o básico com o SVG. Esperamos que agora você tenha uma compreensão justa deste assunto. É a melhor maneira de otimizar seu site para qualquer resolução de tela, mesmo para uso em tela Retina.

Como sempre, se você é uma pessoa aventureira, aqui colocamos mais algumas referências e discussões para nos aprofundarmos nesse assunto..

• Uma introdução às escolas SVG - W3
• Resolução Independente com SVG - Smashing Magazine
• Por que você não está usando o SVG? - NetTuts

Obrigado pela leitura e esperamos que você tenha gostado desta postagem.

• Ver demonstração
• Fonte de download