Ícones SVG da Teoria a Prática

Uma pequena apresentação sobre ícones SVG, sua importância e vantagens.

Código feito = https://github.com/willianjusten/front-in-rio-16

Transcript

1. Ícones Da teoria a prática http://willianjusten.com.br
2. Willian Justen github.com/willianjusten twitter.com/Willian_justen facebook.com/willjusten willianjusten.com.br Sobre mim
4. O que é SVG?
5. Scalable Vector Graphics (SVG) É uma imagem vetorial no formato XML que suporta interatividade e animações.
6. Por que usar?
7. Devices e mais Devices
8. Densidade de Pixel
11. Vamos usar fontes!
16. Use SVG!
17. SVG é amor
18. Mas é só para isso?
19. Interativo e Estilizáveis via CSS
20. Responsivos e Adaptativos
21. Animações avançadas
22. Perfeito para Gráficos
23. Efeitos e Filtros
24. E mais… • Ótimo Suporte (até o IE8!) • Podem ser minificados (GZIP) • Boa Acessibilidade • Possui árvore no DOM • É código! =D
25. Quando usar?
27. Algumas formas de usar ícones • Inline SVG • SVG individual com <img> • SVG com background-image do CSS • SVG CSS Sprite com <view> • SVG Symbol Sprite com <use>
28. Vantagens do <use> • Elimina várias chamadas HTTP • Cria e usa um único asset cacheável • Carregamento mais rápido devido as duas vantagens acima • As propriedades do SVG podem ser editadas via CSS • O SVG pode ser animado com CSS ou JS
29. Como funciona?
32. Menos blablabla quero código!
33. Quer aprender mais? http://bit.ly/pre-venda-svg