重點整理
VISIWIG 是整合背景圖案、圖示與紋理的線上產生器，可調整尺寸、顏色後直接複製 SVG 或 CSS 貼進網頁，不必下載檔案。本文示範挑選樣式、調整參數與輸出的步驟。
背景工具在最近真的是越來越多。今天就要來和大家介紹 VISIWIG 這個線上工具能線上預覽、客制化圖形細節，最後產生 CSS 、 SVG 檔案，重點是能在不用下載任何檔案的情況下直接複製程式碼，能直接加入網頁即可，兼具品質和效能。
VISIWIG介紹
今天介紹的VISIWIG是整合圖示、背景、紋理的免費線上生產器。重點就是只需要複製貼上就能取用圖片工具！VISIWIG的絕大部分圖片都是免費的，向量圖背景有 30 種免費選項（還有另外70種可以付費購買，量圖背景的特色是可以無限縮放，產生更為清晰的效果，匯出為 SVG 檔案很小，對於網頁載入來說不會造成延遲問題。）VISIWIG 提供的素材允許使用於商業用途，無需標示出處。
VISIWIG的基本使用
第一步：進入網站
點擊上面的連結就可以直接進入VISIWIG，進入網站以後就會看到免費圖示、背景以及紋理三個選項。
第二步：選擇你想要的圖標
裡面的圖標和樣式很多可以慢慢選擇，右邊就是工具欄位圖標的大小、顏色、下載方式（CSS or SVG）都可自己選擇！
第三步：背景製作
點擊Patterns後就可以開始選擇背景，大概有30種的免費背景可以選者還有其他的就需要付費解鎖了！當然這些背景圖片都可以進行自訂義讓他們跟加符合你的需求！
第四步：背景設定
進入背景功能以後就可以開始進行客製化的調整！紋理的大小縮放、顏色設定和翻轉！
第五步：Output
完成所有的操作以後點擊Output就可以選擇要負責SVG還是CSS，或是點選「Save SVG」將圖片保存為 SVG 格式。
使用網頁背景圖案要注意什麼？
背景圖案能讓版面不單調，但用不好會影響閱讀，套用前注意幾點：
- 對比要夠：放在文字後面的背景，顏色要淡、線條要細，確保文字清楚可讀。
- 不要每區都用：選一、兩個區塊點綴即可，整頁都有圖案會顯得雜亂。
- 注意手機版：圖案縮放後密度會改變，要用手機實際確認。
- 確認授權：商業網站使用前，看一下網站的授權說明，付費樣式要依規定購買。
SVG 與 CSS 背景檔案都很小，對網頁速度的影響遠低於大張背景照片。
常見問題
VISIWIG 是免費的嗎？
大部分素材可以免費使用，部分背景圖案需要付費解鎖。挑選時可在網站上看到哪些樣式可直接使用，免費與付費的數量可能隨時調整，以網站目前標示為準。
VISIWIG 的背景要用 SVG 還是 CSS 輸出？
要當作網頁區塊背景、需要自動重複鋪滿時，用 CSS 輸出最方便，直接貼進樣式就能使用；要放進設計軟體再編輯，或當作單張圖片上傳時，選 SVG 並用 Save SVG 存檔。
VISIWIG 的素材可以用在 WordPress 嗎？
可以。CSS 背景可貼到「外觀 › 自訂 › 附加的 CSS」或頁面編輯器的自訂 CSS 欄位；SVG 檔則可上傳到媒體庫使用。WordPress 預設不允許上傳 SVG，需要安全的 SVG 外掛協助處理。