VISIWIG 整合免費圖示、背景圖和紋理效果，一鍵複製 CSS、SVG 程式碼

這幾年有不少背景圖案製作工具，都可以在線上預覽、客制化圖形細節，最終產生 CSS 和 SVG 格式，甚至在不用下載任何檔案的情況下直接複製程式碼，加入網頁就會獲得非常好的效果，兼具品質和效能，也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景；CSS Background Patterns 也能製作各種純色彩背景圖，如果需要背景圖也能試試看接下來要介紹的服務。

本文要推薦的「VISIWIG」是一個整合免費圖示、背景圖和紋理效果的線上產生器，特色是只需複製、貼上就能取用的圖片工具，無論圖示或背景都是使用 CSS 或 SVG 格式，也具有基本的自訂功能，像是調整顏色、尺寸大小，背景圖則有放大縮小、旋轉、粗細和色彩編輯選項，在編輯後即時在網頁上預覽效果。

VISIWIG 圖示部分皆可免費使用，向量圖背景有 30 種免費選項（另外 70 種或更多需要付費購買），依照授權說明，VISIWIG 提供的素材允許使用於商業用途，無需標示出處。向量圖背景的特色是可以無限縮放，產生更為清晰的效果，匯出為 SVG 檔案很小，對於網頁載入來說不會造成延遲問題。

VISIWIG
https://www.visiwig.com/

使用教學

STEP 1

開啟 VISIWIG 網站首頁會看到三個主要項目：免費圖示、背景圖和紋理效果，如果有需要這三種設計相關素材，都可以到網站找找。

VISIWIG 提供的獨立圖示看起來都很簡潔，數量還算完整，可以從右側選項進行設定，包括圖示顏色、尺寸大小、模式（複製 CSS、SVG 程式碼或下載 SVG 檔），特色是所有圖案都能點選快速將程式碼複製到剪貼簿。

STEP 2

切換到「Patterns」背景圖頁面會看到大約 30 種免費背景，這些圖案都能自訂，讓它更符合使用者的需求，這些都是無接縫圖案（seamless patterns），也就是只有一小部分但接續在一起就能重複顯示。

STEP 3

進入背景圖自訂功能，透過下方的選項進行細節調整，像是放大、縮小、翻轉或設定圖案的密度等等，利用拖曳下方調整桿會即時呈現效果。

當然也能夠直接設定圖案顏色，包括前景和背景色彩。

STEP 4

最後切換到「Output」就會看到直接複製 SVG、CSS 程式碼選項，可以將看到的背景圖素材程式碼複製到剪貼簿，或是點選「Save SVG」將圖片保存為 SVG 格式。