如果開發網站或網路服務，可能會需要用到背景圖，以往很多時候會使用 PNG 格式來當做背景，像是 Caself 提供 800 種免費紋理背景圖片就是透過 PNG 檔案來製造出的背景效果，不過現階段來說 SVG 會是更好的選擇，SVG 有什麼特色呢？它不但檔案容量更小、高解析度、可以自由縮放，而且也被主要瀏覽器支援，更重要的是具備可自訂性，不需繪圖軟體就能做到！
若你對於 SVG 向量圖格式不熟，其實只要透過 CSS 程式碼就能將它加入成為網站背景，例如之前介紹過的 Hero Patterns 就能產生免費 SVG 重複背景圖，可自訂前景、背景色或透明度，而且不用下載任何圖片，只需將程式碼加入網站就能套用漂亮的背景圖案。
本文要推薦的「SVG Backgrounds」是另一款提供免費網站背景圖的服務，提供多種 SVG 格式的圖案素材，可直接線上預覽、調整顏色或細節，再產生 CSS 程式碼後匯出。比較特別的是 SVG Backgrounds 收錄各式各樣差異性很高的背景圖，每一個圖案都有不一樣的可自訂細節。
如果在開發網站或設計部落格需要用到背景圖，可自訂的 SVG 格式或許是個更適切的選擇。
網站名稱：SVG Backgrounds
網站鏈結：https://www.svgbackgrounds.com/
使用教學
STEP 1
開啟 SVG Backgrounds 網站，可從右邊看到網站收錄的所有圖案。
點選圖案就能「Preview」預覽直接套用在背景的效果。
STEP 2
在預覽模式下，每個 SVG 背景圖左上角都會有可自訂化選項，例如調整顏色、透明度或是圖形大小等等，調整後會立即更新顯示於網站中。
如果你覺得這些圖案和自訂器擋在網站中間無法好好預覽圖案效果，也可以點選左上角的「Hide UI」將操作介面暫時隱藏，只要移動一下滑鼠這些功能就會回復。
STEP 3
調整完成後，將「CSS Output」輸出的內容直接複製到網站 CSS 樣式表，就能在特定部分載入 SVG 背景圖設計。前面有提到 SVG 圖的特色是容量小（甚至可轉為一段程式碼）、高解析度、可自由縮放且被大部分瀏覽器支援，因此在使用上就更為輕巧便利。
值得一試的三個理由：
- 提供各種 SVG 格式的網站背景素材免費下載
- 可線上預覽效果，調整顏色或各項細節
- 將產生的 CSS 語法放入網站樣式表就能顯示
相關文章
- Hero Patterns 免費 SVG 重複背景圖產生器，CSS 程式碼複製貼上快速套用
- Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器
- WebGradients 收錄 180 種漸層背景免費下載，一鍵產生 CSS 3 語法
- CoolHue 最酷的漸層色背景色卡產生器，快速產生背景 CSS3 語法
Ten articles before and after
Sendsecure.io 透過瀏覽器直接傳輸檔案，兼具安全隱私無檔案大小限制 – telegram電腦版
Clipdiary 剪貼簿管理工具，更好用的複製、貼上記錄（限時免費下載） – 免費資源網路社群 – telegram電腦版
圖床神器 iPic：拖曳上傳圖片免空，快速複製網址及 Markdown 語法 – telegram電腦版
Fontastic 免費網頁圖示字型（Icon Fonts）產生器 – 免費資源網路社群 – telegram電腦版
在 WordPress 免費網誌檢舉毀謗辱罵內容，交由官方審查下架刪除 – telegram電腦版
Aurous 免費 P2P 音樂串流軟體，自由搜尋全世界音樂歌曲 – telegram電腦版
Dr.eye 譯典通 for iOS 版，新春大賀禮限時免費 – 免費資源網路社群 – telegram電腦版
免費領取 Steam 遊戲「Woodle Tree Adventures」，可愛逗趣的清新小品 – 免費資源網路社群 – telegram電腦版
Hackpad 雲端共同筆記服務，集眾人的力量協同編輯文件、彙整資訊 – 免費資源網路社群 – telegram電腦版
MaskMe － 註冊帳號時自動產生隨機、可轉寄的 Email 信箱，保護個人隱私，遠離垃圾郵件騷擾 – 免費資源網路社群 – telegram電腦版
