Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ícones SVG da Teoria a Prática

Í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

Db94547ac8012906af2f81c4589651cd?s=128

Willian Justen

May 14, 2016
Tweet

More Decks by Willian Justen

Other Decks in Technology

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

  3. None
  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

  9. None
  10. None
  11. Vamos usar fontes!

  12. None
  13. None
  14. None
  15. None
  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?

  26. None
  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?

  30. None
  31. None
  32. Menos blablabla quero código!

  33. Quer aprender mais? http://bit.ly/pre-venda-svg