O documento discute o uso de SVG (Scalable Vector Graphics) na web, incluindo seus benefícios como ser responsivo, permitir ilustrações animadas e interatividade. Também apresenta diferentes maneiras de adicionar SVG ao HTML, como <img>, <object> e <iframe>, além de mencionar bibliotecas JavaScript populares para manipulação de SVG como Raphael.js, Snap SVG, D3.js e SVG.js.

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
<svg>
<circle
class="eye"
cx="100"
cy="100"
r="200"
stroke-width="3"
fill="#5A72C3">
</svg>

6. Elementos SVG
<line/> <rect/>
<polyline/> <polygon/>
<ellipse/>
<circle/>
<path/>

7. Criar desenhos complexos?

9. Por que usar SVG?

10. Ricos em detalhes e cores
http://designmodo.com/flat/

11. Interativo e estilizável via CSS
http://tutsplus.github.io/Styling-Iconic/styling/index.html

12. Responsivo
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

13. Ilustrações animadas
http://css-tricks.com/svg-line-animation-works/
http://panizzon.ind.br/

14. Representação Gráfica
http://bl.ocks.org/Caged/6476579

15. Efeitos e Filtros
http://docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters

16. Boa compatibilidade
http://caniuse.com/#search=svg

17. Mais qualidades
● Podem ser minificados (Gzip)
● Permitem uma melhor acessibilidade
● Permite adições de classes para cada elemento desejado
● E mais...

19. Mas e como usar?

20. 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

21. Bibliotecas

22. 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

23. 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)

24. 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

25. SVG.JS
● Criado por Wout Firiens
● Bastante indicado para clipping masks
● Extremamente pequeno (11Kb)

26. Performance e Fallbacks
SVGO Grumpicon

27. Dúvidas?
willian.justen@queremos.com.br
github.com/willianjusten