Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dive into SVG
Search
yomotsu
August 21, 2011
Programming
0
290
Dive into SVG
yomotsu
August 21, 2011
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
470
PBR in three.js
yomotsu
1
860
dialog要素でつくるモーダルダイアログ
yomotsu
0
980
IE to Edge
yomotsu
1
330
A Camera Control Library for three.js
yomotsu
1
1.2k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
540
WebXR: Beyond WebGL
yomotsu
2
1.7k
Non-DOM components with WebGL in Vue.js
yomotsu
5
12k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
Other Decks in Programming
See All in Programming
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
190
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
320
Jakarta EE meets AI
ivargrimstad
0
720
楽しく向き合う例外対応
okutsu
0
740
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
430
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
180
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
190
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
360
バッチを作らなきゃとなったときに考えること
irof
2
560
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Designing Experiences People Love
moore
140
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
͓·͖ͩ͋ͻΖ খࢁాߊߒ UXJUUFS!ZPNPUTV גࣜձࣾϐΫηϧάϦου .JDSPTPGU.71GPS*&
ޙͷྲྀΕ 5SBOTGPSN -JOL 4UZMJOH 'JMUFS
"OJNBUJPO 4DSJQU &NCFE ·ͱΊ
USBOTGPSN Ҡಈɺ֦େॖখɺճసɺεΩϡʔ
None
None
<path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path
d="..." transform="skewX(45)"/>
<path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path
d="..." transform="skewX(45)"/>
<path d="..." transform="translate(30,30)"/> <path d="..." transform="scale(1.5)"/> <path d="..." transform="rotate(30,0,0)"/> <path
d="..." transform="skewX(45)"/>
transform="scale(1.5) rotate(45)"
TDBMF USBOTMBUF SPUBUF TLFX9
TLFX: NBUSJY ֦େॖখ Ҡಈ ճసͱͦͷத৺ εΩϡʔ ࣼมԣ εΩϡʔ ࣼมॎ ߦྻม
selector { -webkit-transform : rotate(45deg); -moz-transform : rotate(45deg); -ms-transform
: rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); }
None
Ҡಈɺ֦େॖখɺճసɺεΩϡʔ ଐੑͰࢦఆ͢Δ
MJOL
None
None
None
<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>
<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>
<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>
<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>
<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>
<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>
)5.-ͷBཁૉʹࣅ͍ͯΔ ܗঢ়ʹ߹ΘͤͨϦϯΫఆ 9-JOLͷΈΛ͏ͨΊ ໊લۭؒΛએݴ͢Δ
4UZMJOH
None
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"> path#sample{ fill: #FFAA00; } </style>
</defs> <path id="sample" d="..." /> </svg>
EJTQMBZ pMM pMMSVMF pMMPQBDJUZ TUSPLF TUSPLFXJEUI දࣔ ృΓ৭ ଆɺ֎ଆɺॏͳΓͷృΓํ ృΓ৭ͷෆಁ໌
ઢͷ৭ ઢͷ෯
ॻ͖ํҰൠͷ$44ͱಉ͡ ϓϩύςΟʔ47(ಠࣗ
path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }
path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }
path:hover{ fill-opacity:0.5; } @media(max-width:400px){ path{ fill:#36f; stroke:#000; stroke-width:6; } }
None
ٖࣅΫϥε͕༗ޮ ϝσΟΞΫΤϦʔ͕༗ޮ
pMUFSF⒎FDUT
None
None
None
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
None
ݪ࢝ϑΟϧλʔ
<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>
GF#MFOE GF$PMPS.BUSJY GF'MPPE GF(BVTTJBO#MVS GF.FSHF GF0⒎TFU ࠞ߹ ৭ͷߦྻม ృΓͭͿ͠ ΅͔͠
߹ ҐஔͣΒ͠
ݪ࢝ϑΟϧλʔΈ߹Θͤྫ
None
None
None
in="sourceAplha"
<feGaussianBlur/>
<feOffet/>
in="sourceGraphic"
<feMerge/>
None
<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>
<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>
<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>
<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>
<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>
<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>
<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>
None
༷ʑͳࢹ֮ޮՌ ݪ࢝ϑΟϧλʔΛΈ߹ΘͤΔ $44Ͱར༻Մೳ
"OJNBUJPO 4.*-
None
None
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
<rect width="100" height="100" fill="#0099FF"> <animateMotion dur="3s" rotate="auto"> <mpath xlink:href="#guide"/> </animateMotion>
</rect> <path id="guide" d="..."/>
৭ҐஔΛΞχϝʔγϣϯ มܗ༻Ξχϝʔγϣϯ ύεʹԊͬͨҠಈͷΞχϝʔγϣϯ
4DSJQU
None
<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>
εΫϦϓτಈ͘ ϚεͷҐஔΛऔಘ͢ΔͳͲՄೳ K2VFSZಈ͔ͳ͍
&NCFE
None
ը૾ͱͯ͠ಡΈࠐΉ
<body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body>
<body> <h1>img ཁૉͰຒΊࠐΉ</h1> <img src="image.svg" alt=""> </body>
υΩϡϝϯτͱͯࠞ͠ࡏ
<body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path
d="..." /> <path d="..." /> </svg> </body>
<body> <h1>img ཁૉͰຒΊࠐΉ</h1> <svg width="300" height="300"> <path d="..." /> <path
d="..." /> <path d="..." /> </svg> </body>
ॻ͍ͨඳ͍ͨ47()5.-Ͱ͑Δ ը૾ͱͯ͠ υΩϡϝϯτͱͯ͠
ิ
None
3BQIBËM+BWB4DSJQU-JCSBSZ IUUQSBQIBFMKTDPN
·ͱΊ
)5.-ͱ47(ࣅ͍ͯΔ
͋ͨΒ͍͠6*͕Ͱ͖Δʂ
ϐΫηϧάϦου খࢁాߊߒ֎ଜਔ