SVG – Guia definitivo

O que é

SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos vetoriais escaláveis. SVG é uma linguagem XML para fazer desenhos, gráficos 2D de maneiras estáticas ou dinâmicas a partir de vetores.

A grande vantagem dos gráficos vetoriais é que não se perde a qualidade quando esses gráficos são ampliados (agora lembrei das minhas aulas de CorelDraw).

Outro fato interessante sobre o SVG é que ele é open source e foi criado pela W3C, que também definiu o HTML e o XHTML.

• Quando usar
• Como usar
• Principais elementos
  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon
  • path
• Casos reais
  • Gráfico com animação em CSS
  • Loading com animação no próprio SVG
• E o Canvas?

Quando usar

Para desenhar gráficos 2D, formas simples e complexas, ícones, animar formas entre outras coisas. É interessante perceber inclusive, que o SVG é capaz de realizar tantas coisas, que atualmente o canvas é usado em contextos muito específicos.

Um caso real onde utilizei recentemente SVG e um projeto, foi uma tela onde um gráfico com animação estava travando no Android (projeto desenvolvido com Ionic) principalmente. O gráfico foi incialmente desenvolvido com canvas. Eu refiz o gráfico e a animação com SVG e CSS e ficou lindo <3

Como usar

Existem várias formas de criar um SVG, uma é através de código xml.

Outra forma de escrever SVG é através de softwares capazes de criar, editar e exportar gráficos SVG. Vários são os softwares capazes, os mais conhecidos são: Gimp, Inkscape, Adobe Illustrator e Corel Draw.

Principais elementos

rect

Forma básica do SVG, rect é utilizado para criar retângulos a partir da posição de uma borda adicionando sua largura e altura e possibilitando também criar retângulos com bordas arredondadas.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”zYYXLKX” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_01 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• x: posição do elemento no eixo horizontal (em relação ao espaço do SVG). Propriedade opcional.
• y: posição do elemento no eixo vertical (também em relação ao espaço do SVG). Propriedade opcional.
• width: largura
• height: altura
• fill: cor do preenchimento. Opcional.
• rx: Define o raio das bordas na horizontal. Utilizado para fazer bordas arredondadas.
• ry: Define o raio das bordas na vertical.

circle

Mais uma forma básica do SVG, usada para criar círculos a partir de um ponto central e um raio.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”ZEEZMVB” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_02 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• cx: posição do centro do círculo no eixo horizontal.
• cy: posição do centro do círculo no eixo vertical.
• r: define o raio do círculo.
• fill: cor do preenchimento. Opcional

ellipse

Outra forma básica do SVG, usada para criar elipses a partir de uma coordenada central, tanto no eixo horizontal quanto no eixo vertical.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”ZEEZZrQ” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_03 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• cx: posição do centro da elipse no eixo horizontal.
• cy: posição do centro da elipse no eixo vertical.
• rx: raio da elipse no eixo horizontal.
• ry: raio da elipse no eixo vertical.
• fill: você já tá cansado de ler a mesma coisa cor do preenchimento. Opcional.

line

O elemento line é uma forma básica do SVG para criar uma linha conectando dois pontos.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”jOORRvE” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_04 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• x1: posição no eixo horizontal do primeiro ponto da linha.
• y1: posição no eixo vertical do primeiro ponto da linha.
• x2: posição no eixo horizontal do segundo ponto da linha.
• y2: posição no eixo vertical do segundo ponto da linha.
• stroke: cor do contorno da linha, cor da linha em si. Opcional.
• stroke-width: largura da linha. Opcional.

polyline

O elemento polyline ainda é uma forma básica do SVG, porém podemos dizer que já tem um pouco mais de complexidade ao desenhar. Ele é utilizado para desenhar várias linhas retas conectando vários pontos. Normalmente é utilizado para criar formas abertas.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”ZEEZZVp” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_05 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• points: posição em pares ordenados (x, y) para cada ponto do elemento.
• stroke: cor do contorno do elemento. Opcional.
• stroke-width: largura do contorno do elemento. Opcional.
• fill: cor de preenchimento interno do elemento (no exemplo acima eu não queria cor de preenchimento, e por isso passei none). Opcional.

polygon

É o último elemento básico, eu prometo. Ele desenha uma forma fechada através de um conjunto de segmentos de linha reta ligados.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”pooBBBy” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_06 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

• points: posição em pares ordenados (x, y) para cada ponto do elemento.
• fill: preenchimento interno do elemento. Opcional.
• stroke: cor do contorno do elemento. Opcional.
• stroke-widtht: lagura do contorno do elemento. Opcional.

path

Elemento genérico para definir uma forma. Toda as formas básicas poderão ser criadas com path também. Isso o torna um elemento bem completo, e as vezes complexo.

[codepen_embed height=”265″ theme_id=”default” slug_hash=”Pooggvg” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_07 by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

O SVG define 6 tipos de comandos para o elemento path, para um total de 20 comandos. Cada comando é composto por uma letra e números que representam os parâmetros de cada comando. Se você não entender tudo de primeira, não se preocupe, pratique. Mantive os termos em inglês pois as letras usadas são abreviações.

• MoveTo: M, m
• LineTo: L, l, H, h, V, v
• Cubic Bézier Curve: C, c, S, s
• Quadratic Bézier Curve: Q, q, T, t
• Elliptical Arc Curve: A, a
• ClosePath: Z, z

Os comandos diferenciam maiúsculas de minúsculas, a diferença é que as letras maiúsculas definem seus valores como posições absolutas e as minúsculas definem pontos em relação a posição atual.

Casos reais

Gráfico com animação em CSS

[codepen_embed height=”265″ theme_id=”default” slug_hash=”ZEEZNWK” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_grafico by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

Loading com animação no próprio SVG

[codepen_embed height=”265″ theme_id=”default” slug_hash=”RwwOmgz” default_tab=”html,result” user=”andrefelizardo”]See the Pen svg_guia-definitivo_loading by Andre Felizardo (@andrefelizardo) on CodePen.[/codepen_embed]

E o Canvas?

Apesar de algumas formas simples o elemento canvas e o elemento svg proporcionarem experiências visuais parecidas, eles não são a mesma coisa.

Canvas foi feito para desenhar de forma programática, ou seja programando através de Javascript. Canvas é desenhado com base em pixel, já o SVG é desenhado com base na forma. SVG pode ser alterado por Javascript e CSS, canvas apenas por Javascript.

Resumo do resumo, canvas deveria ser utilizado principalmente para manipulação de pixels (como colocar bordas em imagens .png), e SVG para desenhar formas gráficas de alta fidelidade, como ícones entre outros. Canvas funciona melhor em uma tela pequena com mais de 10.000 objetos desenhados. Caso contrário SVG vai ter uma performance melhor.

E aí? O que achou do SVG? Você já utiliza? Qualquer dúvida deixa aí nos comentários.