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

Cool Staff of SVG

Avatar for huozhi huozhi
November 23, 2016
Technology
0
190

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
99

Other Decks in Technology

See All in Technology
Microsoft Defender XDRで疲弊しないためのインシデント対応
Avatar for Kunii, Suguru sophiakunii
1
320
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
Avatar for Shinichi Nakagawa shinyorke
PRO
0
120
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
Avatar for VTRyo vtryo
3
1.9k
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
190
Autify Company Deck
Avatar for Autify autifyhq
2
44k
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
Avatar for kohbis kohbis
3
1.5k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
Avatar for shotaTsuge shotatsuge
4
1k
サービスを止めるな！ DDoS攻撃へのスマートな備えと最前線の事例
Avatar for coconala_engineer coconala_engineer
1
180
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
Avatar for ニフティ株式会社 niftycorp
PRO
1
520
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
Avatar for katsukamaru shin1988
2
2.1k
shake-upを科学する
Avatar for Jack rsakata
7
1k
Data Engineering Study#30 LT資料
Avatar for tetsuroito tetsuroito
1
200

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
700
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k

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