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

Cool Staff of SVG

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for huozhi huozhi
November 23, 2016
Technology
230
0

Cool Staff of SVG

Interesting ideas of SVG. Cook with React.

Avatar for huozhi

huozhi

November 23, 2016

More Decks by huozhi

See All by huozhi
About Compilation
Avatar for huozhi huozhi
0
130

Other Decks in Technology

See All in Technology
20260515 ログイン機能だけではないアカウント管理を全体で考える～サービス設計者向け～
Avatar for OpenID Foundation Japan oidfj
0
130
自動テストだけで
リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
Avatar for えわ ewa
7
3.7k
クラウドネイティブ DB はいかにして制約を 克服したか？ 〜進化歴史から紐解く、スケーラブルアーキテクチャ設計指針〜
Avatar for hacomono Inc. hacomono
PRO
6
940
PdM・Eng・QAで進めるAI駆動開発の現在地/aidd-with-pdm-eng-qa
Avatar for butatamasoba / Shota Kusaba / 草場翔太 shota_kusaba
0
220
ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する
Avatar for did0es shuta13
3
310
AIのための特別なアーキテクチャはいらない 0→1開発で実践した設計原則とガードレール
Avatar for 株式会社カミナシ kaminashi
0
110
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
1
120
そのSLO 99.9%、本当に必要ですか？ 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
Avatar for VTRyo vtryo
0
700
Swift Sequence の便利 API 再発見
Avatar for treastrain / Tanaka Ryoga treastrain
1
270
可視化から活用へ — Mesh化・Segmentation・アライメントの研究動向
Avatar for GPU UNITE gpuunite_official
0
190
ボトムアップ限界を越える - 20チームを束る "Drive Map" / Beyond Bottom-Up: A 'Drive Map' for 20 Teams
Avatar for 株式会社カオナビ kaonavi
0
200
知ってた？JavaScriptの"正しさ"を検証するテストが5万以上もあること(Test262)
Avatar for Riya Amemiya riyaamemiya
1
200

Featured

See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
120
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
770
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
500
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
44k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
350

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