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
120
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
86
Other Decks in Technology
See All in Technology
SwiftUIのpropertyWrapperをふんわり理解する
jambo_develop_team
0
110
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
150
Azure AI サービス全体像と Prompt flow 紹介 - Forkwell Library
shohei1029
1
590
庁舎DX推進ガイドブック
senryakuka
0
1.7k
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
480
進化する事業とデータ構造 ~Cloudbaseの場合~
tockn
2
230
SecurityCamp2023基板作るコース講義資料/Security Camp 2023 Lecture Materials
tnishinaga
5
1.3k
Server-Side Kotlin + Spring Boot + Exposedでやったこと
ikefukurou777
0
110
テストだけで品質は上がらない?! エセ自己組織化した品質組織からの脱却 / JaSST'24 Tokyo
visional_engineering_and_design
9
3k
令和最新版 ソフトウェアエンジニアのためのDJ入門、あるいはDJに学ぶ仕事術 #ya8
stefafafan
1
130
B+木入門:PHPで理解する データベースインデックスの仕組み/b-plus-tree-101
hanhan1978
5
2.7k
Webエンジニアのためのデータエンジニアリング概説
mtoriyama000
5
400
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
Designing for humans not robots
tammielis
247
25k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
In The Pink: A Labor of Love
frogandcode
137
21k
Writing Fast Ruby
sferik
619
59k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.1k
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