SVG

Scalable Vector Graphics (SVG) é um formato de imagem vetorial 2D baseado em uma sintaxe XML.

A W3C iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando o Internet Explorer (en-US) 9 foi lançado com suporte a SVG. Atualmente a maioria dos navegadores suportam SVG.

Baseado na sintaxe de XML, SVG pode ser estilizado com CSS e apresentar interatividade usando JavaScript. Em HTML5 é possível embutir diretamente tags SVG em um documento HTML.

Sendo um formato para gráficos vetoriais, imagens SVG podem ser redimensionadas infinitamente, tendo um valor inestimável em design responsivo (en-US), já que você pode criar elementos de interface e gráficos que se comportam bem em qualquer tamanho de tela. SVG também traz um conjunto de funcionalidades úteis, como clipping, máscaras, filtros e animações.

Exemplo

Abaixo você pode conferir a renderização de dois círculos de tamanhos e cores diferentes utilizando SVG.

xml

<svg width="100" height="300">
   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="10" fill="red" />
   <circle cx="50" cy="150" r="20" stroke="green" stroke-width="10" fill="yellow" />
</svg>

Repare que cx e cy são para definir as coordenadas x e y do círculo, r é para definir o raio do círculo, o preenchimento é definido com fill, a largura do contorno é definida com stroke-width e a cor do contorno é definida com stroke. Lembrando que a largura e altura do svg em si são definidas no próprio elemento.

Saiba mais

Conhecimento Geral

  • SVG na Wikipedia

Aprendendo SVG

Informação técnica