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çãoXML 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 umarecomendaçã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 daW3C, tais comoCSS,DOM eSMIL.

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.

Como o SVG e implementado no Firefox
Tutorial sobre como usá-lo
SVG em XHTML

Ferramentas

Exemplos

GoogleMaps (route overlay) &Docs (spreadsheet charting)
Menus bubble SVG
Orientações para autoria SVG
Uma visão geral doProjeto SVG da Mozilla
Perguntas frequentes sobre SVG e Mozilla
Slides e demos da palestraSVG and Mozilla no SVG Open 2009
SVG como uma imagem
Animação SVG com SMIL
Leão,Borboleta &Tigre
Galeria de arte SVG
Mais exemplos (SVG Samples croczilla.com,carto.net)

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 emsvg-wow.org
Extensão do Firefox (Grafox) para adicionar suporte a um subconjunto de animação SMIL
Manipulação interativa defotos
Transformações HTML usandoforeignObject do SVG
Arte animada