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
150
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
97
Other Decks in Technology
See All in Technology
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
0
320
新入社員 オンボーディング改善プロジェクト - シンプルな仕組みで変革のきっかけを
enpipi
0
440
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
160
Transforming Event Attendees into Lifelong Donors: Insights from Claire Axelrad
auctria
PRO
1
110
太田博三(@usagisan2020)
otanet
0
150
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
290
今日から始める技術的負債の解消
leveragestech
3
440
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
140
Snowflakeでスロークエリ改善に取り組んだ話
tabata0208
0
110
JAWS-UG 事務局 の「これまで」から みんなで「ここから」を考えよう
miu_crescent
2
140
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
480
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
170
Featured
See All Featured
Visualization
eitanlees
143
15k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Testing 201, or: Great Expectations
jmmastey
38
7k
Automating Front-end Workflow
addyosmani
1365
200k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Side Projects
sachag
452
42k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Teambox: Starting and Learning
jrom
132
8.7k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
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