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
- W3.org's SVG Primer (em inglês)