Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG para leigos: do vetor à animação

Lívia Amorim
September 19, 2015
Design
1
250

SVG para leigos: do vetor à animação

Lívia Amorim

September 19, 2015
Tweet

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

  1. SVG para leigos do vetor à animação

  2. Lívia Amorim UI Developer na Resultados Digitais liviamorim liviavamorim

  3. SOBRE SVG NA PRÁTICA ANIMAÇÃO

  4. 1. Sobre SVG

  5. “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

  6. <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>
  7. None

  8. 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

  9. Mas por que?

  10. Acessibilidade

  11. Responsividade

  12. Retina Display

  13. Agilidade

  14. Mas tem o Canvas!

  15. <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>

  16. 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

  17. 2. Na prática

  18. <svg height="100" width="100"> Isto é um fallback dizendo que o

    browser não suporta SVG inline. </svg>

  19. 100px 100px 100px 100px

  20. Elemento <rect>

  21. <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>

  22. 100px 100px 100px 100px

  23. E se eu quiser posicionar o retângulo na tela?

  24. Y 100px X 100px Y 100px X 100px

  25. Sabe matemática?

  26. Y=10 X=5

  27. Y=10 X=5

  28. Um ponto é a intersecção de duas retas

  29. Y=10 X=5

  30. <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>

  31. Y=10 X=5

  32. Elemento <text> Meow meow meow

  33. <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>

  34. Y X Meow meow meow

  35. Elemento <circle>

  36. <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>

  37. R 50px CY 50px CX 50px

  38. Elemento <ellipse>

  39. <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>

  40. RY 50px CY 50px CX 50px RX 100px

  41. Elemento <line>

  42. <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>

  43. Y1 0px X1 0px Y2 100px X2 100px

  44. Elemento <polygon>

  45. <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>

  46. <svg height="100" width="100"> <polygon points=" X,Y 20,99 95,39 5,39 80,99"

    fill="#a5aad9" /> </svg>

  47. Y X

  48. Elemento <polyline>

  49. Elemento <path>

  50. <svg height="100" width="100"> <path d=" D X,Y" fill="#a5aad9" /> </svg>

  51. 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

  52. Dica Amiga

  53. E o CSS?

  54. <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>

  55. <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>

  56. border-color stroke

  57. border-width stroke-width

  58. background-color fill

  59. 3. Animação

  60. None

  61. <!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>

  62. var s = Snap("#svg"), bigCircle = s.circle(150, 150, 100); bigCircle.attr({

    fill: "#bada55", stroke: "#000", strokeWidth: 5 }); bigCircle.animate({r: 50}, 1000);
  63. None
  64. None
  65. None

  66. Obrigada!