Sobre este documento

Escrito em setembro de 2010. Última atualização janeiro de 2011 (o curso relacionado pode abordar assuntos que não estão presentes neste tutorial).

Aborda SVG 1.1 e perfis mobile. Contém exemplos e exercícios. Código-fonte disponível em Repositório .

Download de tutorial completo

• Ler online em
• Ler ou baixar em
• Baixar PDF (52.5 MB)

Download de capítulos individuais (PDF)

0. O que é SVG: ferramentas, suporte e plataformas
1. Cores de preenchimento, estilos e traços
2. Figuras básicas: retângulos, círculos, elipses, polígonos e linhas
3. Estrutura do documento: grupos, símbolos e marcadores
4. Caminhos, curvas Bézier e arcos
5. Texto, fontes e efeitos com texto
6. Filtros e efeitos gráficos com filter, gradient, pattern, clipping, masks
7. Viewbox e transformação de coordenadas
8. Manipulação de componentes SVG com JavaScript e DOM
9. Animação SVG com SMIL
10. Geração de SVG com XSLT

Extras

• Perguntas sobre SVG respondidas por Helder da Rocha no
• Código-fonte no
• Aplicativo Órbitas escrito por Helder da Rocha com SVG
• Contrate um curso!
• Especificação oficial do SVG 1.1 na W3C
• Projeto d3.js