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.

sgv01.gif

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:

svg2.jpg

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.

Tema Portal WordPress - PortalPress


12 Responses to “SVG, imagens vetoriais em aplicações Web”

  1. zidane

    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é

    Reply
  2. Rael B. Riolino

    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…

    Reply
  3. Thalis Valle

    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.

    Reply
  4. Eugenio Grigolon

    Ó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!

    Reply
  5. tato

    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

    Reply
  6. Carlos Eduardo

    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 🙂

    Reply
  7. dany

    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.

    Reply
  8. Mariana

    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.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>