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
200

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
110

Other Decks in Technology

See All in Technology
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
Avatar for Kenichi SUZUKI knih
0
6.2k
FFMとJVMの実装から学ぶJavaのインテグリティ
Avatar for Kenji Kazumura kazumura
0
150
Axon Frameworkのイベントストアを独自拡張した話
Avatar for ZOZO Developers zozotech
PRO
0
220
Javaコミュニティの歩き方 ～参加から貢献まで、すべて教えます～
Avatar for Daishi Tabata tabatad
0
140
アジャイル社内普及ご近所さんマップを作ろう / Let's create an agile neighborhood map
Avatar for Satoshi Harada psj59129
1
140
SRE視点で振り返るメルカリのアーキテクチャ変遷と普遍的な考え
Avatar for foostan foostan
2
400
社内外から"使ってもらえる"データ基盤を支えるアーキテクチャの秘訣/登壇資料（飯塚 大地・高橋 一貴）
Avatar for Hacobu hacobu
PRO
0
3.4k
Bedrock のコスト監視設計
Avatar for Hayato Kawai fohte
2
200
Moto: Latent Motion Token as the Bridging Language for Learning Robot Manipulation from Videos
Avatar for peisuke peisuke
0
160
ある編集者のこれまでとこれから —— 開発者コミュニティと歩んだ四半世紀
Avatar for 稲尾尚徳 inao
5
3.5k
Post-AIコーディング時代のエンジニア生存戦略
Avatar for shinoyu shinoyu
0
300
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
Avatar for ZOZO Developers zozotech
PRO
0
210

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
980

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