Este tutorial irá ajudá-lo a começar a trabalhar com SVG.
Scalable Vector Graphics (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, 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.
Comunidade
- Ver fóruns da Mozilla...
Ferramentas
- Suíte de Teste SVG
- Validador SVG (Descontinuado)
- Mais Ferramentas...
- Outros recursos: XML, CSS, DOM, Canvas
Exemplos
- Google Maps (route overlay) & Docs (spreadsheet charting)
- Menus bubble SVG
- Orientações para autoria SVG
- Uma visão geral do Projeto SVG da Mozilla
- Perguntas frequentes sobre SVG e Mozilla
- Slides e demos da palestra "SVG 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 "colírios para os olhos" em svg-wow.org
- Extensão do Firefox (Grafox) para adicionar suporte a um subset de animação SMIL
- Manipulação interativa de fotos
- Transformações HTML usando
foreignObjectdo SVG - Arte animada
Mapeamentos, gráficos, jogos & experimentos 3D
Embora o SVG possa ter de percorrer um longo caminho para prover conteúdo web avançado, aqui estão alguns exemplos de usu pesado de SVG.
- Um Tetris SVG & Connect 4
- Find the State
- Mapa da população dos EUA
- 3D box & 3D boxes
- jVectorMap (mapas interativos para visualização de dados)
