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
850
dialog要素でつくるモーダルダイアログ
yomotsu
0
970
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
530
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
AWS Amplify Gen2 を活用して社内サービスを1ヶ月でリリースした話
machin19
1
100
Learning Kotlin with detekt
inouehi
1
140
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
240
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.3k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
310
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
140
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
sappoRo.R #12 初心者セッション
kosugitti
0
280
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Designing for humans not robots
tammielis
250
25k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Statistics for Hackers
jakevdp
797
220k
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*͕Ͱ͖Δʂ
ϐΫηϧάϦου খࢁాߊߒ֎ଜਔ