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

SVG para leigos: do vetor à animação

Avatar for Lívia Amorim Lívia Amorim
September 19, 2015
Design
1
270

SVG para leigos: do vetor à animação

Avatar for Lívia Amorim

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
Avatar for Lívia Amorim liviamorim
0
110
O Nascimento do Tangram Design System
Avatar for Lívia Amorim liviamorim
0
320
Rails Girls: Dando Oportunidade e Mudando Vidas
Avatar for Lívia Amorim liviamorim
0
240
Mulheres Empreendedoras: Porque a Igualdade de Gênero é tão Importante
Avatar for Lívia Amorim liviamorim
0
96
A revolução de um time de produto: Como ter ownership e arrumar a casa
Avatar for Lívia Amorim liviamorim
1
63
Devemos ensinar programação na escola?
Avatar for Lívia Amorim liviamorim
0
190
Design Thinking na Educação: Como aplicar no contexto da Educação Infantil
Avatar for Lívia Amorim liviamorim
0
430
Guia de sobrevivência para designers em um time de desenvolvedores
Avatar for Lívia Amorim liviamorim
1
370
Descobrindo o futuro do CSS com cssnext
Avatar for Lívia Amorim liviamorim
4
160

Other Decks in Design

See All in Design
harutaka Vision Deck
Avatar for ZENKIGEN,Inc. zenkigenforrecruit
0
170
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
Avatar for Marie BENOIT marietournelle35
0
110
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
Avatar for trivia trivia
0
510
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
380
UXとUIの違いを自分の言葉で表現する： UX DAYS TOKYO
Avatar for Mizunashi Mana mizunashi_mana
0
220
デフォルトの16:9（960*540px）のケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.1k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
390
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
440
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
260
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
1.1k
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
320

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
720
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.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!