Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SVG para leigos: do vetor à animação
Search
Lívia Amorim
September 19, 2015
Design
1
270
SVG para leigos: do vetor à animação
Lívia Amorim
September 19, 2015
Tweet
Share
More Decks by Lívia Amorim
See All by Lívia Amorim
6 Passos para criar um Design System para a sua empresa
liviamorim
0
110
O Nascimento do Tangram Design System
liviamorim
0
320
Rails Girls: Dando Oportunidade e Mudando Vidas
liviamorim
0
240
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
liviamorim
0
93
A revolução de um time de produto: Como ter ownership e arrumar a casa
liviamorim
1
63
Devemos ensinar programação na escola?
liviamorim
0
190
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
liviamorim
0
430
Guia de sobrevivência para designers em um time de desenvolvedores
liviamorim
1
370
Descobrindo o futuro do CSS com cssnext
liviamorim
4
150
Other Decks in Design
See All in Design
DC Style Redesign
mcduckyart
0
130
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
線で考える画面構成
natsuume
1
880
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
250
Bulletproof Design System with TypeScript
takanorip
6
3.5k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
740
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
320
#Dubois Challenge 2025: Economics
ajstarks
0
130
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
150
Yumika Yamada Portfolio
yumii
0
290
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
610
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
What's in a price? How to price your products and services
michaelherold
246
12k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
179
9.8k
Practical Orchestrator
shlominoach
188
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
125
52k
Transcript
SVG para leigos do vetor à animação
Lívia Amorim UI Developer na Resultados Digitais liviamorim liviavamorim
SOBRE SVG NA PRÁTICA ANIMAÇÃO
1. Sobre SVG
“Linguagem XML para descrever de forma vetorial desenhos e gráficos
bidimensionais, de forma estática, dinâmica ou animada.” http://pt.wikipedia.org/wiki/SVG
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="#573b5d" stroke-width="3" fill="#7e5686"
/> Isto é um fallback dizendo que o browser não suporta SVG inline. </svg>
None
1998 SVG Begins 2001 Adobe SVG Viewer 3 2005 Adobe
adopts Flash 2008 Apple blocks flash 2012 Android 2010 IE9 2011 Retina 2014 Today Poucos Muitos Evolução do SVG por Doug Schepers
Mas por que?
Acessibilidade
Responsividade
Retina Display
Agilidade
Mas tem o Canvas!
<canvas id="meow"> Isto é um fallback dizendo que o browser
não suporta a tag Canvas </canvas> <script> var a_canvas = document.getElementById("meow"), context = a_canvas.getContext("2d"); context.fillStyle = "#7e5686"; context.fillRect(0, 0, 80, 100); </script>
Canvas SVG JavaScript XML Sem manipulação via DOM Manipulação via
DOM “Mais” performático “Menos” performático Não é acessível Acessível
2. Na prática
<svg height="100" width="100"> Isto é um fallback dizendo que o
browser não suporta SVG inline. </svg>
100px 100px 100px 100px
Elemento <rect>
<svg height="100" width="100"> <rect height="100" width="100" fill="#7e5686" /> Isto é
um fallback dizendo que o browser não suporta SVG inline. </svg>
100px 100px 100px 100px
E se eu quiser posicionar o retângulo na tela?
Y 100px X 100px Y 100px X 100px
Sabe matemática?
Y=10 X=5
Y=10 X=5
Um ponto é a intersecção de duas retas
Y=10 X=5
<svg height="100" width="100"> <rect x="5" y="10" height="20" width="20" fill="#7e5686" />
Isto é um fallback dizendo que o browser não suporta SVG inline. </svg>
Y=10 X=5
Elemento <text> Meow meow meow
<svg height="100" width="100"> <text x="20" y="0" fill="#7e5686">Meow meow meow</text> Isto
é um fallback dizendo que o browser não suporta SVG inline. </svg>
Y X Meow meow meow
Elemento <circle>
<svg height="100" width="100"> <circle cx="50" cy="50" r="50" fill="#7e5686" /> Isto
é um fallback dizendo que o browser não suporta SVG inline. </svg>
R 50px CY 50px CX 50px
Elemento <ellipse>
<svg height="100" width="100"> <ellipse cx="100" cy="50" ry="50" rx="100" /> Isto
é um fallback dizendo que o browser não suporta SVG inline. </svg>
RY 50px CY 50px CX 50px RX 100px
Elemento <line>
<svg height="100" width="100"> <line x1="0" y1="0" x2="100" y2="100" stroke="#7e5686" />
Isto é um fallback dizendo que o browser não suporta SVG inline. </svg>
Y1 0px X1 0px Y2 100px X2 100px
Elemento <polygon>
<svg height="100" width="100"> <polygon points="50,5 20,99 95,39 5,39 80,99" fill="#7e5686"
/> Isto é um fallback dizendo que o browser não suporta SVG inline. </svg>
<svg height="100" width="100"> <polygon points=" X,Y 20,99 95,39 5,39 80,99"
fill="#a5aad9" /> </svg>
Y X
Elemento <polyline>
Elemento <path>
<svg height="100" width="100"> <path d=" D X,Y" fill="#a5aad9" /> </svg>
M L H V C S Q T A Z
Move to X,Y Line to X,Y Horizontal line to X,Y Vertical line to X,Y Curve to X,Y Smooth curve to X,Y Quadratic Bézier curve to X,Y Smooth quadratic Bézier curve to X,Y Elliptical Arc Close path Direções
Dica Amiga
E o CSS?
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" style="fill: #7e5686; stroke:
#573b5d; stroke- width: 3;" /> Isto é um fallback dizendo que o browser não suporta SVG inline. </svg>
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" class="myCircle" /> Isto
é um fallback dizendo que o browser não suporta SVG inline. </svg> <style> .myCircle { fill: #7e5686; stroke: #573b5d; stroke-width: 3; } </style>
border-color stroke
border-width stroke-width
background-color fill
3. Animação
None
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Exemplo lindão</title> <script
src="js/snap.svg.js"></script> <script src="js/meu-js.js"></script> </head> <body> <svg id="svg"></svg> </body> </html>
var s = Snap("#svg"), bigCircle = s.circle(150, 150, 100); bigCircle.attr({
fill: "#bada55", stroke: "#000", strokeWidth: 5 }); bigCircle.animate({r: 50}, 1000);
None
None
None
Obrigada!