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
250
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
310
Rails Girls: Dando Oportunidade e Mudando Vidas
liviamorim
0
230
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
liviamorim
0
90
A revolução de um time de produto: Como ter ownership e arrumar a casa
liviamorim
1
59
Devemos ensinar programação na escola?
liviamorim
0
170
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
liviamorim
0
380
Guia de sobrevivência para designers em um time de desenvolvedores
liviamorim
1
350
Descobrindo o futuro do CSS com cssnext
liviamorim
4
140
Other Decks in Design
See All in Design
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
発表資料テンプレート / My slide template
thatblue
0
200
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
810
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Visualization
eitanlees
146
15k
Writing Fast Ruby
sferik
628
61k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fireside Chat
paigeccino
34
3.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Building Applications with DynamoDB
mza
93
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Thoughts on Productivity
jonyablonski
69
4.5k
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!