Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

Play svg! Utilizando vetores na web

1,695 views

Published on

Slides da minha palestra sobre svg no Frontin Bahia 2014

Published in: Internet
  • Be the first to comment

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

×