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
290

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

Other Decks in Design

See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
750
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
170
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
460
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
370
第18回サイゼミ
Avatar for LW lw
1
1.5k
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
150
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
2k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
270
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
230
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
490
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
190
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
360

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
260
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
38
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
74
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
120
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
1.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
39
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
88

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!