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

Cool Staff of SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for huozhi huozhi
November 23, 2016
Technology
230
0

Cool Staff of SVG

Interesting ideas of SVG. Cook with React.

Avatar for huozhi

huozhi

November 23, 2016

More Decks by huozhi

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

Other Decks in Technology

See All in Technology
Claude Code×Terraform IaC テンプレート駆動開発
Avatar for Itou Hideki itouhi
1
400
Databricks における 生成AIガバナンスの実践
Avatar for Takaaki Yayoi taka_aki
1
330
noUncheckedIndexedAccess、3時間、1万円。 / noUncheckedIndexedAccess, 3 Hours, 10,000 JPY.
Avatar for 株式会社カオナビ kaonavi
1
310
コードレビューを制するチームがソフトウェアデリバリーのフローを制す / Beyond Code Review: Distributing Its Responsibilities Across the SDLC
Avatar for mtx2s mtx2s
4
1.2k
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
210
美味しいスイスチーズを作ろう🧀🐭
Avatar for Taiga Mikami taigamikami
1
260
10倍の生産性を実現するAI駆動並列エージェントのすべて
Avatar for 熊井悠 kumaiu
4
830
2026.06.13_AI時代に事業会社が「SIer出身エンジニア」を求める理由 / Why Businesses Seek Engineers with a System Integrator Background in the AI ​​Era
Avatar for jumpei_ikegami jumtech
0
580
Chart.js が簡単に使えるようになっていたので OGP 画像生成に使った話
Avatar for すずとも kamekyame
0
170
Ruby::Boxでできること、Refinementsでできること
Avatar for Tomohiro Hashidate joker1007
3
400
Agentic Web
Avatar for dynamis dynamis
1
160
チームで実践する AI-DLC 思考の軌跡を残すチェックポイント設計
Avatar for Belong inc. belongadmin
0
2.8k

Featured

See All Featured
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
320
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
270
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
480
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
960
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
940
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
200

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