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

SVG para leigos: do vetor à animação

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Lívia Amorim Lívia Amorim
September 19, 2015
Design
310
1

SVG para leigos: do vetor à animação

Avatar for Lívia Amorim

Lívia Amorim

September 19, 2015

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

Other Decks in Design

See All in Design
セブンデックス プロジェクト事例 / innovation Scenes
Avatar for セブンデックス sevendex
1
560
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
1.2k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
660
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
210
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.3k
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
28k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
160
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
160
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
290
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
140
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
140
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
860

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
270
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
260
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
200
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
210
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
150
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
320
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k

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!