Criado pelo W3C o SVG (Scalable Vectorial Graphics) é nada mais que um arquivo XML que contem tags especificas para gerar uma imagem vetorizada em sua aplicação. Com tags simples geram-se imagens vetorizadas de alta qualidade e por mais que as proporções na tela sejam alteradas a imagem não perderá qualidade, por ser uma imagem vetorizada. Pode 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.
Ao trabalhar com imagens que necessitam de grande riqueza de detalhes e que serão exibidas em uma aplicação, essas imagens precisam serem salvas com uma grande qualidade, ou seja, elas terão um tamanho grande e custo de armazenamento. Ao economizar espaço a imagem será gerada com baixa qualidade e ao expandir sofrerá uma distorção, deixando visível um serrilhado, pelo estouro dos pixels. Ao aumentar uma fotografia ela começa a ficar quadriculada, dá perceber os pixels dela. A imagem bitmap define uma matriz de pixels e não se pode definir o que existe entre um pixel e outro, por isso sempre existe um limite na resolução máxima de uma imagem bitmap. Por não poder ter certeza das cores reais entre um pixel e outro, as ações de rotacionar, esticar, inclinar também são operaçõesdestrutivas em um bitmap.
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.
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>
O quadro acima mostra a estrutura básica de um arquivo SVG, a partir dessa estrutura pode-se começar a descrever um 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.
Leia mais em:
Entendendo e usando o SVG http://www.devmedia.com.br/entendendo-e-usando-o-svg/19773#ixzz2krAHDUfX
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 gerarão esses arquivos,
um deles é o próprio Corel Drawn que exporta a imagem como SVG outra ferramenta muito boa e gratis é o Inkscape.
Mais informações sobre a ferramenta e exemplos svg em:
Ferramenta SVG
Ferramenta SVG
Inkscape