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
GyaPC::Asia Tokyo 2016 LT
Search
daiiz
November 23, 2016
Programming
0
630
GyaPC::Asia Tokyo 2016 LT
SVG ScreenShot
https://svgscreenshot.appspot.com/
についての話です
daiiz
November 23, 2016
Tweet
Share
More Decks by daiiz
See All by daiiz
Dentoo.LT #15
daiz713
0
790
Apricot LT
daiz713
1
270
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
190
What's new in Spring Modulith?
olivergierke
1
150
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
CSC305 Lecture 03
javiergs
PRO
0
240
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
株式会社 Sun terras カンパニーデック
sunterras
0
310
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.2k
チームの境界をブチ抜いていけ
tokai235
0
180
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Statistics for Hackers
jakevdp
799
220k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Faster Mobile Websites
deanohume
310
31k
How to Think Like a Performance Engineer
csswizardry
27
2k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Transcript
$ISPNF֦ுػೳ ʮ47(4DSFFO4IPUʯ ͷ։ൃ !EBJ[QMVT (ZB1$"TJB5PLZP
ࣗݾհ ɾ!EBJ[QMVTJEEBJJ[ ɾిؾ௨৴େֶ#
Σϒϖʔδͷ εΫϦʔϯγϣοτ
ΣϒϖʔδͷεΫϦʔϯγϣοτ ɾʑࡱΓͨΊΔ ɹɹɾษڧɺௐͷ ɾϝʔϧͰૹΒΕͯ͘Δ ɾ4/4Ͱݟ͚ͭΔ
εΫϦʔϯγϣοτ͕ ࡱΒΕͨΣϒϖʔδ ΛಡΈ͍ͨ
εΫϦʔϯγϣοτ ʹؚ·Ε͍ͯΔ ϦϯΫઌͷϖʔδ ΛಡΈ͍ͨ
47(4DSFFO4IPU $ISPNF֦ு ΣϒΞϓϦ
ɾΩϟϓνϟ ɾҰཡ ɾϓϨϏϡʔ ɾຒΊࠐΈ
Ωϟϓνϟ ࢦఆൣғͷը૾ ʴ ࡱӨݩϖʔδ63- ʴ ϖʔδϦϯΫใ
Ωϟϓνϟ ࢦఆൣғͷը૾ ɾ#BDLHSPVOEQBHF ɾchrome.tabs.captureVisibleTab() ϖʔδϦϯΫҐஔͱαΠζ ɾ$POUFOUTDSJQUT ɾgetBoundingClientRect()
<svg data-url> <image> … </image> <a> <rect></rect> <text> … </text>
</a> <a> <rect></rect> <text> … </text> </a> </svg> ࡱӨൣғ ͷϦϯΫใ ʢ63- ҐஔͳͲʣ ࡱӨൣғ ͷΩϟϓνϟը૾ Ωϟϓνϟ
Ωϟϓνϟ
͜Ε·Ͱʹ࡞ͨ͠ εΫϦʔϯγϣοτΛ ϦετΞοϓ Ұཡ
Ұཡ
47(εΫϦʔϯγϣοτ ͷϓϨϏϡʔϖʔδ ϓϨϏϡʔ
ϓϨϏϡʔ
47(εΫϦʔϯγϣοτ ΛϖʔδʹຒΊࠐΜͰ ڞ༗͢Δ αΠτʹຒΊࠐΉ
αΠτʹຒΊࠐΉ svgλάΑΓ imgλάͷํ͕ ຒΊࠐΈ͍͢ͱࢥ͏
svgͷΘΓʹpngΛఏڙ imgλάͰදࣔ pngΛݟ͚ͭ࣍ୈ.svgͷ ϨΠϠʔΛੜ ֦ுػೳ αΠτʹຒΊࠐΉ
47(εΫϦʔϯ γϣοτΛࡱͬͯ 4DSBQCPYʹ షΓ͚ΔྲྀΕ
֦ுػೳͰࡱӨ͢Δ
pngը૾ͷ63-Λऔಘ
pngը૾ΛషΓ͚
ը૾͕දࣔ͞ΕΔ
onmouseͨ͠ͱ͖͚ͩsvg͕දࣔ͞ΕΔ
47(4DSFFO4IPU IUUQTTWHTDSFFOTIPUBQQTQPUDPN