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

クリエイティブハント2019
松田 直樹さんのセッション

Transcript

1. σβΠφʔͷͨΊͷSVGجૅ+Ξχϝʔγϣϯ 松⽥直樹 Basics & Animations
2. Prologue ·ͣ͸ͪ͜Β
4. ೥લ
5. ࠓ೔͸
 18೥લͷ͜ͱΛ͓࿩͠·͢
6. দ ా ௚ थ CCO, Designer
9. SVG in various places ͜Μͳͱ͜ΖʹSVG
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. λΠϜϥΠϯͰಈ͔ͯ͠Έ·͠ΐ͏
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 ͋Γ͕ͱ͏͍͟͝·ͨ͠