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

Cool Staff of SVG

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for huozhi huozhi
November 23, 2016
Technology
0
220

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
130

Other Decks in Technology

See All in Technology
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
2026-03-11 JAWS-UG 茨城 #12 改めてALBを便利に使う
Avatar for SUZUKI Masashi masasuzu
2
340
生成AIの利用とセキュリティ /gen-ai-and-security
Avatar for Masayoshi Mizutani mizutani
1
1.6k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
8
7.2k
Google系サービスで文字起こしから勝手にカレンダーを埋めるエージェントを作った話
Avatar for RisaTube risatube
0
100
技術的負債の泥沼から組織を救う3つの転換点
Avatar for nwiizo nwiizo
8
3.5k
作りっぱなしで終わらせない！ 価値を出し続ける AI エージェントのための「信頼性」設計 / Designing Reliability for AI Agents that Deliver Continuous Value
Avatar for Kento Kimura aoto
PRO
2
270
僕、S3 　シンプルって名前だけど全然シンプルじゃありません　よろしくお願いします
Avatar for Yuuki Yamashita yama3133
1
190
DevOpsエージェントで実現する!！ AWS Well-Architected（W-A） を実現するシステム設計 / 20260307 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
510
Datadog の RBAC のすべて
Avatar for 株式会社ヌーラボ nulabinc
PRO
3
440
8万デプロイ
Avatar for iwamot iwamot
PRO
2
230
元エンジニアPdM、IDEが恋しすぎてCursorに全業務を集約したら、スライド作成まで爆速になった話
Avatar for "doiko" chiaki_yamaguchi doiko123
1
580

Featured

See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
170
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
130
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
240
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
99
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
780
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
120
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
64
53k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k

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