# 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](http://www.eventick.com.br/curso-de-svg)

### Contato

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