Introdução ao SVG
- Introdução
- História
- O que é?
- Por que usar?
- Quando usar?
- Como criar?
- Onde baixar?
Como usar e suas vantagens/desvantagens?
- Como imagem
- Como background-image
- Via iframe/object/embed
- Como Data URIs
- Como inline
A estrutura do SVG
- Plano Cartesiano
- ViewBox e Viewport
- preserveAspectRatio
- Formas Básicas
- O elemento Path
- Elementos Containers
Estilizando o SVG
- Métodos para estilizar pt1
- Métodos para estilizar pt2
- 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 Responsivo e 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
- Criando nosso boilerplate
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 e Agradecimentos
- Projeto Awesome-SVG, outros e agradecimentos
