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