SVG, imagens vetoriais em aplicações Web

SGV, ou Scalable Vector Graphics (Gráficos Vetoriais Escaláveis) é uma linguagem baseada em XML, projetada para a criaação de gráficos vetoriais estáticos e dinâmicos, ou animados através de comportamentos JavaScript/DOM. A linguagem foi criada pelo W3C e também pode ser manipulada com ASP, PHP e JSP.

Essa tecnologia permite três tipos de objetos gráficos:

figuras geométricas vetoriais;
imagens raster/bitmap;
texto.

A grande vantagem do formato SVG, é que não há perda de qualidade nas imagens quando ampliadas, ao contrário do que acontece com os formatos convencionais (por pixels), como: JPG, BMP, GIF e PNG. Também é uma linguagem Open Source. Nenhuma marca tem direitos exclusivos sob a utilização da mesma, e não exige a legalização de determinados softwares/aplicativos.

Onde está a graça?

Na possibilidade de criação de gréficos e figuras geométricas de forma dinâmica. Jé imaginou a criação de gráfcos a partir de valores vindos de bancos de dados? Para se ter uma idéia, o Google Analytics faz algo parecido, porém utilizando a tecnologia Flash.

Exemplo de gráfico gerado a partir de dados fornecidos pelo usuário:

No caso acima, o grafico foi gerado depois de eu setar o número 40 para o campo de canditado 1, e 100 para candidato 2. Se eu tivesse setado 60 para o campo candidato 1, a porcentagem cresceria, imediatamente.

Infelizmente, não são todos os browsers que suportam SVG. Atualmente, talvez os únicos que suportam: Firefox e Opera

Saiba mais sobre Gráficos Vetoriais Escaláveis.

Tags: Web Design e CSS

Este artigo foi postado em Sábado, set 2nd, 2006 às 8:49 PM na categoria Web Design e CSS. Você pode ver todos os comentários deste artigo, cadastrando em seu navegador ou software, o endereço Feed: RSS 2.0.

Deixe seu comentário logo abaixo, ou envie trackback.

12 comentários em “SVG, imagens vetoriais em aplicações Web”

Joe Edman:
set 3rd, 2006 at 2:45 AM
Nunca tinha visto mais gordo!
zidane:
set 3rd, 2006 at 12:08 PM
Quando eu li esta notícia, a dois anos, pensei: “será uma grande revalução na web”. Já imaginei a Web fazendo de imagens e gráficos, o que os editores visuais fazem com vetores no CorelDraw. Mas até hoje, é difícil ver a utilização desta tecnologia.

Sou do tipo que não importa de usar tecnologia não difundida, mas se for o caso de dar soluções… E como você disse, gerar esses gráficos em serviços que fornecem estatística, é uma boa. Essa idéia de editar gráficos por códigos de texto é muito legal, mas difícil!

Uma vez tentei aprender, e acabei desistindo… rs

Inté
Rael B. Riolino:
set 3rd, 2006 at 3:57 PM
Infelizmente a incompatibilidade do IE (pra variar) já é causa suficiênte para não adotar esta técnica… Pois infelizmente ele dominia o mercado…

O jeito é usar o flash mesmo. embora precise do plugin, é algo bem mais comum, e pode-se obter os mesmos resultados…
Tiago Celestino:
set 3rd, 2006 at 5:56 PM
Legal Thalis. Já tinha lido algo sobre o SVG no Tableless.com.br, mas é sempre bom dá uma relembrada
Thalis Valle:
set 3rd, 2006 at 6:36 PM
Rael, é verdade. O IE dominia o mercado. Mas se for comparar as estatisticas do share voltado ao desenvolvimento/design de internet, houve um crescimento muito grande do Mozilla/Firefoz. A Microsoft sá forçada a adaptar-se, enquanto todos os outro browser vem trabalhando pra isso.

O IE 7 é apenas o começo disso. Espero que eles façam um browser de verdade, ainda. Coisa que eu duvido.
Maicon Junches:
set 4th, 2006 at 9:50 AM
Poxa, faz um tempinho mas eu já brinquei disso em um curso =) …

Muito interessante mesmo, vou voltar a olhar isso.

Abração!
Eugenio Grigolon:
set 4th, 2006 at 11:19 AM
Ótimo artigo Thalis. Acho que imagens vetorizadas são as melhores para se aplicar em web sites. O mais legal é o que você mesmo disse, utilizar em gráficos.
Gostei muito desse artigo, parabéns!
tato:
set 4th, 2006 at 1:39 PM
Eu ja tinha lido sobre isso, mas nao dei importancia… agora que voce escreveu esse artigo, eu saquei o qto pode ser bom a sua utilização. a parte ruim é por a mao na massa, que é sempre complicado
Carlos Eduardo:
set 4th, 2006 at 5:30 PM
Já havia tido contato no ano passado… Quando descobri as possibilidades, realmente me impressionei!

Porque não se trata de um arquivo, mas de um código que “cria” a imagem vetorial, ou seja, não há a necessidade de hospedar um arquivo para que seja aberto na tela, simplesmente… vetor! Hehe…

O legal é que editores como Adobe Illustrator possuem suporte. Desta forma você pode criar seu vetor e mandar o programa salvar em SVG pronto
dany:
set 4th, 2006 at 7:23 PM
O illustrator cria SVG, mas não os possibilita de forma dinamica. O fato mais importante do SVG é criar imagens que podem ser editadas via codigo, dinamicamente. Nao há nexessidade de imagem estatica. É preferivel usar GIF ou PNG.
Phillipe Marcell:
set 4th, 2006 at 8:40 PM
Sei lá, isso ainda me parece estar engatinhando. Mas começa assim, e daqui a pouco temos um webbased Corel Draw. Já pensou?! =-D
Mariana:
set 5th, 2006 at 4:52 PM
Aê Thalis, passando p/ participar do blog!! hehehe
conforme prometido

Gostei da idéia dos gráficos…bem mais prático!
o blog tah 10,Thalis! Parabéns pelo artigo.