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
300
Dive into SVG
yomotsu
August 21, 2011
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
590
PBR in three.js
yomotsu
1
920
dialog要素でつくるモーダルダイアログ
yomotsu
0
1k
IE to Edge
yomotsu
1
350
A Camera Control Library for three.js
yomotsu
1
1.3k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
550
WebXR: Beyond WebGL
yomotsu
2
1.8k
Non-DOM components with WebGL in Vue.js
yomotsu
5
13k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
740
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
880
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
PicoRuby on Rails
makicamel
2
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A better future with KSS
kneath
239
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
For a Future-Friendly Web
brad_frost
179
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Faster Mobile Websites
deanohume
307
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
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*͕Ͱ͖Δʂ
ϐΫηϧάϦου খࢁాߊߒ֎ଜਔ