Play svg! Utilizando vetores na web

download Play svg! Utilizando vetores na web

of 27

  • date post

    22-Nov-2014
  • Category

    Internet

  • view

    158
  • download

    0

Embed Size (px)

description

Slides da minha palestra sobre svg no Frontin Bahia 2014

Transcript of Play svg! Utilizando vetores na web

  • 1. Play SVG! Utilizando vetores na web
  • 2. Ol! Eu sou Willian! @willian_justen github.com/willianjusten
  • 3. Tipos de imagem
  • 4. Scalable Vector Graphics (SVG) um formato de imagem baseado numa estrutura em XML.
  • 5. Estrutura
  • 6. Elementos SVG
  • 7. Criar desenhos complexos?
  • 8. Por que usar SVG?
  • 9. Ricos em detalhes e cores http://designmodo.com/flat/
  • 10. Interativo e estilizvel via CSS http://tutsplus.github.io/Styling-Iconic/styling/index.html
  • 11. Responsivo http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
  • 12. Ilustraes animadas http://css-tricks.com/svg-line-animation-works/ http://panizzon.ind.br/
  • 13. Representao Grfica http://bl.ocks.org/Caged/6476579
  • 14. Efeitos e Filtros http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
  • 15. Boa compatibilidade http://caniuse.com/#search=svg
  • 16. Mais qualidades Podem ser minificados (Gzip) Permitem uma melhor acessibilidade Permite adies de classes para cada elemento desejado E mais...
  • 17. Mas e como usar?
  • 18. Adicionando ao html Tag HTML Interatividade No Sim Sim Sim conteudo