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

Cool Staff of SVG

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
キャリアLT会#3
Avatar for Beli beli68
2
250
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
1
140
JAWS_ICEBERG_BASECAMP
Avatar for IQBocchi iqbocchi
2
110
Aurora MySQL 8.4リリース！ Rubyistが備えること / what-rubyist-should-prepare-for-aurora-mysql-8-4
Avatar for Yuki Fukuma fkmy
0
870
AI x 開発生産性を取り巻く予算戦略と投資対効果
Avatar for Masato Ishigaki / 石垣雅人 i35_267
7
2.9k
Power Automateアップデート情報
Avatar for MiyakeMito miyakemito
0
110
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
290
Vポイント分析基盤におけるデータモデリング20年史
Avatar for タロウ taromatsui_cccmkhd
4
730
大量データに対しても、生成AIを用いてリーズナブルにデータ加工をしたい！Databricksのai_queryについて調べてみた
Avatar for Kamoshika kamoshika
2
280
AI時代の開発生産性を捉え直す — 経営と現場をつなぐ「開発組織のオブザーバビリティ」— / AI Dev Ex Conference 2026
Avatar for tkyowa tkyowa
1
1.3k
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
Avatar for Shinya Saita shinyasaita
0
460
AI時代のPlaywright活用(システムテストを自動化する ー 実行エンジンにPla ywrightを選んだ理由)
Avatar for 西田泰明 ynisqa1988
2
950

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
490
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
750
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
430

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