Play SVG! 
Utilizando vetores na web
Olá! 
Eu sou Willian! 
@willian_justen 
github.com/willianjusten
Tipos de imagem
Scalable Vector Graphics (SVG) 
é um formato de imagem baseado 
numa estrutura em XML.
Estrutura 
<svg> 
<circle 
class="eye" 
cx="100" 
cy="100" 
r="200" 
stroke-width="3" 
fill="#5A72C3"> 
</svg>
Elementos SVG 
<line/> <rect/> 
<polyline/> <polygon/> 
<ellipse/> 
<circle/> 
<path/>
Criar desenhos complexos?
Por que usar SVG?
Ricos em detalhes e cores 
http://designmodo.com/flat/
Interativo e estilizável via CSS 
http://tutsplus.github.io/Styling-Iconic/styling/index.html
Responsivo 
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
Ilustrações animadas 
http://css-tricks.com/svg-line-animation-works/ 
http://panizzon.ind.br/
Representação Gráfica 
http://bl.ocks.org/Caged/6476579
Efeitos e Filtros 
http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
Boa compatibilidade 
http://caniuse.com/#search=svg
Mais qualidades 
● Podem ser minificados (Gzip) 
● Permitem uma melhor acessibilidade 
● Permite adições de classes para c...
Mas e como usar?
Adicionando ao html 
Tag HTML Interatividade 
<img src="imagem.svg" alt=""/> Não 
<object type="image/svg+xml" data="image...
Bibliotecas
Raphael.js 
● Criado por Dmitry Baranovskiy (Senior Enginner na Adobe) 
● Primeira biblioteca para manipulação de SVG 
● F...
Snap SVG 
● Criado por Dmitry Baranovskiy (Senior Enginner na Adobe) 
● Feito para ter uma API mais intuitiva e prática na...
D3 
● Criado por Mike Bostock 
● Utilizado para trabalhar em cima de dados, criando gráficos, tabelas, moléculas, etc. 
● ...
SVG.JS 
● Criado por Wout Firiens 
● Bastante indicado para clipping masks 
● Extremamente pequeno (11Kb)
Performance e Fallbacks 
SVGO Grumpicon
Dúvidas? 
willian.justen@queremos.com.br 
github.com/willianjusten
Play svg! Utilizando vetores na web
Play svg! Utilizando vetores na web
Próximos SlideShares
Carregando em…5
×

Play svg! Utilizando vetores na web

1.284 visualizações

Publicada em

Slides da minha palestra sobre svg no Frontin Bahia 2014

Publicada em: Internet
  • Seja o primeiro a comentar

Play svg! Utilizando vetores na web

  1. 1. Play SVG! Utilizando vetores na web
  2. 2. Olá! Eu sou Willian! @willian_justen github.com/willianjusten
  3. 3. Tipos de imagem
  4. 4. Scalable Vector Graphics (SVG) é um formato de imagem baseado numa estrutura em XML.
  5. 5. Estrutura <svg> <circle class="eye" cx="100" cy="100" r="200" stroke-width="3" fill="#5A72C3"> </svg>
  6. 6. Elementos SVG <line/> <rect/> <polyline/> <polygon/> <ellipse/> <circle/> <path/>
  7. 7. Criar desenhos complexos?
  8. 8. Por que usar SVG?
  9. 9. Ricos em detalhes e cores http://designmodo.com/flat/
  10. 10. Interativo e estilizável via CSS http://tutsplus.github.io/Styling-Iconic/styling/index.html
  11. 11. Responsivo http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
  12. 12. Ilustrações animadas http://css-tricks.com/svg-line-animation-works/ http://panizzon.ind.br/
  13. 13. Representação Gráfica http://bl.ocks.org/Caged/6476579
  14. 14. Efeitos e Filtros http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
  15. 15. Boa compatibilidade http://caniuse.com/#search=svg
  16. 16. Mais qualidades ● Podem ser minificados (Gzip) ● Permitem uma melhor acessibilidade ● Permite adições de classes para cada elemento desejado ● E mais...
  17. 17. Mas e como usar?
  18. 18. Adicionando ao html Tag HTML Interatividade <img src="imagem.svg" alt=""/> Não <object type="image/svg+xml" data="imagem.svg"></object> Sim <embed type="image/svg+xml" src="imagem.svg" /> Sim <iframe src="imagem.svg"></iframe> Sim <svg> conteudo </svg> <!-- HTML5 -- > Sim .elemento { background-image: url("imagem.svg") } Não
  19. 19. Bibliotecas
  20. 20. Raphael.js ● Criado por Dmitry Baranovskiy (Senior Enginner na Adobe) ● Primeira biblioteca para manipulação de SVG ● Feito para ter maior compatibilidade com Browsers mais antigos (iE6+) ● Biblioteca para manipulações mais simples, com poucas animações
  21. 21. Snap SVG ● Criado por Dmitry Baranovskiy (Senior Enginner na Adobe) ● Feito para ter uma API mais intuitiva e prática na manipulação ● Permite animações mais avançadas ● Possui boa performance e trabalha bem com outras bibliotecas JS (Zepto e Jquery)
  22. 22. D3 ● Criado por Mike Bostock ● Utilizado para trabalhar em cima de dados, criando gráficos, tabelas, moléculas, etc. ● Trabalha diretamente com o DOM ● Funciona muito bem com outras bibliotecas (Zepto e JQuery) e trabalha com um grande número de informações
  23. 23. SVG.JS ● Criado por Wout Firiens ● Bastante indicado para clipping masks ● Extremamente pequeno (11Kb)
  24. 24. Performance e Fallbacks SVGO Grumpicon
  25. 25. Dúvidas? willian.justen@queremos.com.br github.com/willianjusten

×