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
190

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
100

Other Decks in Technology

See All in Technology
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの３つのシナリオ
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
160
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
Avatar for Yuki Anzai yanzm
0
260
制約理論（ToC）入門
Avatar for Recruit recruitengineers
PRO
2
190
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
Avatar for abemii_ abemii
0
180
DeNA での思い出 / Memories at DeNA
Avatar for Kuniwak orgachem
PRO
3
1.3k
ECS モニタリング手法大整理
Avatar for Yu Endo yendoooo
1
120
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
Avatar for mtx2s mtx2s
5
510
Postman MCP 関連機能アップデート / Postman MCP feature updates
Avatar for Yoichi Kawasaki yokawasa
0
140
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
Avatar for AEON aeonpeople
1
250
会社にデータエンジニアがいることでできるようになること
Avatar for 10xinc 10xinc
9
1.5k
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.6k
Oracle Base Database Service：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
2
20k

Featured

See All Featured
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
560
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
780
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.9k
It's Worth the Effort
Avatar for 3n 3n
187
28k

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