Play svg! Utilizando vetores na web
-
Upload
willian-justen-de-vasconcellos -
Category
Internet
-
view
172 -
download
0
description
Transcript of Play svg! Utilizando vetores na web
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