デザイナーのためのSVG基礎 + アニメーション

Transcript

1. σβΠφʔͷͨΊͷSVGجૅ+Ξχϝʔγϣϯ 松⽥直樹 Basics & Animations

2. Prologue ·ͣ͸ͪ͜Β

3. None

4. ೥લ

5. ࠓ೔͸
 18೥લͷ͜ͱΛ͓࿩͠·͢

6. দ ా ௚ थ CCO, Designer

7. None
8. None

9. SVG in various places ͜Μͳͱ͜ΖʹSVG

10. None
11. None

12. https://lottiefiles.com/featured

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

14. https://auwaa.ch/

15. SVG࢖ͬͯ·͔͢ʁ SVG

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

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

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

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

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

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

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

21. Ξχϝʔγϣϯ࣮૷ํ๏͕๛෋ 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); } }

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

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

23. Merits Ͳ͏ศརͳͷ͔

24. 1 ͢΂͕ͯΦϒδΣΫτͰ͋Δ

25.   画像  であり、  ⽂書  である SVG ͸

26. XMLจॻ͔ͩΒɺ͢΂ͯͷਤܗ͸ɹཁૉɹ จࣈσʔλɹʢςΩετϊʔυʣΛؚΊΒΕΔ ը૾ͷதʹɹΞΫηγϏϦςΟɹΛ֬อͰ͖Δ

27. JPEG ΍ PNG ͷ୅ସςΩετ alt="·͙Ζͷण࢘" longdesc="http://example.com/ desc1"

28. SVGͰ͸ཁૉ͝ͱʹ title, desc Λஔ͚Δ <g> <title>͍͘Β</title> <desc>…</desc> </g> <g> <title>ւଽͱγϟϦ</title>

    <desc>…</desc> </g> <g> <title>͓ࡼ</title> <desc>…</desc> </g> <title>͍͘Βͷ܉؋</title>

29. role ͱ aria-labelledby Λ௥ه͢Ε͹ εΫϦʔϯϦʔμʔରԠ΋Ͱ͖Δ <svg viewBox="0 0 100 100"

    role="img" aria-labelledby="title desc"> <title id="title">ϋϯόʔΨʔ</title> <desc id="desc">ϋϯόʔΨʔͷϑϥοτͳΠϥετΞΠ ίϯ</desc> … </svg>

30. ͜Μͳάϥϑ΋ݸʑͷάϧʔϓ͝ͱʹ ΞΫηγϒϧʹ͢Δ͜ͱ͕Ͱ͖Δ 0 30 60 90 120 150 ౉ล ాத

    ߴڮ ླ໦ ࠤ౻ 佐藤 80点 鈴⽊ 125点 ⾼橋 100点 ⽥中 140点 渡辺 90点

31. 2 ϞδϡʔϧΛఆٛͰ͖Δ
 ʢ࠶ར༻ੑʣ

32. ಉ͡ SVG จॻ಺ɺ΋͘͠͸֎෦ͷ SVG จॻ಺ͷ ݸʑͷਤܗʢΦϒδΣΫτʣΛͲ͜ͰͰ΋࠶ར༻Ͱ͖Δ Web ComponentsʢShadow DOMʣ Λઌߦ࣮૷͍ͯ͠ΔΑ͏ͳ΋ͷ

    SVG ͷ͍͢͝ͱ͜Ζ

33. 要素の再利⽤ <symbol id="s"> <path d="..."/> </symbol> <use xlink:href="#s" x="20" y="10"

    fill="#fc0"/> symbol ͷ৔߹ɺ਌SVG ཁૉͱ͸ผͷಠཱͨ͠ viewBoxΛ࣋ͯΔͷͰɺ ࠶ར༻ͨ͠ࡍͷαΠζมߋ΋Մೳ Point symbol ཁૉ͸࣮ମͷͳ͍ਤܗΛఆٛ͢Δ use ཁૉͰ࠶ར༻ͯ͠ॳΊͯදࣔͰ͖Δ

34. <symbol id="tw"> <path d="M64,6.2c-1.1,0.6-4.3,1.8-7.3,2.1c1.9-1,4.8-4.5,5.5-7.2c-1.9,1 .2-6.1,2.9-8.2,2.9v0C51.5,1.6,48.2,0,44.4,0 c-7.3,0-13.2,5.9-13.2,13.2c0,1,0.1,2,0.3,2.9h0c-9.9-0.3-20.7-5.2 -27.2-13.7c-4,6.9-0.5,14.6,4,17.4c-1.6,0.1-4.4-0.2-5.8-1.5 C2.5,23,4.7,29.1,12.7,31.3c-1.6,0.8-4.3,0.6-5.5,0.4c0.4,3.9,5.9, 9,11.8,9c-2.1,2.5-10.1,6.9-19,5.5C6.1,49.9,13.2,52,20.7,52 c21.3,0,37.8-17.3,37-38.6c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2c0-0.1,

    0-0.1,0-0.2C59.5,11.7,62.1,9.3,64,6.2z"/> </symbol> <use xlink:href="#tw" x="20" y="0" fill="#319aec"/> <use xlink:href="#tw" x="40" y="0" fill="#319aec"/> <use xlink:href="#tw" x="60" y="0" fill="#319aec"/> <use xlink:href="#tw" x="80" y="0" fill="#319aec"/> ίʔυྔ΋અ໿Ͱ͖Δ

35. index.html icons.svg 1ຕͷ SVG ͷதʹ͋ΔਤܗΛɺݸผʹͲ͜ʹͰ΋දࣔͰ͖Δ Point <svg> <use xlink:href="icon.svg#train"/> </svg>

    SVG Sprites (svgstore)

36. •viewBox ΛಠࣗʹఆٛͰ͖ΔͨΊɺ୯ಠͰͷ࠲ඪܥΛ࣋ͭ •use ཁૉͰ࠶ར༻͢ΔࡍʹαΠζΛมߋͰ͖Δʢ࠲ඪܥม׵ʣ •ਤܗཁૉΛ୯ʹςϯϓϨʔτԽͨ͠΋ͷ •୯ಠͷ࠲ඪܥ͸࣋ͨͣɺ࠶ར༻࣌ʹαΠζ͸มߋͰ͖ͳ͍ symbol ཁૉ defs ཁૉ

    symbol ཁૉ ͱ defs ཁૉͷҧ͍

37. 3 ଟ༷ͳΞχϝʔγϣϯํ๏

38. SMIL Ξχϝʔγϣϯ CSS Ξχϝʔγϣϯ DOM Ξχϝʔγϣϯ SVG ͷΞχϝʔγϣϯ͸ େ͖͘෼͚ͯ3छྨ

39. animateཁૉʹΑΔΞχϝʔγϣϯ
 IE, Edge ͸ඇରԠ SMIL Ξχϝʔγϣϯ

40. CSS ͷ animation, transition Ͱͷ Ξχϝʔγϣϯ͕Մೳɻ͕ͩ… ͨͩ͠ɺಈ͔ͤΔͷ͸ SVG 1.1 Ͱ࢖͑Δ

    CSS ϓϩύςΟʹݶΒΕΔ IE Ͱ͸ɺSVG ͷཁૉʹ transform ͕·ͬͨ͘ޮ͔ͳ͍ͷͰ
 CSS Ͱ͸ਤܗΛҠಈɾมܗͤ͞Δ͜ͱ͕Ͱ͖ͳ͍ Point Point CSS Ξχϝʔγϣϯ

41. ͭ·ΓɺCSS ͰࢦఆͰ͖ͳ͍ଐੑ஋͸ΞχϝෆՄೳ <circle cx="120" cy="120" r="100" /> 100 , 120,

    120 ਤܗͷେ͖͞ɺҐஔɺύεܗঢ়ͳͲΛࢦఆ͢Δଐ ੑ͸ɺCSS Ͱ͸ࢦఆͰ͖ͳ͍ CSS Ξχϝʔγϣϯ

42. http://www.w .org/TR/SVG/propidx.html SVG Ͱ࢖͑ΔCSSϓϩύςΟҰཡ

43. JavaScript Ͱ SVG DOM Λૢ࡞ͯ͠ Ξχϝʔγϣϯͤ͞Δ SVGཁૉͷଐੑ஋Λॻ͖׵͑Δɻ࣮࣭తʹͳΜͰ΋Ͱ͖Δ SVG DOMʢDOM Level

    2ʣ͸ HTML DOMʢDOM Level 1ʣͱ͸ ผ෺ͳͷͰɺjQueryͰ͸ཁૉੜ੒ͳͲͰ͖ͳ͍ ֎෦ͷ SVG ϑΝΠϧΛɺimg ཁૉ΍ CSS background Ͱࢀর දࣔͤͨ͞৔߹ɺ࢓্༷·ͬͨ͘ಈ͔ͳ͍ Point Point Point DOM Ξχϝʔγϣϯ

44. SVG DOM Ξχϝʔγϣϯ var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "50");

    rect.setAttribute("width", "100"); rect.setAttribute("height", "100"); rect.setAttribute("fill", "red"); var rot = 0; setInterval(function(){ rect.setAttribute("transform", "rotate(" + rot + " 100 100)"); rot = rot + 1; }, 10); document.querySelector("svg").appendChild(rect);

45. SVG ⽤のアニメーションライブラリを使おう https://greensock.com/ http://julian.com/research/velocity/ http://snapsvg.io/ ߴػೳͳ౷߹Ξχϝʔγϣϯϥ ΠϒϥϦɻ
 λΠϜϥΠϯػೳ͕ڧྗ͗͢ Δɻ·ͨɺSVGͷΞχϝʔγϣ ϯ༻్͝ͱʹϓϥάΠϯΛಋೖ

    ͯ͠࢖༻͢Δɻ jQueryͷanimateޓ׵ͱͳͬͯ ͍ΔΞχϝʔγϣϯϥΠϒϥ ϦɻՄೳͳݶΓCSSΛ࢖ͬͯ͘ ΕΔͷͰΞχϝʔγϣϯͷߴ଎ Խ͕ਤΕΔɻ ׬શʹSVGઐ༻ͷϥΠϒϥϦɻ
 SVGͷੜ੒΍ɺ֎෦ͷSVGϑΝ ΠϧΛऔΓࠐΜͰ಺෦Λૢ࡞͢ Δ͜ͱ΋Մೳɻ
 jQueryϥΠΫʹॻ͚Δɻ https://svgjs.com/ ׬શʹSVGઐ༻ͷϥΠϒϥϦɻ
 ଞϥΠϒϥϦΑΓ΋ൺֱతܰྔ Ͱߴ଎ɻ
 Ξοϓσʔτ͕සൟͰ҆৺Ͱ͖ Δɻ DOM Ξχϝʔγϣϯ

46. 4 filterޮՌ

47. filter͸ݩͷΠϝʔδΛյ͞ͳ͍

48. DEMO

49. SVG Filter Builder ͕ศར https://svgfilters.com/

50. viewBox ͜Ε͚ͩ͸ཧղ͓͖͍ͯͨ͠

51. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200" >

    <circle cx="100" cy="100" r="100"/> </svg>

52. ։࢝఺
 ʢxy࠲ඪʣ viewBox
 ෯ viewBox
 ߴ͞ width="200px" height="200px" viewBox="0 0

    200 200"

53. width="200px" height="200px" viewBox="0 0 200 200" viewBox の値 左上座標と座標系 表⽰サイズ

    viewBox width, height ≠

54. width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/>

    100px 100px 円の半径は 100座標 SVG ͷ 1࠲ඪ ϒϥ΢βͷ 0.5px = 100px / ௚ܘ200 = 0,0 200,200 viewBox ͷ஋ͱ width, height ͷ஋͸ผ෺Ͱ͋Δ

55. 100px 100px ԁͷ൒ܘ͸ 100࠲ඪ ? ? ॳظ࠲ඪܥ (1px) = =

    SVG ͷ 1࠲ඪ ʢviewBoxͳ͠ʣ width="100px" height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> viewBox ͷࢦఆ͕ͳ͍৔߹

56. SVG ͷ 1࠲ඪ Fluid = = ਌ཁૉͷαΠζ / 200 width="100px"

    height="100px" viewBox="0 0 200 200" <circle cx="100" cy="100" r="100"/> 100px px 0,0 200,200 0,0 200px 200,200 px width, height ͷࢦఆ͕ͳ͍৔߹

57. width="200px" height="200px" viewBox="-100 -100 200 200" <circle cx="100" cy="100" r="100"/>

    200px 200px ࠨ্࠲ඪΛϚΠφεࢦఆ͢Δͱ ج४఺ʢ0, 0ʣͷҐஔΛ ΞʔτϘʔυதԝʹ͢Δ͜ͱ΋
 Ͱ͖Δ -100, -100 100, 100 0, 0 viewBox ͸ʮج४఺ͷҐஔʯͱʮ࠲ඪܥʯΛఆٛ͢Δ

58. 1࠲ඪͷαΠζ͸ɺwidth, height ʹΑͬͯมΘΔ ɹviewBox ʹΑΔ ɹม׵͞Εͨ1࠲ඪ 1࠲ඪͷ୯Ґͷ͜ͱΛ ࠲ඪܥม׵ ར༻୯Ґ

59. SVG-UA ͸ɺ ࠷΋֎ଆͷ svg ཁૉʹର͠ɺॳظͷϏϡʔϙʔτ࠲ඪܥͱॳظͷར༻࠲ඪܥ Λೋͭͷ࠲ඪܥ͕ಉ஋ʹͳΔΑ͏ʹఆΊΔɻ૒ํͷ࠲ඪܥͷݪ఺͸Ϗϡʔϙʔτͷݪ఺ʹ ߹ΘͤΒΕɺॳظ࠲ඪܥͷ1୯Ґ͸Ϗϡʔϙʔτʹ͓͚Δ1ʮըૉʯʢ͢ͳΘͪ CSS2 Ͱఆ ٛ͞ΕΔ୯Ґ

    px ([CSS2]ɺ4.3.2 અ) Ͱදͨ͠1px ʣʹ౳͘͠͞ΕΔɻ ΄ͱΜͲͷ৔߹ʢಠཱͨ͠ SVG จॻͰ͋Δ͔ɺ਌ͱͳΔ XML จॻʹࢀর·ͨ͸ΠϯϥΠ ϯʹΑΓ SVG จॻย͕ຒΊ͜·Ε͍ͯͯɺ਌ͷϨΠΞ΢τ͕ CSS ·ͨ͸ XSL Ͱܾఆ͞Ε ͍ͯΔΑ͏ͳ৔߹ʣɺॳظϏϡʔϙʔτ࠲ඪܥ͸ʢ͕ͨͬͯ͠ॳظར༻࠲ඪܥ΋ʣɺͦͷ ݪ఺ΛϏϡʔϙʔτͷࠨ্۱ʹɺX ࣠ਖ਼ํ޲Λӈ޲͖ʹɺY ࣠ਖ਼ํ޲ΛԼ޲͖ʹɺςΩε τͷඳը͸ʮਖ਼ཱʯͨ͠ঢ়ଶʹͳΔΑ͏ʹ͞ΕΔʢʮਖ਼ཱʯͱ͸ɺϩʔϚࣈ΍ΞδΞ஍Ҭ ͷ༻ࣈܥͷશ֯දҙจࣈ͸ɺରԠ͢ΔάϦϑͷ্୺Λ্ଆʹɺӈ୺ΛӈଆʹҐஔͤ͞Δ͜ ͱΛҙຯ͢Δʣɻ

60. ͜ΕΒΛཧղ͓ͯ͘͜͠ͱ͕ SVGͷදࣔͰϋϚΒͳ͍ίπ viewBox width, height preserveAspectRatio ͱɺͱ͖Ͳ͖

61. DEMO viewBoxΛཧղ͓͔ͯ͠ͳ͍ͱͲ͏ࠔΔ͔

62. viewBoxΛཧղ͍ͯ͠ͳ͍ͱࠔΔ͜ͱ transform ʹࢦఆ͢Δ୯Ґ͸࠲ඪม׵͞ΕΔ SVGͷཁૉ͸ transform-origin ͷج४͕ҟͳΔ viewBox͸࠲ඪܥΛఆٛ͢Δ͕ɺ୯Ґ͸ఆٛ͠ͳ͍

63. https://speakerdeck.com/readymadegogo/hamarusvg-css-nite-lp47 ͦͷଞɺwebͰ࢖͏্Ͱͷղܾࡦ͸ͪ͜Β

64. Animation JSʹΑΔSVGΞχϝʔγϣϯ

65. 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')

66. 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')

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

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

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

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

71. None
72. None
73. None

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

75. New Tab ੩ࢭըͷSVGϑΝΠϧͱͯ͠อଘ

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

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

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

78. .fromTo('#mountain', 1, {x: 10, scale: 0}, {x: 60, scale: 1},

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

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

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

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

    .staggerFromTo()

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

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

82. ͞Βʹෳ਺ͷཁૉΛ·ͱΊͯಈ͔͢ .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ඵ͓͖ʹ

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

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

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

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

86. ෳ਺ͷλΠϜϥΠϯΛɺ৽ͨͳλΠϜϥΠϯʹ߹ମ 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; }

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

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

89. Unique SVGͳΒͰ͸ͳ͜ͱ

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

91. New Tab SVG

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

93. <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"/>

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

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

96. ࠷৽ͷ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; }

97. ΍΍͔ͬͨ͜͠Ͱ͔͢ʁ

98. SVG Animation CSS web fonts Data Visualization Filter Effect Accessibility

99. σβΠφʔͷͨΊͷSVGجૅ+Ξχϝʔγϣϯ 松⽥直樹 Basics & Animations ͋Γ͕ͱ͏͍͟͝·ͨ͠