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
自分が詳しくない領域でAIを使う #プロヒス2026
Avatar for konifar konifar
20
8.1k
AIは、人間らしい仕事の夢を見るか？─ AI時代のtoB/toEプロダクトを再設計する
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
190
どうして今サーバーサイドKotlinを選択したのか
Avatar for Nealle nealle
0
150
toB プロダクトから見たWAF
Avatar for tokai235 tokai235
0
260
テスト設計の本質を改めて考えてみる～生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう～
Avatar for YAMASAKI Takashi yamasaki696
1
210
はてなのサービス基盤を支える Kubernetes《足腰》
Avatar for masayosu masayoshimaezawa
0
310
初めてのDatabricks勉強会
Avatar for Takaaki Yayoi taka_aki
2
210
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
Avatar for SadayoshiTada taddy_919
1
290
打造你的 AI 工作流：Agent Skill + MCP 實戰工作坊
Avatar for Bo-Yi Wu appleboy
0
250
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
130
Foundry Toolkit + Lemonade Serverでローカルワークフロー開発
Avatar for 瀬尾佳隆 seosoft
0
110
NDIAS CTF 2026 問題解説会資料
Avatar for bata_24 bata_24
0
140

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
230
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
230
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
240
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
740
HDC tutorial
Avatar for Michiel Stock michielstock
2
730
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620

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