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
- 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 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.
- 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)