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 (en-US) 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 (en-US) e SMIL.

Documentação

Referência de elementos SVG

Veja detalhes sobre cada elemento SVG.

Referência de atributos SVG (en-US)

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.