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

Cool Staff of SVG

Avatar for huozhi huozhi
November 23, 2016
Technology
220
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
ルールルルルル私的函館観光ガイド── 函館の街はイクラでも楽しめる！
Avatar for nomuson nomuson
0
200
ぼくがかんがえたさいきょうのあうとぷっと
Avatar for Yuuki Yamashita yama3133
0
150
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」ご紹介資料
Avatar for Sho Nakatani laysakura
0
2.3k
Amazon S3 Filesについて
Avatar for Yuuki Yamashita yama3133
2
130
AIエージェントを構築して感じた、AI時代のCDKとの向き合い方
Avatar for Makky12 smt7174
1
250
DevOpsDays Tokyo 2026 軽量な仕様書と新たなDORA AI ケイパビリティで実現する、動くソフトウェアを中心とした開発ライフサイクル / DevOpsDays Tokyo 2026
Avatar for Niishi Kubo n11sh1
0
130
「責任あるAIエージェント」こそ自社で開発しよう！
Avatar for みのるん minorun365
2
170
自分のハンドルは自分で握れ！ ― 自分のケイパビリティを増やし、メンバーのケイパビリティ獲得を支援する ― / Take the wheel yourself
Avatar for TAKAKING22 takaking22
1
600
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.6k
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
410
JOAI2026講評会資料（近藤佐介）
Avatar for Sasuke Kondo element138
1
130
Zero-Downtime Migration: Moving a Massive, Historic iOS App from CocoaPods to SPM and Tuist without Stopping Feature Delivery
Avatar for kagemiku kagemiku
0
240

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
330
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
430
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
940
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
140
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
170
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
130
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.6k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
120
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k

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