Fechar

SVG x Canvas: Entenda as diferenças

Por | 9 de janeiro de 2009 | Internet 3 comentários

Olá pessoal!

SVG com Inkscape

SVG com Inkscape

Estou desenvolvendo um projeto de iniciação científica onde o objetivo está em desenvolver uma aplicação de estatísticas empresariais, em RIA, livre, totalmente padronizada, e que atinja níveis de interação com os gráficos equivalentes a uma aplicação desenvolvida em Adobe Flash.

Pesquisando sobre as possibilidades não precisei garimpar muito, já que na página do próprio W3C Schools nos deparamos com o SVG.

SVG – Scalable Vector Graphics

O Scalable Vector Graphics é um padrão do W3C para gráficos vetoriais para a web baseado em XML. Vem sendo utilizado por editores vetoriais de renome, e inclusive o editor aberto Inkscape adota o SVG como formato nativo.

A maioria dos navegadores do mercado (há algumas excessões) são capazes de reproduzir SVG. E inclusive, há padrões específicos para renderizações em dispositivos móveis. E ainda, pode-se manusear sua estrutura através do DOM e tornar as imagens SVG animadas através de um pouco de Javascript.

Para entender melhor o SVG, você pode dar uma olhada no Mozilla Developer Center e ver alguns exemplos incríveis de SVG.

Pesquisando mais sobre o assunto, no Opera Developer Community me deparei com um outro recurso que até então nunca tinha ouvido falar, o elemento Canvas.

CANVAS

O elemento Canvas é uma das novidades presentes nas especificações da HTML 5.

Os bons navegadores já possuem suporte a algumas recomendações da HTML 5, inclusive este recurso foi primeiramente implementado pelo Safari. No Mozilla Developer Center somos apresentados a alguns tutoriais de Canvas e exemplos de interações com Javascript.

Admito que não sei muito sobre este, por isso decidí procurar alguém que fizesse um comparativo entre os dois (SVG e Canvas) para poder entender qual o “campo de ação” de ambos.

SCALABLE VECTOR GRAPHICS X CANVAS ELEMENT

Foi aí que encontrei este incrível conteúdo, criado por Vladimir Vuki?evi?, que faz uma comparação amistosa entre eles e apresenta suas principais vantagens.

CONSIDERAÇÕES FINAIS

Na minha opinião, vou continuar meu projeto focando o SVG. Isso devido ao fato de optar pelo desenvolvimento com xHTML e também de que SVG é um formato e não um recurso puramente da HTML.

Serei capaz de construir “templates” dos gráficos com o Inkscape e permitir que a aplicação o “alimente” através de serializações XML.

Emulador de MSX com Javascript e Canvas

Emulador de MSX com Javascript e Canvas

Não desmerecendo o Canvas, que é sem dúvida mais simples, rico e prático de construir e interagir que o SVG. As imagens apresentadas no documento do Vladimir e nos portais de desenvolvimento do Mozilla e do Opera deixam qualquer um de “queixo caído”. Com certeza se o foco da aplicação fosse outro, optaria pelo Canvas.

Independente da minha ou da sua preferência, é bom saber que a Web está caminhando para um universo rico sem se desprender de seus padrões.

Até a próxima…

Marcadores: , , ,

Outros conteúdos interessantes

Confira os 3 comentários deixados Comentar

  1. Jackson via Rec6
    15:13 em 9 de janeiro de 2009
    1

    Profissionais TI » SVG x Canvas: Entenda as diferenças…

    O Scalable Vector Graphics é um padrão do W3C para gráficos vetoriais para a web baseado em XML. Vem sendo utilizado por editores vetoriais de renome, e inclusive o editor aberto Inkscape adota o SVG como formato nativo….

  2. border-radius: Caixas com cantos arredondados | Profissionais TI
    17:12 em 22 de fevereiro de 2009
    2

    [...] Opera isso não se aplica. Há várias outras formas de desenhar cantos, inclusive utilizando SVG e Canvas. No Dev.Opera podemos ver um exemplo de input com cantos arredondados através de SVG. Border [...]

  3. Mochikit: A framework Javascript para Pythonistas | Profissionais TI
    8:35 em 8 de abril de 2009
    3

    [...] Estou com um PROINPES que tem por objetivo gerar um software de gráficos estatísticos, que siga alguns fundamentos de BI, com SVG. [...]


Deixe seu comentário!