Dive into SVG

Transcript

1. 1.

   

2. 2.

   ͓΍·͖ͩ͋ͻΖ খࢁాߊߒ UXJUUFS!ZPNPUTV גࣜձࣾϐΫηϧάϦου .JDSPTPGU
   .71
   GPS
   *&

3. 3.

   ޙ൒ͷྲྀΕ  5SBOTGPSN  -JOL  4UZMJOH  'JMUFS 

   "OJNBUJPO  4DSJQU  &NCFE  ·ͱΊ 
4. 4.

   USBOTGPSN Ҡಈɺ֦େॖখɺճసɺεΩϡʔ 

5. 5.

   None
6. 6.

   None
7. 7.

   <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path

   d="..." transform="skewX(45)"/> 
8. 8.

   <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path

   d="..." transform="skewX(45)"/> 
9. 9.

   <path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path

   d="..." transform="skewX(45)"/> 
10. 10.

    transform="scale(1.5) rotate(45)" 

11. 11.

    TDBMF  USBOTMBUF   SPUBUF    TLFX9

     TLFX:  NBUSJY       ֦େॖখ Ҡಈ ճసͱͦͷத৺ εΩϡʔ ࣼ܏ม׵
    ԣ εΩϡʔ ࣼ܏ม׵
    ॎ ߦྻม׵
12. 12.

     selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform

    : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }
13. 13.

    None
14. 14.

    Ҡಈɺ֦େॖখɺճసɺεΩϡʔ ଐੑͰࢦఆ͢Δ 

15. 15.

    MJOL 

16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
20. 20.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
21. 21.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
22. 22.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
23. 23.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
24. 24.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="http://google.com"> <path d="..." /> </a> </svg>

    
25. 25.

    )5.-ͷBཁૉʹࣅ͍ͯΔ ܗঢ়ʹ߹ΘͤͨϦϯΫ൑ఆ 9-JOLͷ࢓૊ΈΛ࢖͏ͨΊ ໊લۭؒΛએݴ͢Δ 

26. 26.

    4UZMJOH 

27. 27.

    None
28. 28.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
29. 29.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
30. 30.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
31. 31.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
32. 32.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
33. 33.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
34. 34.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>

    </defs> <path id="sample" d="..." /> </svg> 
35. 35.

    EJTQMBZ pMM pMMSVMF pMMPQBDJUZ TUSPLF TUSPLFXJEUI දࣔ ృΓ৭ ಺ଆɺ֎ଆɺॏͳΓͷృΓํ ృΓ৭ͷෆಁ໌౓

    ࿮ઢͷ৭ ࿮ઢͷ෯
36. 36.

    ॻ͖ํ͸Ұൠͷ$44ͱಉ͡ ϓϩύςΟʔ͸47(ಠࣗ 

37. 37.

    path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }

    
38. 38.

    path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }

    
39. 39.

    path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }

    
40. 40.

    None
41. 41.

    ٖࣅΫϥε͕༗ޮ ϝσΟΞΫΤϦʔ͕༗ޮ 

42. 42.

    pMUFS
    F⒎FDUT 

43. 43.

    None
44. 44.

    None
45. 45.

    None
46. 46.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
47. 47.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
48. 48.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
49. 49.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
50. 50.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
51. 51.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
52. 52.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
53. 53.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
54. 54.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
55. 55.

    None
56. 56.

    ݪ࢝ϑΟϧλʔ

57. 57.

    <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="MyFilter"> <feGaussianBlur stdDeviation="5"> </filter> </defs> <g

    filter="url(#MyFilter)"> <path d="..." /> </g> </svg> 
58. 58.

    GF#MFOE GF$PMPS.BUSJY GF'MPPE GF(BVTTJBO#MVS GF.FSHF GF0⒎TFU ࠞ߹ ৭ͷߦྻม׵ ృΓͭͿ͠ ΅͔͠

    ߹੒ ҐஔͣΒ͠
59. 59.

    ݪ࢝ϑΟϧλʔ૊Έ߹Θͤྫ

60. 60.

    None
61. 61.

    None
62. 62.

    None
63. 63.

    in="sourceAplha"

64. 64.

    <feGaussianBlur/>

65. 65.

    <feOffet/>

66. 66.

    in="sourceGraphic"

67. 67.

    <feMerge/>

68. 68.

    None
69. 69.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
70. 70.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
71. 71.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
72. 72.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
73. 73.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
74. 74.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
75. 75.

    <filter id="DropShadow"> <feGaussianBlur in="sourceAlpha" stdDeviation="5" result="blur"/> <feOffet in="blur" dx="5" dy="5"

    result="offetBlur"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="sourceGraphic"/> </feMerge> </filter> 
76. 76.

    None
77. 77.

    ༷ʑͳࢹ֮ޮՌ ݪ࢝ϑΟϧλʔΛ૊Έ߹ΘͤΔ $44Ͱ΋ར༻Մೳ 

78. 78.

    "OJNBUJPO
    4.*- 

79. 79.

    None
80. 80.

    None
81. 81.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
82. 82.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
83. 83.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
84. 84.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
85. 85.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
86. 86.

    <rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>

    </rect> <path id="guide" d="..."/> 
87. 87.

    ৭΍ҐஔΛΞχϝʔγϣϯ มܗ༻Ξχϝʔγϣϯ ύεʹԊͬͨҠಈͷΞχϝʔγϣϯ 

88. 88.

    4DSJQU 

89. 89.

    None
90. 90.

    <svg xmlns="http://www.w3.org/2000/svg"> <g id="sample" ...> <path d="..."/> </g> <script type="application/ecmascript">

    document.querySelector("#sample").addEventListener("click", function(){ this.setAttribute("fill","red"); alert("Clicked !!"); }, false); </script> </svg> 
91. 91.

    εΫϦϓτ΋ಈ͘ Ϛ΢εͷҐஔΛऔಘ͢ΔͳͲ΋Մೳ K2VFSZ͸ಈ͔ͳ͍ 

92. 92.

    &NCFE 

93. 93.

    None
94. 94.

    ը૾ͱͯ͠ಡΈࠐΉ

95. 95.

    <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body> 

96. 96.

    <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body> 

97. 97.

    υΩϡϝϯτͱͯࠞ͠ࡏ

98. 98.

    <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path

    d="..." /> <path d="..." /> </svg> </body> 
99. 99.

    <body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path

    d="..." /> <path d="..." /> </svg> </body> 
100. 100.

     ॻ͍ͨඳ͍ͨ47(͸)5.-Ͱ࢖͑Δ ը૾ͱͯ͠ υΩϡϝϯτͱͯ͠ 

101. 101.

      ิ଍

102. 102.

     None
103. 103.

     3BQIBËMŠ+BWB4DSJQU
     -JCSBSZ IUUQSBQIBFMKTDPN

104. 104.

     ·ͱΊ 

105. 105.

     )5.-ͱ47(͸ࣅ͍ͯΔ

106. 106.

     ͋ͨΒ͍͠6*͕Ͱ͖Δʂ

107. 107.

     ϐΫηϧάϦου খࢁా
     ߊߒ
     
     ֎ଜ
     ࿨ਔ