在用 VS Code 寫網站時,如果有需要用到 SVG,推薦可以使用 SVG 這個 extension,只要安裝後就可以提示 SVG 的 code,以及有 SVG 的預覽功能。
Wrap SVG Online 是一個頗有趣的線上工具,只要上傳 SVG 圖片就可以透過一些變形的點去改變形狀,之後再輸出就可以得到變形後的圖片了。
Duet Design System 是一個提供許多現成的 UI 元件與設計規範方便架設網站使用的函式庫,並可以與當今熱門前端框架 React、Vue.js 和 Angular 等整合,有興趣的可以參考看看方便加速網站開發。
Mono Icon 是一個提供免費的 SVG icon 的服務,可以複製 SVG code 或者直接下載檔案,有需要 icon 資源的可以參考看看。
Loaders 提供給開發者免費的讀取動畫圖示,使用 CSS 與 SVG 動畫與且支援 React 使用。
之前跟大家介紹過 bodymovin 這個可以把 After Effect 的動畫轉出來給網頁用的外掛,而他們官方也有提供使用者分享各自製作的動畫的網站,可以到上面找找有沒有喜歡的動畫效果。
designstripe 是一個免費的線上插圖繪製工具,即使不會繪圖軟體也可以使用,免費方案可以下載 png 或 jpg 圖片,也可以付費下載向量格式的圖片。
SVG Viewer 是一個可以線上檢視還有最佳化 SVG 的工具,亦可轉檔出 SVG 或 React 格式。
Squircley 是一個線上 SVG 圖片產生器,可製作方形、圓形或圓角的方形,只要透過簡單的設定就能輸出圖形。
Radix Icons 是一個收錄小型免費 icon 的網站,可選擇 SVG, Sketch 與 Figma 等格式下載。