Introdução a gráficos SVG

Como desenvolvedor web você precisa saber como utilizar gráficos SVG (Scalable Vector Graphics) em um website. Neste artigo vamos fazer uma introdução ao SVG e analisar alguns exemplos mais complexos de sua utilização como a criação de logos ou ícones.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+.

Link para artigo original: Getting Started With Scalable Vector Graphics (SVG)
Autor do artigo original: Aaron Lumsden
Link da Envato para o artigo traduzido: Introdução a gráficos SVG

O que nós vamos criar

Introdução a gráficos SVG - Web Social Dev
A imagem acima é um arquivo de imagem – nós não vamos utilizar imagens e sim SVG

Resolução independente

Na WWDC 2012 a Apple anunciou o lançamento do novo MacBook Pro Retina Display. Telas retina possuem maior densidade de pixels em relação a monitores comuns e outras telas (220.5ppi) e a Apple garante que sua tecnologia retina é tão boa a ponto de não conseguirmos notar os pixels na tela a olho nu. Se você já teve a chance de experimentar uma tela retina você sabe o quanto elas são boas. Mas por outro lado, telas retinas podem causar problemas para desenvolvedores web.

O problema, ocorre quando imagens que foram salvas anteriormente com 72ppi, são exibidas distorcidas em telas retina. Não existe uma solução que resolva 100% do problema e os designers ainda estão a procura de uma solução cabível ao problema.

Uma possível solução (em alguns casos) é utilizar SVG. Porque você utilizaria SVG? Gráficos em SVG são renderizados como vetores, o que possibilita a visualização do gráfico em qualquer tamanho de tela sem perder a qualidade do mesmo. Basicamente você consegue a mesma qualidade do gráfico gerado com vetores, utilizando linhas de código.

Porém o SVG não resolve todos os problemas de gráficos para web; ele não pode ser utilizado por exemplo para renderizar imagens JPG ou PNG (o que pode ser contornado com a tag canvas). Quando o assunto são ícones ou logos ilustrados o SVG se mostra bastante útil. Hoje vamos fazer uma introdução ao SVG e alguns testes exportando vetores criados no Adobe Illustrator para páginas web.

Resumindo o SVG em 10 pontos

Antes de continuarmos, gostaria de fazer uma breve apresentação do SVG:

  • SVG significa Scalable Vector Graphics.
  • é utilizado para criar gráficos para web.
  • XML é o formato utilizado para definir o gráfico vetor.
  • não perde qualidade em diferentes tamanhos de tela.
  • pode ser animado.
  • é integrado ao DOM e pode se comunicar com CSS e JavaScript.
  • pode ser indexado por mecanismos de buscas, o que quer dizer que ele contem textos que mecanismos de buscas podem mapear.
  • pode ser impresso em qualquer resolução, sem perder qualidade.
  • hoje é uma recomendação do W3C para gráficos web.
  • funciona em qualquer browser moderno, porém sem suporte ao Internet Explorer 8-, o que pode ser contornado com plugins.

Criando gráficos SVG

Linhas

Vamos começar com um exemplo simples. Vamos criar uma linha. Para criar uma linha, insira o código abaixo em um documento HTML.

<svg>
  <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line>
</svg>

Primeiro nós utilizamos a tag <svg> e dentro dela inserimos a marcação XML. Vamos analisar um exemplo:

  • X1: Posição inicial da linha no eixo-x
  • Y1: Posição inicial da linha no eixo-y
  • X2: Posição final da linha no eixo-x
  • Y2: Posição final da linha no eixo-y

Então, se quisermos criar uma linha diagonal podemos inserir no atributo do eixo-y (Y2) o valor 200, isso faz com que o ponto final da linha diminua sua altura criando uma linha na diagonal. Também podemos aplicar estilos para as linhas com CSS. No exemplo abaixo utilizamos estilos inline, mas também podemos utilizar estilos externos.

Introdução a gráficos SVG - Web Social Dev
<svg>
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
</svg>

Círculos

Círculos podem ser criados da mesma forma que uma linha, com a exceção de alguns atributos. No exemplo abaixo vamos criar um círculo prateado com borda preta e raio de 50.

Introdução a gráficos SVG - Web Social Dev
<svg>  
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
</svg>

Os atributos CX e CY são utilizados para inserir as coordenadas de X e de Y a partir do meio do círculo. Se não utilizarmos estes atributos o centro do círculo seria setado para 0 o que pode resultar em um círculo fora da página. O atributo de marcação ‘R’ configura o radius do círculo.

Retângulos

Como você pode notar, até agora criar gráficos com SVG é bem simples. Criar um retângulo não seria uma exceção.

Introdução a gráficos SVG - Web Social Dev
<svg>
     <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
</svg>

O atributo SVG ‘rect’ pode ser utilizado da mesma maneira que setamos a altura e largura de um elemento com CSS.

Elipse

Uma elipse pode ser criada da mesma forma que um círculo, porém no exemplo abaixo vamos criar uma que além do radius fixo, contém atributos separados para o raio do eixo X e Y.

Introdução a gráficos SVG - Web Social Dev
<svg>
     <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
</svg>

Polígonos

Criar um polígono é um pouco mais complicado. Vamos começar setando uma cor para o polígono, contorno laranja e 10 para largura da linha (stroke width). Depois setamos o atributo point. Cada par de coordenadas define as coordenadas de X e Y para cada ponto diagonal do polígono. No exemplo abaixo criamos uma estrela:

Introdução a gráficos SVG - Web Social Dev
<svg>
    <polygon fill="green" stroke="orange" stroke-width="10" points="350, 75  379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
</svg>

Texto

Como mencionado anteriormente, podemos utilizar texto em arquivos SVG – diferente do flash – o que ajuda na indexação do elemento, e consequentemente da sua página web, por mecanismos de buscas.

Adicionando texto em um elemento SVG:

Introdução a gráficos SVG - Web Social Dev
<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

No exemplo acima podemos notar que foram adicionadas coordenadas para o eixo X e Y. Depois setamos alguns estilos CSS como font-family, weight, size e color.

Caminhos – Paths

Com a tag path precisamos nos concentrar no atributo ‘D’. Este atributo descreve o caminho a ser criado. Cada comando com o atributo ‘D’ corresponde a uma das letras destacadas abaixo, seguida de seus parâmetros. Os comandos para o atributo ‘D’ são os seguintes:

  • M: moveto
  • L: lineto
  • H: horizontal lineto
  • V: vertical lineto
  • C: curveto
  • S: smooth curveto
  • Q: quadratic Bezier curve
  • T: smooth quadratic Bezier curveto
  • A: elliptical Arc
  • Z: closepath
Introdução a gráficos SVG - Web Social Dev

Exemplos:

<svg>    
    <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>  
</svg>

Também podemos colocar o texto para que ele siga o caminho da linha, como neste exemplo:

Introdução a gráficos SVG - Web Social Dev
<svg>    
    <defs>        
        <path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>    
    </defs>  
    <text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">      
        <textPath xlink:href="#path1">webdesigntuts+</textPath>    
    </text>  
</svg>

Nós podemos basicamente definir o caminho com a tag ‘defs’ e atribuir um id de ‘path1’. Agora podemos aplicar isso ao texto utilizando o atributo ‘textPath’.

Criando logos e ícones SVG

Agora que já conhecemos o básico sobre SVG e efetuamos alguns testes com gráficos simples, vamos tentar algo um pouco mais complicado e interessante. Felizmente para nós isso não parece muito difícil, e de fato não é graças ao Adobe Illustrator. Para quem não conhece o Illustrator, ele pode ser descrito como:

O melhor software para criação de gráficos escaláveis em diferentes mídias. Além de ser especifico para tratamento de vetores.

Abra o Illustrator e crie um logo ou ícone. Todos os logos profissionais deveriam ser criados utilizando vetores então você pode solicitar o mesmo ao seu cliente. Se ele não possui o arquivo em vetor do logo, você pode tentar vetorizar o logo com base na imagem disponível. Se você não se sente confortável trabalhando com o Illustrator, no Vectortuts+ tem um porção de informações sobre.

Com o logo ou ícone pronto, vá até “Arquivo > Salvar como”, depois selecione “SVG” na opção “Salvar como”. De um nome e salve seu arquivo clicando no botão “Salvar”. Uma caixa de dialogo com opção do SVG deve abrir. Selecione “Mostrar código SVG”. Isso vai fazer com que o Illustrator execute o código SVG no browser. Agora basta copiar e colar as tags SVGs no seu documento HTML e está pronto. Simples não?

Introdução a gráficos SVG - Web Social Dev
Introdução a gráficos SVG - Web Social Dev

Você também pode utilizar o Illustrator para criar caminhos – paths. Desenhar uma simples linha no Illustrator, utiliza o atributo ‘d’ que descrevemos anteriormente. Por exemplo, o caminho – path – que eu criei para o texto ‘webdesigntuts+’ abaixo foi criado no Illustrator e exportado para um documento.

Você pode estilizar ou posicionar a tag SVG no seu documentado utilizado métodos CSS. Você também pode criar um link ancora ou apontar para o elemento com JavaScript para dicionar funcionalidades extras.

Conclusão

Agora é uma questão de tempo para que a densidade do pixel e o padrão retina fazer parte de todos os dispositivos que utilizam telas com uma forte demanda pela densidade dos pixels (o que gera qualidade). Utilizando SVG nós podemos criar gráficos escaláveis que são renderizados da mesma forma não importa densidade de pixels ou resolução da tela. Como mencionamos no ínicio, o SVG não apropriado para todas as situções, mas para a reprodução de gráficos em vetor na web definitivamente é a melhor opção até o momento.

Informações adicionais