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
200

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
ざっくり学ぶ 『エンジニアリングリーダー 技術組織を育てるリーダーシップと セルフマネジメント』 / 50 minute Engineering Leader
Avatar for iwashi iwashi86
6
3.6k
実践マルチモーダル検索！
Avatar for shibuiwilliam shibuiwilliam
1
440
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
Avatar for LayerX layerx
PRO
4
2.2k
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
46k
IBC 2025 動画技術関連レポート / IBC 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
2
220
【SORACOM UG Explorer 2025】さらなる10年へ ～ SORACOM MVC 発表
Avatar for SORACOM soracom
PRO
0
180
re:Inventに行くまでにやっておきたいこと
Avatar for nagisa_53 nagisa53
0
800
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
Avatar for OPTiM optim
0
120
AI連携の新常識！ 話題のMCPをはじめて学ぶ！
Avatar for MakoAkiba makoakiba
0
160
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
Avatar for 株式会社カミナシ kaminashi
2
1.4k
AI機能プロジェクト炎上の 3つのしくじりと学び
Avatar for nakawai nakawai
0
170
頭部ふわふわ浄酔器
Avatar for uyupun uyupun
0
240

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
890
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
640

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