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
130
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
87
Other Decks in Technology
See All in Technology
PHPカンファレンス小田原2024
ysknsid25
3
660
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
190
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
NgRx Signal Store
rainerhahnekamp
0
120
日本におけるデータエンジニアリングのこれまでとこれから
foursue
11
2.4k
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
150
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
0
220
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Featured
See All Featured
Building Applications with DynamoDB
mza
88
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Music & Morning Musume
bryan
41
5.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
What the flash - Photography Introduction
edds
64
11k
GitHub's CSS Performance
jonrohan
1023
450k
A Philosophy of Restraint
colly
196
16k
Designing the Hi-DPI Web
ddemaree
276
33k
Statistics for Hackers
jakevdp
789
220k
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