SVG is on your side @ MTDDC 2018

Transcript

1. is on your side SVGɺͦΕ͸͋ͳͨͷຯํ 匟歊湫埠 SVG

2. Prologue ·ͣ͸ͪ͜Β

3. None

4. দా௚थ CCO, Designer

5. SVG in various places. ͍ΖΜͳͱ͜ΖʹSVG

6. None

7. http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/

8. https://www.fontself.com/

9. https://auwaa.ch/

10. Features SVGͷಛ௃Λ͓͞Β͍

11. XMLจॻͰ͋Δ จࣈ৘ใΛ಺แ ը૾ͷத਎ΛΞΫηγϒϧʹͰ͖Δ <circle cx="20" …> <title> Duck’s eye </title>

    </circle> ͢΂͕ͯཁૉʢDOMʣ CSS΍Web Fonts΋ద༻Ͱ͖Δ <circle> <path> <path> ࠶ར༻ੑ SVG Sprites΋͜ͷํ๏

12. Standalone SVG HTML CSS SVG ֎෦ϑΝΠϧΛը૾ͱͯ͠දࣔͤ͞Δ HTML <svg> </svg> inline

    SVG HTMLͷதʹɺSVGίʔυΛ௚઀ॻ͘ HTML಺ʹ௚઀ؚΊΔ͜ͱ͕Ͱ͖Δ

13. viewBoxʢ࠲ඪܥʣͷ֓೦ width / height ࣮ੇͷαΠζࢦఆ preserveAspectRatio ΞεϖΫτൺอ࣋ํ๏ͷࢦఆ viewBox ඳըྖҬͷ࠲ඪܥΛఆٛ

14. filter, mask, pattern…ɹඇഁյͳޮՌ

15. Ξχϝʔγϣϯ࣮૷ํ๏͕๛෋ JavaScript ͳΜͰ΋Ͱ͖Δ var tl = new TimelineMax(); tl.fromTo('#obj', 3,

    {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2') SMIL ཁૉ͚ͩͰΞχϝʔγϣϯ <circle cx="20" …> <animate attributeName="cx" from="100" to="100" dur="5s" … /> </circle> CSS Animations CSSͷΞχϝʔγϣϯ΋࢖͑Δ @keyframes stroke-anime { 0% { stroke-dashoffset: 800; fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgba(#fff, .7); } }

16. ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ Custom Fields 3 6 3 4

    σʔλͱ૬ੑྑ͠ ίετύϑΥʔϚϯε ଱ٱੑ σβΠϯ ಠࣗੑ ਓؾ ࡏݿ

17. CMSʢMovable Typeʣʹ዁౓ͨ͠ͱ͜ΖͰ

18. ࠓճ͸
 σβΠφʔ޲͚ʹSVGΞχϝʔγϣϯΛ͝঺հ

19. Animation with JavaScript JSʹΑΔSVGΞχϝʔγϣϯ

20. SMIL CSS Animations JavaScript ཁૉ͚ͩͰΞχϝʔγϣϯ CSSͷΞχϝʔγϣϯ΋࢖͑Δ ͳΜͰ΋Ͱ͖Δ ͳͥɺJSͰΞχϝʔγϣϯʁ <circle cx="20"

    …> <animate attributeName="cx" from="100" to="100" dur="5s" … /> </circle> @keyframes stroke-anime { 0% { stroke-dashoffset: 800; fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgba(#fff, .7); } } var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2')

21. SMIL CSS Animations JavaScript ཁૉ͚ͩͰΞχϝʔγϣϯ SVGʹ࢖͑Δ
 CSSͷϓϩύςΟ͸ݶΒΕ͍ͯΔ ͳΜͰ΋Ͱ͖Δ ͳͥɺJSͰΞχϝʔγϣϯʁ IEͰ

    transform ͕ޮ͔ͳ͍ CSSͷΞχϝʔγϣϯ΋࢖͑Δ var tl = new TimelineMax(); tl.fromTo('#obj', 3, {y: '0'}, {y: ’10', repeat: -1, yoyo: true}, '-=2')

22. TweenMax SVG.js Snap.svg Two.js D3.js ͲͷϥΠϒϥϦΛ࢖͏ʁ

23. TweenMax SVG.js Snap.svg Two.js D3.js ͱʹ͔͘ಈ͔͍ͨ͠ͳΒ

24. Ͳ͏͍ͬͨͱ͖ʹɹɹɹTweenMaxʁ DOMΞχϝʔγϣϯઐ༻ϥΠϒϥϦ λΠϜϥΠϯػೳ͕ڧྗ requestAnimationFrame Ͱಈ࡞͕ͳΊΒ͔ ඇΤϯδχΞͰ΋ͦΕͬΆ͘ಈ͔ͤΔ

25. λΠϜϥΠϯͰಈ͔ͯ͠Έ·͠ΐ͏

26. None
27. None
28. None

29. طଘͷSVGฤूʹ͸ɹɹɹBOXY SVG https://boxy-svg.com/

30. New Tab ੩ࢭըͷSVGϑΝΠϧΛอଘ

31. λΠϜϥΠϯͷΠϯελϯεΛ༻ҙ var tl = new TimelineMax();

32. ࢁΛϙϤϯͱಈ͔͢ tl .fromTo('#mountain', 1, {scaleY: '0', transformOrigin: '50% 100%'}, {scaleY:

    '1', ease: Bounce.easeOut}, '-=0')

33. ͍ͭͮͯɺଠཅͱؾٿΛಈ͔͢ tl .fromTo('#mountain', 1, {…}, '-=0') .fromTo('#sun', 1, {scale: '0'},

    {scale: '1'}, '-=0.5') .fromTo('#ballon', 2, {y: '-300'}, {y: '0'}, '-=0.5')

34. .fromTo('#sun', 1, {x: 10, scale: 0}, {x: 60, scale: 1},

    '-=0.5') ಈ͔͢ཁૉ duration ಈ͖࢝Ίͷঢ়ଶ ಈ͖ऴΘΓͷঢ়ଶ λΠϜϥΠϯʹ͓͚Δ։࢝λΠϛϯάʢલͷཁૉ͕ಈ͖ऴΘΔ0.5ඵલʣ

35. ಈ͔͍ͨ͠ॱʹੵΜͰ͍͚ͩ͘ var tl = new TimelineMax(); .fromTo() .fromTo() .staggerFromTo() .staggerFromTo()

    .staggerFromTo()

36. ෳ਺ͷཁૉΛ·ͱΊͯಈ͔͢ .staggerFromTo('[id^="build"]', 1, {scale: 0, transformOrigin: '50% 100%'}, {cycle: {scale:

    [1, .9, 1.1]}, ease: Bounce.easeOut}, '0.2', '-=0.2') 0.2ඵ͓͖ʹ

37. ͞Βʹෳ਺ͷཁૉΛ·ͱΊͯಈ͔͢ .staggerFromTo('[id^="tree"]', 1, {y: '-400', scaleY: 0.5, transformOrigin: '50% 0%'},

    {y: '0', scaleY: 1, ease: Bounce.easeOut}, '0.2', '-=0.2') 0.2ඵ͓͖ʹ

38. .from() .to() .fromTo() .set() .staggerFrom() .staggerTo() .staggerFromTo() ͜Ε͚֮ͩ͑ͱ͚͹ಈ͔ͤΔ

39. ͱʹ͔͘
 λΠϜϥΠϯػೳ͕ࡉ͔͍ௐ੔ʹޮ͘

40. λΠϜϥΠϯΛؔ਺Խͯ͠ɺΠϕϯτϦεφΛόΠϯυ function timeline() { var tl = new TimelineMax(); tl.fromTo('#obj1',

    3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } $('#obj1').on('click', function(){ timeline.play(); })

41. ෳ਺ͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ function timeline1() { var tl = new TimelineMax(); tl.fromTo('#obj1',

    3, ... '+=0') .staggerFromTo('.class1', 3, ...) return tl; } var masterTl = new TimelineMax(); master .add(timeline1(), 'scene1') .add(timeline2(), 'scene2'); masterTl.play() function timeline2() { var tl = new TimelineMax(); tl.staggerFromTo('.class2', 3, ...) .fromTo('#obj2', 3, ... '+=0') return tl; }

42. εϐʔυ΋ޙ͔Βௐ੔Մೳ masterTl.timeScale(3).play(); ్த͔Βಈ͔ͨ͠Γ masterTl.seek("myLabel").play();

43. TweenMaxΛ࢖͓͚ͬͯ͹ ޙ͔ΒͰ΋ඍௐ੔͕༰қ

44. https://spiritapp.io/

45. Unique SVGͳΒͰ͸ͳ͜ͱ

46. SVG͸
 Ұຕֆ ͷʮத਎ʯΛಈ͔ͤΔ

47. New Tab

48. SVG͸
 ň ଐੑ ʯň CSS ʯͰਤܗ͕࡞ΒΕ͍ͯΔ

49. <svg viewBox="0 0 1024 768"> <filter id="blur" … > <feGaussianBlur

    stdDeviation="5" /> </filter> <rect x="10" y="10" width="40" height="20" fill="#f00" stroke="#c00" stroke-width="10"/>

50. ଐੑͷ஋͸ಈ͔ͤΔʢviewBoxʣ

51. ଐੑͷ஋͸ಈ͔ͤΔʢfilterʣ

52. ࠷৽ͷCSS΋࢖͑ΔʢCSS Variables ͳͲʣ <symbol id="duck"> <path d="…" style="fill: var(--primaryColor, #FC6)"

    /> </symbol> <use … id="duck-1" /> #duck-1 { --primaryColor: #0099CC; } <use … id="duck-2" /> #duck-1 { --primaryColor: #E52A39; }

53. Conclusion ·ͱΊ

54. SVGɺ͢͹Β͖͔͠ͳث༻ශ๡ େ͖͘࢖ͬͯ΋ খ͘͞࢖ͬͯ΋ ಈ͔ͯ͠΋ ੩ࢭըͰ΋

55. SVGɺ͢͹Β͖͔͠ͳث༻ශ๡ େ͖͘࢖ͬͯ΋ খ͘͞࢖ͬͯ΋ ಈ͔ͯ͠΋ ੩ࢭըͰ΋ Scalable

56. What is SVG ?

57. Super Very Good

58. is on your side SVGɺͦΕ͸͋ͳͨͷຯํ SVG Thank you