SVG para leigos: do vetor à animação

Transcript

1. 1.

   SVG para leigos do vetor à animação

2. 2.

   Lívia Amorim UI Developer na Resultados Digitais liviamorim liviavamorim

3. 3.

   SOBRE SVG NA PRÁTICA ANIMAÇÃO

4. 4.

   1. Sobre SVG

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

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

   Mas por que?

10. 10.

    Acessibilidade

11. 11.

    Responsividade

12. 12.

    Retina Display

13. 13.

    Agilidade

14. 14.

    Mas tem o Canvas!

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

    2. Na prática

18. 18.

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

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

    100px 100px 100px 100px

20. 20.

    Elemento <rect>

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

    100px 100px 100px 100px

23. 23.

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

24. 24.

    Y 100px X 100px Y 100px X 100px

25. 25.

    Sabe matemática?

26. 26.

    Y=10 X=5

27. 27.

    Y=10 X=5

28. 28.

    Um ponto é a intersecção de duas retas

29. 29.

    Y=10 X=5

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

    Y=10 X=5

32. 32.

    Elemento <text> Meow meow meow

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

    Y X Meow meow meow

35. 35.

    Elemento <circle>

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

    R 50px CY 50px CX 50px

38. 38.

    Elemento <ellipse>

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

    RY 50px CY 50px CX 50px RX 100px

41. 41.

    Elemento <line>

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

    Y1 0px X1 0px Y2 100px X2 100px

44. 44.

    Elemento <polygon>

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

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

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

    Y X

48. 48.

    Elemento <polyline>

49. 49.

    Elemento <path>

50. 50.

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

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

    Dica Amiga

53. 53.

    E o CSS?

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

    border-color stroke

57. 57.

    border-width stroke-width

58. 58.

    background-color fill

59. 59.

    3. Animação

60. 60.

    None
61. 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. 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. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    Obrigada!