Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cool Staff of SVG
Search
huozhi
November 23, 2016
Technology
0
180
Cool Staff of SVG
Interesting ideas of SVG. Cook with React.
huozhi
November 23, 2016
Tweet
Share
More Decks by huozhi
See All by huozhi
About Compilation
huozhi
0
98
Other Decks in Technology
See All in Technology
ビギナーであり続ける/beginning
ikuodanaka
3
640
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
OPENLOGI Company Profile
hr01
0
67k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
260
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
120
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
100
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
4.7k
MobileActOsaka_250704.pdf
akaitadaaki
0
100
Connect 100+を支える技術
kanyamaguc
0
170
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Six Lessons from altMBA
skipperchong
28
3.9k
BBQ
matthewcrist
89
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Balancing Empowerment & Direction
lara
1
400
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Code Review Best Practice
trishagee
69
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Cool Staff of SVG We LOVE ❤ SVG
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
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…
Control Your SVG with React Original Way Now we have
React ! =>
RESPINNER was born ! https://huozhi.github.io/respinner/
Improve present situation we wanna control more details only single
path icons?
REICONS was born ! https://huozhi.github.io/reicons/
Complex Application Scenarios d3 force layout graph multi-layer dependency complex
relationship d3 geographic map fancy background image meaning data visualization
Interesting Extension ISOMORPHIC JS Service serve static icons generate graphics
request specific query, response dynamic visual display
– huozhi Q & A