Índice da série

Introdução

Sei que muita gente já está doida para aprender a fazer desenhos loucos e animações com SVG, mas é ainda mais importante aprender tudo que está por trás do SVG, para poder então, entender tudo que virá pela frente. Isso que vai diferenciar um cara que sabe SVG de um cara que aprendeu a futucar numa biblioteca e fez um “trequinho ali para empresa”.

A ideia também não será escrever algo muito extenso e cansativo, mas uma base para que se você olhar para um arquivo SVG, entenda o que significa cada parte dele e inclusive poder fazer melhorias baseadas somente no código.

Estrutura

Como a maioria já deve saber o SVG tem uma sintaxe baseada em xml. Estamos na segunda edição da versão 1.1. E a especificação do SVG 2.0 já está sendo formulada, já em um processo bastante adiantado, seguindo os moldes das novas especificações, como CSS3 e o HTML5.

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- código para o desenho -->

</svg>

O que são essas coisas ali com a tag SVG?

São os namespaces do SVG. Eles servem para identificar a versão utilizada no SVG e o namespace padrão dele, assim o browser irá saber qual a melhor forma de renderizar aquele SVG. Isso será bastante importante para nós quando formos manipular o SVG através do Javascript, pois para criar novos elementos e definir atributos, iremos trabalhar no DOM através dos namespaces.

Preciso definir isso sempre?

Não, não é necessário definir isso tudo sempre, mas é aconselhável, já que alguns browsers podem não entender muito bem como renderizar o seu SVG.

Se quiser entender um pouco melhor sobre Namespaces, acessa o link da MDN.

Elementos

O SVG é tem algumas formas básicas, que permitem fazer os lindos desenhos que vemos. Irei mostrar essas formas e alguns de seus atributos, mas vale lembrar que elas serão mais necessárias caso você queira escrever o SVG inline e/ou para entender melhor um arquivo SVG de um desenho já pronto. Não será necessário que você faça desenhos mais complexos na mão, usando só essas formas.

O elemento rect

See the Pen Exemplo do elemento Rect by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <rect x="50" y="30" width="300" height="200" fill="#0562dc"></rect>
</svg>

Esse elemento permite criar um retângulo e tem os seguintes atributos:

O elemento circle

See the Pen Exemplo do elemento circle by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <circle cx="75" cy="75" r="50" fill="#0562dc" />
</svg>

Esse elemento permite criar um círculo e tem os seguintes atributos:

O elemento ellipse

See the Pen Exemplo do elemento ellipse by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <ellipse cx="100" cy="60" rx="100" ry="50" fill="#0562DC" />
</svg>

Esse elemento permite criar uma ellipse e tem os seguintes atributos:

O elemento line

See the Pen Exemplo do elemento line by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <line x1="20" y1="10" x2="180" y2="60" stroke="#0562DC" stroke-width="4"/>
</svg>

Esse elemento permite criar uma linha e tem os seguintes atributos:

O elemento polyline

See the Pen NPjXZG by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#0562DC" stroke-width="4" />
</svg>

Esse elemento permite criar uma polyline e tem os seguintes atributos:

O elemento polygon

See the Pen Exemplo do elemento polygon by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

<svg>
  <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#0562DC" stroke="#000" stroke-width="4"/>
</svg>

Esse elemento permite criar um polígono e tem os seguintes atributos:

O elemento path

See the Pen Svg-path: curvas by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

O elemento Path é um dos mais complexos e também mais importantes para o SVG. A partir dele, conseguimos criar qualquer forma e com isso gerar os belos desenhos existentes.

Existem 5 tipos de paths:

A letra maiúscula utiliza coordenadas absolutas para criar a forma, enquanto a letra minúscula utiliza coordenadas relativas.

Conclusão

See the Pen Simple ipad made with SVG by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

A partir de formas básicas podemos até brincar um pouquinho de fazer alguns desenhos bobinhos, ou se você for um Mestre Jedi, até fazer coisas incríveis. Você consegue saber as formas usadas na imagem acima? Teve ideia para fazer algum desenho legal? Faz no codepen e manda para cá nos comentários =)

Se quiser saber um pouco mais sobre Inline SVG tem o Guia de Bolso do SVG, que foi um livro que eu e o Lucas Maia traduzimos com muito amor e carinho <3

E se tiver alguma dúvida, seja de algo que eu já falei ou que ainda não falei, manda nos comentários, tento responder o mais rápido que der =)