aandrepf / curso-de-svg

Contents from my course about SVG

Curso de SVG

Esse repositório servirá para armazenar todo o conteúdo passado durante o curso de SVG.

Objetivo

O curso tem como objetivo passar desde os conceitos básicos do SVG até os mais avançados, permitindo criar basicamente o que se quiser com SVG. O curso será desenvolvido em pequenos módulos com vídeos curtos, facilitando assim o aprendizado e o desenvolvimento do aluno, visando sempre uma didática simples, concisa e bastante aplicada a prática de trabalho.

Existirão alguns projetos ao decorrer do curso, para aplicarmos os conceitos aprendidos, fazendo com que o aluno perceba sua evolução e também comece a trabalhar mais em sua parte criativa e com código.

Instrutor

Olá! Eu sou Willian. Atualmente Freelance Web Engineer, onde ajudo a criar novas experiências e tendências para Web através de vários projetos no Brasil e fora dele. Já trabalhei também em empresas como a Globo.com, HUGE e Queremos, sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

Ementa

• Introdução ao SVG

  • Introdução do Curso
  • História
  • O que é?
  • Por que usar?
  • Quando usar?
  • Como criar?
  • Onde baixar?

• Como usar e suas vantagens/desvantagens?

  • Como imagem
  • Como background-img
  • Via iframe/object/embed
  • Como Data URIs
  • Inline SVG

• A estrutura do SVG

  • Plano cartesiano
  • ViewBox e ViewPort
  • preserveAspectRatio
  • Formas Básicas
  • Elemento Path
  • Elementos Containers

• Estilizando o SVG

  • Métodos para estilizar
  • Peso das Propriedades
  • Fill e Stroke
  • Colorindo ícones com mais de uma cor

• Projeto #1 - Construindo um SVG responsivo e adaptativo

  • Tornando o SVG Fluido
  • Tornando o SVG adaptativo

• Sistemas de Ícones em SVG

  • Fixando o uso de ícones com Symbol
  • Usando o Icomoon

• Projeto #2 - Criando um boilerplate em Gulp para gerar sprites

• Projeto #3 - Criando um loader com SVG e CSS Animations

  • Editando e preparando o visual do nosso loader
  • Usando Keyframes para animar

• Animações SVG com SMIL

  • Entendendo o que é SMIL
  • Criando uma animação simples
  • Famoso Morph Path
  • Especificando um caminho para a animação

• Manipulando SVG com JS

  • Utilizando JS para estilizar e criar novos elementos
  • Algumas bibliotecas aconselhadas

• Criando animações com as propriedades de Stroke

  • Criando um loader animado usando propriedades do stroke
  • Fazendo o efeito de desenhar
  • Usando o scroll para controlar o desenho

• Filtros SVG

  • Alguns tipos de filtros
  • Criando uma animação com filtros

• Acessibilidade no SVG

  • Dicas e informações para deixar tudo mais acessivel

• Performance

  • Criando e Exportando com Illustrator
  • Usando ferramentas para otimizar

• Busque Conhecimento

  • Projeto Awesome-SVG e outros
  • Agradecimentos

Certificado

Todos os alunos que terminarem o curso irão receber um certificado de conclusão

Compra

Se você já curtiu a ementa e/ou conhece o meu trabalho e quer me apoiar.

Link para compra

Contato

Qualquer dúvida ou curiosidade, é só mandar um email para [email protected] ou então falar comigo através de qualquer rede social. Até mesmo uma issue aqui nesse repositório =)