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
210
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
59
Devemos ensinar programação na escola?
liviamorim
0
160
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
330
Descobrindo o futuro do CSS com cssnext
liviamorim
4
140
Other Decks in Design
See All in Design
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
Slip N Slime - Character Design Ideation
thebogheart
0
310
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
太田博三(@usagisan2020)
otanet
0
190
Improve a service workshop
mastervicedesign
1
110
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
400
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
300
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
297
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
A better future with KSS
kneath
238
17k
The Language of Interfaces
destraynor
154
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Cult of Friendly URLs
andyhume
78
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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!