Play SVG!Utilizando vetores na web

Olá!Eu sou Willian!

@willian_justengithub.com/willianjusten

Tipos de imagem

Scalable Vector Graphics (SVG) é um formato de imagem baseado

numa estrutura em XML.

<svg><circleclass="eye" cx="100" cy="100" r="200"stroke-width="3"fill="#5A72C3">

</svg>

Estrutura

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

http://caniuse.com/#search=svg

Boa compatibilidade

● Podem ser minificados (Gzip)

● Permitem uma melhor acessibilidade

● Permite adições de classes para cada elemento desejado

● E mais...

Mais qualidades

Mas e como usar?

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

Bibliotecas

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

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)

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

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