收藏這個網站，免費圖標、背景圖和紋理應有盡有！

這幾年有不少背景圖案制作工具，都可以在線預覽、客制化圖形細節，最終產生 CSS 和 SVG 格式，甚至在不用下載任何文件的情況下直接復制程序代碼，加入網頁就會獲得非常好的效果，兼具質量和效能，也不會拖慢網頁速度。例如之前的 Hero Patterns 快速產生重復圖案 CSS 背景：

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

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

VISIWIG

網站鏈接：https://www.visiwig.com/

使用教學

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

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

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

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

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

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

值得一試的三個理由：

• 整合免費圖標、背景圖和紋理效果，在線自定義直接復制使用
• 圖標和背景皆可對細節進行調整，實時預覽修改效果
• 快速復制 SVG、CSS 程序代碼，或將素材下載為 SVG 格式