Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Cool Staff of SVG

Avatar for huozhi huozhi
November 23, 2016
Technology
240
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
140

Other Decks in Technology

See All in Technology
バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ
Avatar for 尾﨑勇太/Yuta Ozaki waiwai2111
1
150
AI coding 整合正規方法
Avatar for philipz philipz
0
550
音声コミュニティを守るAI監視基盤_ 90%以上の入力削減を支えたServerless設計と運用判断
Avatar for 岡修平 shuheioka123
0
110
HolmesGPTで始めるSREエージェント入門！プラットフォームの障害調査はAIにお任せ 〜
Avatar for SANGHYUK LEE sanghyuk
0
160
技術的負債から考える、AI時代のエンジニアリング投資 — ビズリーチの技術的負債と向き合った経験から、変更し続けられるソフトウェアを考える/ technical-debt-con2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
3.8k
AWS FinOps Agent 結局何が得意なの？
Avatar for Siromi siromi
0
170
AIで社員の自主発信に広報目線を組み込む
Avatar for もっさん _mossann_t
0
150
データ_AIの事業の勝敗をわけるもの
Avatar for KJ(Kenji Matsuda) nek0128
1
480
Harness Engineering on Rails
Avatar for Joël Quenneville joelq
0
560
What the customer really needed
Avatar for Yasunobu Kawaguchi kawaguti
PRO
3
230
時うどん〜Socket.getifaddrsで学ぶネットワーク編 / Tokiudon: The Socket.getifaddrs Edition
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
4
270
SREへの勘違いに気づいた後の話
Avatar for yuden tomodakengo
0
160

Featured

See All Featured
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
2
290
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.9k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
490
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
410
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
830
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k

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