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
200

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
120

Other Decks in Technology

See All in Technology
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
Avatar for Tomoaki tomoaki25
6
2.4k
AWS re:Invent 2025~初参加の成果と学び~
Avatar for Kubo kubomasataka
1
200
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
Avatar for tomo gamella
0
460
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
Avatar for みのるん minorun365
2
470
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
0
270
Identity Management for Agentic AI 解説
Avatar for Naohiro Fujie fujie
0
490
さくらのクラウド開発ふりかえり2025
Avatar for kazeburo kazeburo
2
1.2k
100以上の新規コネクタ提供を可能にしたアーキテクチャ
Avatar for yu-kioo ooyukioo
0
260
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
220
AWS運用を効率化する！AWS Organizationsを軸にした一元管理の実践/nikkei-tech-talk-202512
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
510
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
1
770

Featured

See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
98
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
320
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
380
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
580
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
130
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
860
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
190
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
190

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