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
230
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
100
O Nascimento do Tangram Design System
liviamorim
0
300
Rails Girls: Dando Oportunidade e Mudando Vidas
liviamorim
0
190
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
liviamorim
0
87
A revolução de um time de produto: Como ter ownership e arrumar a casa
liviamorim
1
57
Devemos ensinar programação na escola?
liviamorim
0
140
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
liviamorim
0
330
Guia de sobrevivência para designers em um time de desenvolvedores
liviamorim
1
310
Descobrindo o futuro do CSS com cssnext
liviamorim
4
140
Other Decks in Design
See All in Design
202409_会社概要資料_Englishver.pdf
zakkerooni
0
170
Pizza Trail v2
jerfusart
0
110
AIイラスト生成・編集テクニック紹介
piyo7
2
220
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.6k
生成AIのデザイン活用
asakohs
1
270
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
730
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
140
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
190
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
250
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.4k
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
510
Sensitive Texter Storyboard
ctagulao98
0
210
Featured
See All Featured
Thoughts on Productivity
jonyablonski
66
4.2k
Designing Experiences People Love
moore
138
23k
Speed Design
sergeychernyshev
22
430
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Building Your Own Lightsaber
phodgson
101
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Raft: Consensus for Rubyists
vanstee
136
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Navigating Team Friction
lara
183
13k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Git: the NoSQL Database
bkeepers
PRO
425
64k
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!