Introdução ao Gráfico Vetor Vscalável (SVG)

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Como um webdesigner está mais do que na hora de você aprender a implementar SVG no seus projetos. Neste artigo vamos fazer uma breve introdução ao SVG e ver alguns exemplos mais avançados utilizando o recurso para criação de logos e ícones com o illustrator.

O que nós vamos criar

Resolução independente

Recentemente 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 demais. Mas por outro lado, telas retinas podem começar a causar problemas para o desenvolvedores web.

O problema ocorre quando imagens que foram salvas anteriormente com 72ppi começam a aparecer 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. Você consegue a mesma qualidade do gráfico gerado com vetores, com linhas de código.

Porém o SVG não resolve todos os problemas de gráfico; 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 recomendado e útil. Hoje vamos fazer uma introdução ao SVG e alguns testes exportando vetores criados no Adobe Illustrator para websites.

SVG resumido em 10 pontos

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

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

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 entender essa marcação:

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 o atributo do eixo-y (Y2) para 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 utilizado estilos inline, mas também podemos utilizar arquivos de estilos externos.

<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 praticamente da mesma forma que uma linha, com a exceção de alguns atributos. No exemplo abaixo vamos criar um circulo prateado com borda preta e raio de 50.

  
<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 excessão.

<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 construída da mesma forma que um círculo, porém no exemplo abaixo vamos criar uma que além do radius fixo, vai conter atributos separados para o raio do eixo X e Y.

<svg>
 <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
</svg>

Poligonos

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

<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 - difrente do flash - o que otimiza a indexação do elemento por macanismos de buscas.

Adicionando texto em um elemento SVG:

<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

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

Caminhos/Paths

Com a tag path precisamos no 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 parametros. 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

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 abaixo para que ele siga o caminho, como neste exemplo:

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

Nos 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 básico sobre SVG e efeutamos alguns testes com gráficos simples, vamos tentar algo um pouco mais complicado e interessante. Felizmente para nós isso não parece muito dificil, 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 tramento 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?

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.

Recursos adicionais

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!