Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cool Staff of SVG

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for huozhi huozhi
November 23, 2016
Technology
0
220

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
130

Other Decks in Technology

See All in Technology
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
390
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
3
2k
FastMCP OAuth Proxy with Cognito
Avatar for iganin hironobuiga
3
220
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for kaomi kaomi_wombat
0
260
Bref でサービスを運用している話
Avatar for Sugar Sato sgash708
0
200
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
The essence of decision-making lies in primary data
Avatar for 株式会社カミナシ kaminashi
0
160
MCPで決済に楽にする
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
150
BFCacheを活用して無限スクロールのUX を改善した話
Avatar for Ryuya Yanagi apple_yagi
0
130
QA組織のAI戦略とAIテスト設計システムAITASの実践
Avatar for SansanTech sansantech
PRO
1
220
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
130
OCI技術資料 : 証明書サービス概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
1
7.1k

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
82
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
290
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.2k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
290
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.5k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
200

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