Entendendo e usando o SVG
Manipular imagens vetorizadas na web é facil com SVG, entenda nesse artigo o que é o SVG, o que ele pode lhe proporcionar em tempo de carregamento de imagens de alta qualidade e animações em alguns minutos.
O que é SVG?
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
Estrutura básica 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.<?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>
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.
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.<?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>
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. http://inkscape.org/
Mais informações sobre a ferramenta e exemplos svg em: http://wiki.softwarelivre.org/InkscapeBrasil/SVG
Bons estudos.
Hiarlay Araújo
Graduando do curso de Tecnologia em Análise e Desenvolvimento de Sistemas (IFPB), pós-graduando do curso de Especialização em Desenvolvimento de Soluções Web com Utilizando a Plataforma JavaEE(FJN), participou de bolsa iniciação cientifica CNPq com projeto do Laboratório Virtual de Eletrônica de Pot...
