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
240
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
200
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
liviamorim
0
89
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
150
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
liviamorim
0
350
Guia de sobrevivência para designers em um time de desenvolvedores
liviamorim
1
320
Descobrindo o futuro do CSS com cssnext
liviamorim
4
140
Other Decks in Design
See All in Design
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1.1k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.6k
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
ZOZO CDO Office Design
zozodevelopers
PRO
1
350
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
240
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
620
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
150
Minuto de Aventura
olgastoryboard
0
170
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
150
Slip N Slime - Character Design Ideation
thebogheart
0
300
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Design System for training program
mct
0
280
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building Applications with DynamoDB
mza
90
6.1k
Fireside Chat
paigeccino
32
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Thoughts on Productivity
jonyablonski
67
4.3k
Designing for humans not robots
tammielis
249
25k
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!