SVG

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

AW3C iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando oInternet Explorer 9 foi lançado com suporte a SVG. Atualmente a maioria dosnavegadores suportam SVG.

Baseado na sintaxe deXML, SVG pode ser estilizado comCSS e apresentar interatividade usandoJavaScript. Em HTML5 é possível embutir diretamentetags SVG em um documentoHTML.

Sendo um formato paragráficos vetoriais, imagens SVG podem ser redimensionadas infinitamente, tendo um valor inestimável emdesign 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 quecx ecy são para definir as coordenadas x e y do círculo,r é para definir o raio do círculo, o preenchimento é definido comfill, a largura do contorno é definida comstroke-width e a cor do contorno é definida comstroke. Lembrando que a largura e altura dosvg em si são definidas no próprio elemento.