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
630
PBR in three.js
yomotsu
1
940
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
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
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
Updates on MLS on Ruby (and maybe more)
sylph01
1
160
Laravel Boost 超入門
fire_arlo
2
160
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
720
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
OSS開発者という働き方
andpad
5
1.5k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.8k
AHC051解法紹介
eijirou
0
640
AIでLINEスタンプを作ってみた
eycjur
1
220
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Making Projects Easy
brettharned
117
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Agile that works and the tools we love
rasmusluckow
330
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Visualization
eitanlees
147
16k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Being A Developer After 40
akosma
90
590k
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*͕Ͱ͖Δʂ
ϐΫηϧάϦου খࢁాߊߒ֎ଜਔ