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
98
Other Decks in Technology
See All in Technology
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
18k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
200
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
920
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
570
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
Lazy application authentication with Tailscale
bluehatbrit
0
160
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
130
モバイル界のMCPを考える
naoto33
0
410
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Making Projects Easy
brettharned
116
6.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Adaptive Systems
keathley
43
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
A better future with KSS
kneath
239
17k
Music & Morning Musume
bryan
46
6.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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