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
640
PBR in three.js
yomotsu
1
940
dialog要素でつくるモーダルダイアログ
yomotsu
0
1k
IE to Edge
yomotsu
1
360
A Camera Control Library for three.js
yomotsu
1
1.3k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
560
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
Rancher と Terraform
fufuhu
2
550
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
Ruby Parser progress report 2025
yui_knk
1
460
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Cache Me If You Can
ryunen344
2
3.1k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
KATA
mclloyd
32
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Why Our Code Smells
bkeepers
PRO
339
57k
How to Ace a Technical Interview
jacobian
279
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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*͕Ͱ͖Δʂ
ϐΫηϧάϦου খࢁాߊߒ֎ଜਔ