Aprendendo SVG Do Início ao Avançado

/5. Projeto #1 - Construindo um SVG responsivo e adaptativo/

1. Tornando o SVG Fluido.mp4

1.1 Logo do Starbucks em SVG.html

1.2 Código feito.html

1.3 Exemplo Online.html

2. Tornando o SVG Responsivo e Adaptativo.mp4

2.1 Material para logo da Disney.html

/1. Introdução ao SVG/

1.1 Repositório do Curso com a Ementa.html

1.2 Slack do Curso.html

1.3 Projeto Awesome SVG.html

1.4 Meu blog com vários posts sobre SVG.html

2. História.mp4

2.1 Código da Aula.html

2.2 Slides Online.html

3. O que é.mp4

4. Por que usar.mp4

4.1 Bubble chart feito em D3.html

4.2 Ícones em SVG.html

4.3 Exemplo da Lâmpada com estado Hover.html

4.4 Garrafas sendo formadas na tela.html

4.5 Tabela de Compatibilidade.html

4.6 Logo da BrazilJS Weekly Responsiva.html

4.7 Filtros em SVG pela WebPlatform.html

5. Quando usar.mp4

6. Como criar.mp4

6.1 Concepts.html

6.2 Webcode.html

6.3 Sketch.html

6.4 Inkscape.html

6.5 Autodesk Graphic.html

6.6 Illustrator.html

7. Onde baixar.mp4

7.1 Shutterstock.html

7.2 Iconic.html

7.3 Flaticon.html

7.4 Vecteezy.html

7.5 Iconmonstr.html

7.6 Lista na Awesome SVG com mais links.html

7.7 Icomoon.html

7.8 Material Design Icons.html

7.9 SVG Cuts.html

1. Introdução.mp4

/2. Como usar e suas vantagensdesvantagens/

1. Como imagem.mp4

1.1 Código Feito.html

1.2 Exemplo Online.html

2. Como background-image.mp4

2.1 Código Feito.html

2.2 Exemplo Online.html

3. Via iframeobjectembed.mp4

3.1 Código feito.html

3.2 Exemplo Online.html

4. Como Data URIs.mp4

4.1 Código feito.html

4.2 Exemplo Online.html

5. Como inline.mp4

5.1 Código feito.html

5.2 Exemplo Online.html

/3. A estrutura do SVG/

1. Plano Cartesiano.mp4

2. ViewBox e Viewport.mp4

2.1 Código feito.html

2.2 Exemplo Online.html

3. preserveAspectRatio.mp4

3.1 Exemplo Online.html

3.2 Código feito.html

4. Formas Básicas.mp4

4.1 Exemplo Online.html

4.2 Código feito.html

5. O elemento Path.mp4

5.1 Código feito.html

5.2 Exemplo Online.html

6. Elementos Containers.mp4

6.1 Exemplo Online.html

6.2 Código feito.html

/4. Estilizando o SVG/

1. Métodos para estilizar pt1.mp4

1.1 Link da W3C com a lista de propriedades do SVG 1.1.html

2. Métodos para estilizar pt2.mp4

2.1 Código feito.html

2.2 Exemplo Online.html

3. Peso das propriedades.mp4

3.1 Exemplo Online.html

3.2 Código feito.html

4. Fill e Stroke.mp4

4.1 Exemplo Online.html

4.2 Código feito.html

5. Colorindo ícones com mais de uma cor.mp4

5.1 Exemplo Online.html

5.2 Flat Color Icons.html

5.3 Código feito.html

/6. Sistemas de Ícones em SVG/

1. Fixando o uso de ícones com Symbol.mp4

1.1 Código feito.html

1.2 Exemplo Online.html

2. Usando o Icomoon.mp4

2.1 Código gerado pelo Icomoon.html

2.2 Exemplo com Symbol Interno.html

2.3 Exemplo com Symbol Externo.html

/7. Projeto #2 - Criando um boilerplate em Gulp para gerar sprites/

1. Criando nosso boilerplate.mp4

1.1 Exemplo Online.html

1.2 Código feito.html

/8. Projeto #3 - Criando um loader com SVG e CSS Animations/

1. Editando e preparando o visual do nosso loader.mp4

1.1 Exemplo Online.html

1.2 Código Online.html

2. Usando Keyframes para animar.mp4

2.1 Código feito.html

2.2 Tutorial sobre Keyframes pela MDN.html

2.3 Exemplo Online.html

/9. Animações SVG com SMIL/

1. Entendendo o que é SMIL.mp4

2. Criando uma animação simples.mp4

2.1 Código feito.html

2.2 Exemplo Online.html

3. Famoso Morph Path.mp4

3.1 Código feito.html

3.2 Exemplo Online.html

4. Especificando um caminho para a animação.mp4

4.1 Exemplo Online.html

4.2 Código feito.html

/10. Manipulando SVG com JS/

1. Utilizando JS para estilizar e criar novos elementos.mp4

1.1 Exemplo Online.html

1.2 Código feito.html

2. Algumas bibliotecas aconselhadas.mp4

2.1 Mais Bibliotecas - Awesome SVG.html

2.2 D3.js.html

2.3 Greensock.html

2.4 Snap SVG.html

2.5 Bonsai.js.html

/11. Criando animações com as propriedades de Stroke/

1. Criando um loader animado usando propriedades do stroke.mp4

1.1 Código feito.html

1.2 Exemplo Online.html

2. Fazendo o efeito de desenhar.mp4

2.1 Código feito.html

2.2 Exemplo Online.html

3. Usando o scroll para controlar o desenho.mp4

3.1 Exemplo Online.html

3.2 Código feito.html

/12. Filtros SVG/

1. Alguns tipos de filtros.mp4

1.1 Link Oficial sobre filtros da W3C.html

2. Criando uma animação com filtros.mp4

2.1 Exemplo Online.html

2.2 Código Feito.html

/13. Acessibilidade no SVG/

1. Dicas e informações para deixar tudo mais acessivel.mp4

1.1 Links sobre Acessibilidade.html

/14. Performance/

1. Criando e Exportando com Illustrator.mp4

1.1 Mais dicas de como exportar.html

2. Usando ferramentas para otimizar.mp4

2.1 Spritesh - CLI para criar sprites.html

2.2 Grunt SVGO.html

2.3 CLI do SVGO.html

2.4 Gulp SVGO.html

2.5 Site do SVGOMG.html

/15. Busque Conhecimento e Agradecimentos/

1. Projeto Awesome-SVG, outros e agradecimentos.mp4

1.1 Meu Blog.html

1.2 Site do CSS-Tricks.html

1.3 Awesome SVG.html

1.4 Blog da Sara Soueidan.html

1.5 Site do Codrops.html

Total files 153