Este curso explora a linguagem SVG - formato gráfico vetorial e padrão W3C que pode ser criado usando XML ou por ferramentas gráficas, transformado com CSS, manipulado com JavaScript, usado em animações e embutido em HTML5. Tem recursos similares a Flash e pode ser usado em aplicações Web no desktop ou em tablets.
SVG é um padrão aberto especificado pelo World Wide Web Consortium (W3C), o mesmo consórcio responsável pelos padrões HTML, CSS, XML, XSL, PNG, DOM, dentre outros. É uma linguagem para desenvolver gráficos vetoriais em duas dimensões. Softwares populares como Adobe Illustrator e Corel Draw exportam formato SVG, mas o poder do SVG está na possibilidade de utilizá-lo para criar animações, gerá-lo dinamicamente e interagir com HTML, CSS, DOM e JavaScript para construir sites altamente interativos. Para isto é preciso conhecer e editar seu código. SVG tem se tornado cada vez mais popular com o advento de browsers e plataformas que o suportam, e com um suporte cada vez maior dos fabricantes. Embora gráficos, efeitos e animações também possam ser construídos com HTML 5 Canvas e CSS3, em várias situações, usar SVG pode ser bem mais simples e reutilizável.
Este curso foi construído para ensinar a construir gráficos em SVG usando XML. Ao final do curso o aluno será capaz de criar gráficos e animações usando SVG, ou abrir arquivos SVG gerados em softwares como Illustrator ou Corel Draw e editá-los, podendo acrescentar scripts e recursos de animação, ou ainda inclui-lo em linguagens de template (como XSLT) para gerar SVG com dados dinâmicos. O curso é prático, com demonstrações, exemplos e exercícios em cada módulo, que exploram os recursos apresentados. A maior parte dos exemplos apresentados rodam de forma nativa nos seguintes browsers: Google Chrome, Apple Safari, Opera, Firefox 4 (ou superior), Internet Explorer 9 (ou superior). Para browsers mais antigos é possível usar extensões e APIs em JavaScript com recursos limitados. Veja aqui alguns gráficos usados em exemplos, demonstrações e exercícios deste curso (funcionam se seu browser tiver suporte a SVG).
Ao final deste curso, o aluno terá o conhecimento necessário para:
- criar gráficos SVG usando um editor de textos
- organizar de forma eficiente a estrutura de um gráfico SVG
- desenhar figuras básicas, curvas, arcos e caminhos arbitrários
- desenhar, formatar e alinhar texto, em caminhos retos ou curvos
- incluir imagens PNG, GIF e JPEG
- aplicar filtros, gradientes, padrões e máscaras
- realizar transformação de coordenadas para girar, alterar o tamanho, cisalhar e deslocar objetos
- animar atributos de objetos para fazê-los mover pelo espaço, mudar de cor, girar, crescer, deformar
- fazer objetos responderem a eventos provocados pelo usuário
- acessar objetos usando o Document Object Model através de JavaScript, para criar gráficos interativos, animados e dinâmicos
- apresentar alternativas ao SVG em browsers que nao suportam SVG atraves da geracao de imagens alternativas, ou via bibliotecas JavaScript
- como aplicar estilos CSS ao mesmo tempo em SVG e HTML
- como incluir gráficos SVG em páginas Web, PDF e HTML5
- gerar dinamicamente gráficos SVG usando dados extraídos de XML com
transformação via templates XSLT (opcional)
- construir gráficos SVG que possam ser carregados em uma página como um
componente (similar ao uso de Flash), permitindo grande interatividade
e comunicação com formulários HTML e JavaScript (opcional)
- usar uma API como d3.js para gerar gráficos em SVG (opcional)
24, 32 ou 40 horas
- módulos 1 a 10: 24 horas
- módulo opcional 11: 8 horas
- módulos opcionais 12+13: 8 horas
* A carga-horária mínima inclui apenas os itens não-opcionais.
Web-designers, programadores, artistas gráficos. Este curso está disponível para turmas (grupos) fechados de até 12 alunos, ou a escolas que tenham interesse em realizar parceria para oferecer turmas abertas.
- O que é SVG: ferramentas, suporte e plataformas
- Cores de preenchimento, estilos e traços
- Figuras básicas: retângulos, círculos, elipses, polígonos e linhas
- Estrutura do documento: grupos, símbolos e marcadores
- Caminhos, curvas Bézier e arcos
- Texto, fontes e efeitos com texto
- Filtros e efeitos gráficos com filter, gradient, pattern, clipping, masks
- Viewbox e transformação de coordenadas
- Manipulação de componentes SVG com JavaScript e DOM
- Animação SVG com SMIL
- Geração de SVG usando XSLT (opcional)
- Programando componentes com o SVG DOM (opcional)
- Criando SVG via JavaScript com d3.js (opcional)
Saber usar (ler, criar, editar) XML; ter conhecimentos elementares de HTML, JavaScript e CSS; conhecimento elementar de XSLT e XPath é desejável para um dos módulos opcionais.
- Perguntas sobre SVG respondidas por Helder da Rocha no

- Tutorial completo disponível para download
- Código de exemplos e exercícios
- Código de aplicativo Orbitas (desenvolvido com SVG) no GitHub
- Exemplos de gráficos SVG desenvolvidos no curso