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
210

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
120

Other Decks in Technology

See All in Technology
AWS re:Inventre:cap ～AmazonNova 2 Omniのワークショップを体験してきた～
Avatar for NRI Netcom nrinetcom
PRO
0
140
2025年 山梨の技術コミュニティを振り返る
Avatar for しみず ゆうき yuukis
0
150
産業的変化も組織的変化も乗り越えられるチームへの成長 〜チームの変化から見出す明るい未来〜
Avatar for KAKEHASHI kakehashi
PRO
1
480
ハッカソンから社内プロダクトへ AIエージェント ko☆shi 開発で学んだ4つの重要要素
Avatar for Tech Leverages leveragestech
0
640
Oracle Cloud Infrastructure：2025年12月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
260
SES向け、生成AI時代におけるエンジニアリングとセキュリティ
Avatar for LongbowXXX longbowxxx
0
310
わが10年の叡智をぶつけたカオスなクラウドインフラが、なくなるということ。
Avatar for Hisashi SOGA sogaoh
PRO
1
440
1万人を変え日本を変える!!多層構造型ふりかえりの大規模組織変革 / 20260108 Kazuki Mori
Avatar for SHIFT EVOLVE shift_evolve
PRO
6
1.2k
Qiita Bash アドカレ LT #1
Avatar for Kaoru okaru
0
180
AI駆動開発ライフサイクル（AI-DLC）の始め方
Avatar for ryansbcho79 ryansbcho79
0
330
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
830
歴史から学ぶ、Goのメモリ管理基礎
Avatar for Takuto Nagami logica0419
14
2.6k

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
420
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.8k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
160
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
540
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
140
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
670
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
130
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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