SVG: Gráficos Vetoriais Escaláveis

Iniciando Este tutorial irá ajudá-lo a começar a trabalhar com SVG.

Gráficos Vetoriais Escaláveis (SVG) é uma linguagem de marcação XML para descrever gráficos vetoriais bidimensionais. Essencialmente, SVG é para gráficos o que o XHTML é para texto.

SVG é similar em escopo à tecnologia Flash, propriedade da Adobe, mas se distingue por ser uma recomendação da W3C, ou seja, um padrão, e por ser baseado em XML e não em um formato binário fechado. O SVG foi criado para funcionar com outros padrões da W3C, tais como CSS, DOM e SMIL.

Documentação

Referência de elementos SVG

Veja detalhes sobre cada elemento SVG.

Referência de atributos SVG

Veja detalhes sobre cada atributo SVG.

Referência da API de DOM do SVG

Veja detalhes sobre toda a API de DOM do SVG.

Melhorando o conteúdo HTML

O SVG funciona juntamente com HTML, CSS e JavaScript. Use o SVG para melhorar uma página comum HTML ou uma aplicação web.

SVG na Mozilla

Notas e informações sobre como o SVG é implementado na Mozilla.

Ferramentas

Exemplos

Animação e interações

Assim como o HTML, o SVG tem um modelo de documento (DOM), eventos e é acessível por JavaScript. Isto permite aos desenvolvedores criar animações e imagens interativas.

  • Algumas imagens SVG impressionantes em svg-wow.org
  • Extensão do Firefox (Grafox) para adicionar suporte a um subconjunto de animação SMIL
  • Manipulação interativa de fotos
  • Transformações HTML usando foreignObject do SVG
  • Arte animada

Mapeamentos, gráficos, jogos & experimentos 3D

Embora o SVG ainda tenha de percorrer um longo caminho para prover conteúdo web avançado, aqui estão alguns exemplos de uso intensivo de SVG.