Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cool Staff of SVG

Avatar for huozhi huozhi
November 23, 2016
Technology
0
190

Cool Staff of SVG

Interesting ideas of SVG. Cook with React.
Avatar for huozhi

huozhi

November 23, 2016
Tweet

More Decks by huozhi

See All by huozhi
About Compilation
Avatar for huozhi huozhi
0
98

Other Decks in Technology

See All in Technology
事業成長の裏側：エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
18k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
Avatar for sergicalsix sergicalsix
1
200
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
2
920
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.3k
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
570
改めてAWS WAFを振り返る～業務で使うためのポイント～
Avatar for モブエンジニア masakiokuda
2
230
Lazy application authentication with Tailscale
Avatar for Elliot Blackburn bluehatbrit
0
160
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
Avatar for あれ __allllllllez__
1
130
モバイル界のMCPを考える
Avatar for naoto33 naoto33
0
410
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
Avatar for upamune / Yu SERIZAWA upamune
7
5.1k
KubeCon + CloudNativeCon Japan 2025 に行ってきた！ & containerd の新機能紹介
Avatar for Honahuku honahuku
0
120
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
170

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
730
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
680
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
234
140k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k

Transcript

  1. Cool Staff of SVG We LOVE ❤ SVG

  2. 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

  3. 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…

  4. Control Your SVG with React Original Way Now we have

    React ! =>

  5. RESPINNER was born ! https://huozhi.github.io/respinner/

  6. Improve present situation we wanna control more details only single

    path icons?

  7. REICONS was born ! https://huozhi.github.io/reicons/

  8. Complex Application Scenarios d3 force layout graph multi-layer dependency complex

    relationship d3 geographic map fancy background image meaning data visualization

  9. Interesting Extension ISOMORPHIC JS Service serve static icons generate graphics

    request specific query, response dynamic visual display

  10. – huozhi Q & A