O SVG é um acrônimo para Scalable Vector Graphics (Gráficos Vetoriais Escaláveis). Com o SVG é possível definir de forma vetorial desenhos e gráficos bidimensionais utilizando XML (Extensible Markup Language).
O elemento HTML <svg>
A tag <svg> é um container para a definição do gráfico vetorial. Podemos escrever o código diretamente no HTML ou podemos salvar dentro de um arquivo .svg e realizar a importação no HTML como uma imagem: <img src="arquivo.svg" alt="Lorem ipsum" />.
XML namespace
O atributo xmlns significa XML namespace, com ele é possível definir o DTD (Doctype Declaration), que de forma geral, seriam as regras para a definição dos gráficos, como por exemplo, quais atributos os elementos podem ter.
<svg xmlns="https://www.w3.org/2000/svg"></svg>
O atributo xmlns é obrigatório para arquivos image/svg+xml, ou seja, quando o SVG é salvo dentro de um arquivo .svg. Quando definimos o SVG diretamente no HTML não precisamos especificar o namespace.
Elementos pré-definidos
O SVG possui 7 formas definidas que podemos usar, abaixo abordaremos cada uma delas, mas antes vamos conferir o que cada atributo faz.
Dimensão e posição
x: define a posição horizontal do elemento tendo como origem o topo esquerdo. y: define a posição vertical do elemento tendo como origem o topo esquerdo. width: define a largura do elemento. height: define a altura do elemento.
Cor e opacidade
fill: define a cor de preenchimento. fill-opacity: define a opacidade da cor de preenchimento.
stroke: define a cor da borda. stroke-opacity: define a opacidade da cor da borda.
opacity: define a opacidade para todo o elemento.
fill-rule: define a regra de preenchimento.
As propriedades acima não estão disponíveis para todos os elementos, confira abaixo como usá-las.
Rectangle <rect>
O elemento <rect> é usado para criar um retângulo.
<svg width="400" height="150">
<rect x="20" y="20" rx="20" ry="20" width="300" height="100" fill="#0ea5e9" stroke="#6366f1" stroke-width="3" />
</svg>
Os atributos rx e ry definem o arredondamento horizontais e verticais dos cantos.
Circle <circle>
O elemento <circle> é usado para criar um circulo.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#0ea5e9" stroke="#6366f1" stroke-width="3" />
</svg>
O atributo r define o raio do elemento.
Os atributos cx e cy definem a posição vertical e horizontal do elemento.
Ellipse <ellipse>
O elemento <ellipse> é usado para criar uma elipse.
<svg width="500" height="140">
<ellipse cx="200" cy="80" rx="100" ry="50" fill="#0ea5e9" stroke="#6366f1" stroke-width="3" />
</svg>
Os elementos rx e ry definem o raio horizontal e vertical do elemento.
Line <line>
O elemento <line> é usado para criar uma linha.
<svg width="500" height="210">
<line x1="0" y1="0" x2="200" y2="200" stroke="#6366f1" stroke-width="2" />
</svg>
Os atributos x1 e y1 definem o começo da linha nos eixos x e y, respectivamente.
Os atributos x2 e y2 definem o fim da linha nos eixos x e y, respectivamente.
Polyline <polyline>
O elemento <polyline> é usado para criar qualquer forma que consiste somente de linhas retas.
<svg width="500" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140" fill="none" stroke="#6366f1" stroke-width="3" />
</svg>
O atributo points as coordenadas x e y necessárias para desenhar as linhas.
Polygon <polygon>
O elemento <polygon> é usado para criar um gráfico que contém pelo menos 3 lados.
<svg width="500" height="220">
<polygon points="200,10 250,190 160,210" fill="#0ea5e9" stroke="#6366f1" stroke-width="3" />
</svg>
O atributo points define as coordenadas x e y para cada canto do polígono.
Path <path>
O elemento <path> é usado para definir um caminho.
os comandos abaixo estão disponíveis para o path.
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
Todos os comandos acima podem ser usados com letras minúsculas, onde letras maiúsculas significam posição absoluta e letras minúsculas significam posição relativa.
<svg width="400" height="220">
<path d="M150 0 L75 200 L225 200 Z" fill="#0ea5e9" stroke="#6366f1" stroke-width="3" />
</svg>