SVG

SVG a abreviatura de Scalable Vector Graphics que pode ser traduzido do ingls como grficos vetoriais escalveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e grficos bidimensionais, quer de forma esttica, quer dinmica ou animada. Umas das principais caractersticas dos grficos vetoriais, que no perdem qualidade ao serem ampliados. A grande diferena entre o SVG e outros formatos vetoriais, o fato de ser um formato aberto, no sendo propriedade de nenhuma empresa. Foi criado pela World Wide Web Consortium, responsvel pela definio de outros padres, como o HTML e o XHTML. A criao deste formato foi baseada noutros j existentes: CSS, DOM, JPEG, PNG, SMIL e XML. um padro aberto desenvolvido desde 1999 por um grupo de trabalho do W3C com base nos formatos PGML, da Adobe, e VML, da Microsoft, submetidos ao W3C por essas empresas em 1998 [1]. SVG suportado por todos os navegadores Web modernos de forma nativa ou atravs de bibliotecas JavaScript. O suporte nativo no Microsoft Internet Explorer s possvel a partir da verso 9. Bibliotecas JavaScript[2] [3] permitem suporte limitado em navegadores mais antigos.

Descrio
O formato SVG, neste momento, permite trs tipos de objetos grficos:

formas geomtricas vetoriais (isto , linhas e curvas descritas matematicamente, ao contrrio das imagens bitmap compostas por pixels) imagens raster / bitmap texto

Quanto ao armazenamento, as imagens no formato SVG podem ser gravadas com a compresso gzip, sem perda de dados, podendo-se chamar neste caso, ficheiros SVGZ (assim como a extenso). Devido ao XML conter muitos dados redundantes, pode ser comprimido, resultando em ficheiros bastante menores. No entanto muitas vezes, o formato SVG j por si menor que a sua verso em raster

Impacto potencial
Com o compromisso da Adobe em suportar o formato em suas ferramentas, que sabidamente so largamente utilizadas por profissionais em editorao (para a web ou no), alm do fato do padro ser baseado em texto seguindo os padres XML, o que o torna fcil o aprendizado por imitao, provvel que a produtividade de seus usurios muito rapidamente alcance os nveis daqueles de formatos tradicionais. Isto deve tornar a adoo do formato rpida e indolor. Por exemplo, a biblioteca libplot, parte do pacote

GNU plotutils, j fornece suporte para SVG, fazendo com que o desenvolvimento de programas livres com suporte ao formato j esteja a pleno vapor. Dificilmente, porm, haver uma revoluo na web por conta da introduo do formato. Tampouco de se prever a obsolescncia de formatos atualmente em uso graas ao SVG porque os padres de imagens bitmap continuam teis nas aplicaes apropriadas

Entendendo e usando o SVG

Manipular imagens vetorizadas na web facil com SVG, entenda o que o SVG, o que ele pode lhe proporcionar em tempo de carregamento de imagens de alta qualidade e animaes em alguns minutos.

O que SVG?
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 aplicao. Com tags bastante simples voc consegue gerar imagens de alta qualidade vetorizadas que por mais que voc altere as propores na tela essa no perder qualidade, por ser uma imagem vetorizada. Podendo ser apenas imagem fixa ou animao, o SVG pode ser trabalhado junto ao JavaScript para manipular eventos de imagem. O formato SVG permite trs tipos de objetos grficos, sendo eles imagens, textos ou formas geomtricas vetoriais.

Por que utilizar SVG?

Quando voc trabalha com imagens que necessitam de grande riqueza de detalhes e vai exibir esta em uma aplicao, 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 espao a imagem vai ser gerada com menos qualidade e ao expandir essa imagem ir distorcer, espalhando os pixels e deixando visvel isso.

Como no SVG os dados so escalveis a imagem pode ser redimensionada sem preocupao quanto a qualidade e distoro dessa imagem, sem falar que por ser apenas um arquivo XML, apenas texto, o custo de armazenamento muito inferior assim como o de exibio. Na internet ,por exemplo, se a imagem for grande dependendo da conexo do usurio 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 pgina. Muitas aplicaes mobile hoje j esto utilizando o SVG, pois como a maioria dos aplicativos no possuem um grande potencial de hardware, menos custoso exibir imagens e armazenar com essa extenso.

Comeando com SVG

Inicialmente se voc sabe XML voc sabe SVG, se voc no sabe XML estude antes de estudar SVG, vai ficar mais muito mais fcil assim. Estrutura bsica SVG
<?xml <!DOCTYPE <svg version="1.0" svg encoding="ISO-8859-1" "-//W3C//DTD SVG standalone="no"?> 20010904//EN"

PUBLIC

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="200px" viewBox="0 0 200 zoomAndPan="disable" <!-</svg> SVG code goes here height="50px" 50" > -->

O quadro acima mostra a estrutura bsica de um arquivo SVG, a partir dessa estrutura voc pode comear a descrever seu arquivo SVG.

width="200px" height="50px"

Os

parmetros

width

height

correspondem

largura

altura

(respectivamente) do arquivo SVG.

viewBox="0 0 200 50"

O parmetro viewBox utilizado para descrever a caixa de visualizao da imagem SVG, como se fosse a janela, um iframe que ira montar a imagem dentro. Abaixo segue um simples HelloWorld auto explicativo.

<?xml <!DOCTYPE

version="1.0" svg PUBLIC

encoding="ISO-8859-1" "-//W3C//DTD SVG

standalone="no"?> 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" width="200px" viewBox="0 0 zoomAndPan="disable" 200 xml:space="preserve" height="50px" 50" >

<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 <rect x="20" y="10" x="170" width="160" y="25" height="20" width="20" fill="green" height="20" opacity="0.5" fill="blue" /> />

</svg>

Para ver o cdigo acima sendo executado crie um arquivo no bloco de notas, cole o cdigo e salve como teste.svg e abra pelo seu navegador web. Caso voc no queira criar seus arquivos SVG na mo, existem vrias ferramentas que gero esses arquivos, um deles o prprio Corel Drawn que exporta a sua imagem como SVG e uma ferramenta muito boa e gratis o Inkscape