SVG - Scalable Vector Graphics

24 a 40h*

Descrição

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)

Carga-horária

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.

Público-alvo

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.

Programa

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

Pré-requisitos

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.

Extras

  1. Perguntas sobre SVG respondidas por Helder da Rocha no StackOverflow
  2. Tutorial completo disponível para download
  3. Código de exemplos e exercícios
  4. Código de aplicativo Orbitas (desenvolvido com SVG) no GitHub
  5. Exemplos de gráficos SVG desenvolvidos no curso

Cursos relacionados