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
Cool Staff of SVG
Search
huozhi
November 23, 2016
Technology
0
190
Cool Staff of SVG
Interesting ideas of SVG. Cook with React.
huozhi
November 23, 2016
Tweet
Share
More Decks by huozhi
See All by huozhi
About Compilation
huozhi
0
99
Other Decks in Technology
See All in Technology
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
120
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
Autify Company Deck
autifyhq
2
44k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
shake-upを科学する
rsakata
7
1k
Data Engineering Study#30 LT資料
tetsuroito
1
200
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for Performance
lara
610
69k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Rails Girls Zürich Keynote
gr2m
95
14k
A Tale of Four Properties
chriscoyier
160
23k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
Cool Staff of SVG We LOVE ❤ SVG
Fundamental SVG reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths Shape A + Shape B =>
Awesome Graphics line path circle rect polyline polygon ellipse
Why SVG? What’s special? Easily controlled by PROPS fill, stroke-width,
stroke-linecap Good Compatibility DOM structured <svg><path d=“…”></svg> Positioning easily x, y, r, cx, cy, x1, y1…
Control Your SVG with React Original Way Now we have
React ! =>
RESPINNER was born ! https://huozhi.github.io/respinner/
Improve present situation we wanna control more details only single
path icons?
REICONS was born ! https://huozhi.github.io/reicons/
Complex Application Scenarios d3 force layout graph multi-layer dependency complex
relationship d3 geographic map fancy background image meaning data visualization
Interesting Extension ISOMORPHIC JS Service serve static icons generate graphics
request specific query, response dynamic visual display
– huozhi Q & A