Criado pelo W3C o SVG (Scalable Vectorial Graphics) é nada mais que um arquivo XML que contem tags especificas para gerar uma imagem vetorizada na sua aplicação. Com tags bastante simples você consegue gerar imagens de alta qualidade vetorizadas que por mais que você altere as proporções na tela essa não perderá qualidade, por ser uma imagem vetorizada.
Podendo ser apenas imagem fixa ou animação, o SVG pode ser trabalhado junto ao JavaScript para manipular eventos de imagem. O formato SVG permite três tipos de objetos gráficos, sendo eles imagens, textos ou formas geométricas vetoriais.
Por que utilizar SVG?
Quando você trabalha com imagens que necessitam de grande riqueza de detalhes e vai exibir esta em uma aplicação, essa imagem precisa ser salva com uma grande qualidade, ou seja, essa imagem vai ter um grande tamanho e custo de armazenamento. Caso se queira economizar espaço a imagem vai ser gerada com menos qualidade e ao expandir essa imagem irá distorcer, espalhando os pixels e deixando visível isso.
Como no SVG os dados são escaláveis a imagem pode ser redimensionada sem preocupação quanto a qualidade e distorção dessa imagem, sem falar que por ser apenas um arquivo XML, apenas texto, o custo de armazenamento é muito inferior assim como o de exibição.
Na internet ,por exemplo, se a imagem for grande dependendo da conexão do usuário essa vai levar um certo tempo para ser carregada e utilizando o svg a imagem é renderizada mais rapidamente, pois o browser lê as tags do xml e vai construindo a imagem na página.
Muitas aplicações mobile hoje já estão utilizando o SVG, pois como a maioria dos aplicativos não possuem um grande potencial de hardware, é menos custoso exibir imagens e armazenar com essa extensão.
Começando com SVG
Inicialmente se você sabe XML você sabe SVG, se você não sabe XML estude antes de estudar SVG, vai ficar mais muito mais fácil assim.
Estrutura básica SVG
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="200px" height="50px"
viewBox="0 0 200 50"
zoomAndPan="disable" >
<!-- SVG code goes here -->
</svg>
O quadro acima mostra a estrutura básica de um arquivo SVG, a partir dessa estrutura você pode começar a descrever seu arquivo SVG.
width="200px" height="50px"
Os parâmetros width e height correspondem a largura e a altura (respectivamente) do arquivo SVG.
viewBox="0 0 200 50"
O parâmetro viewBox é utilizado para descrever a caixa de visualização da imagem SVG, como se fosse a janela, um iframe que ira montar a imagem dentro. Abaixo segue um simples HelloWorld auto explicativo.
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="200px" height="50px"
viewBox="0 0 200 50"
zoomAndPan="disable" >
<text x="60" y="25">Hello World!</text> <!--tag texto-->
<rect x="10" y="5" width="20" height="20" fill="blue" /> <!--tag rect, criar retangulos, quadrados-->
<rect x="20" y="10" width="160" height="20" fill="green" opacity="0.5" />
<rect x="170" y="25" width="20" height="20" fill="blue" />
</svg>Para ver o código acima sendo executado crie um arquivo no bloco de notas, cole o código e salve como teste.svg e abra pelo seu navegador web.
Caso você não queira criar seus arquivos SVG na mão, existem várias ferramentas que gerão esses arquivos, um deles é o próprio Corel Drawn que exporta a sua imagem como SVG e uma ferramenta muito boa e gratis é o Inkscape.
