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
190

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
92
O Nascimento do Tangram Design System
liviamorim
0
300
Rails Girls: Dando Oportunidade e Mudando Vidas
liviamorim
0
170
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
liviamorim
0
74
A revolução de um time de produto: Como ter ownership e arrumar a casa
liviamorim
1
52
Devemos ensinar programação na escola?
liviamorim
0
120
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
liviamorim
0
270
Guia de sobrevivência para designers em um time de desenvolvedores
liviamorim
1
270
Descobrindo o futuro do CSS com cssnext
liviamorim
4
140

Other Decks in Design

See All in Design
もち的デザイナーのキャリアデザイン新提言：副業起業家のすゝめ
mochitaro
0
1.3k
プロダクトデザインは子育て/Product design is parenting
medley
0
280
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
300
実案件でのFigmaデータの作り方
xxxkinu
2
210
Wolf and the seven goatkids
_limex_
PRO
0
400
デザインシステムで解消するさまざまな分断
hirataaa0220
0
160
#コムデナ vol.2 「初めてのデザインカンファレンス協賛！共有したい3つのやらかし」
kiyoshifuwa
1
320

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Designing the Hi-DPI Web
ddemaree
276
33k
Code Reviewing Like a Champion
maltzj
513
39k
A Tale of Four Properties
chriscoyier
150
22k
Bash Introduction
62gerente
604
210k
Designing with Data
zakiwarfel
95
4.8k
Web Components: a chance to create the future
zenorocha
304
41k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
Become a Pro
speakerdeck
PRO
9
4.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
What's in a price? How to price your products and services
michaelherold
237
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k

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!