SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節

SVG Backgrounds 免費網站背景圖下載,可線上預覽、調整顏色細節

如果開發網站或網路服務,可能會需要用到背景圖,以往很多時候會使用 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 網站,可從右邊看到網站收錄的所有圖案。

SVG Backgrounds

點選圖案就能「Preview」預覽直接套用在背景的效果。

SVG Backgrounds

STEP 2

在預覽模式下,每個 SVG 背景圖左上角都會有可自訂化選項,例如調整顏色、透明度或是圖形大小等等,調整後會立即更新顯示於網站中。

SVG Backgrounds

如果你覺得這些圖案和自訂器擋在網站中間無法好好預覽圖案效果,也可以點選左上角的「Hide UI」將操作介面暫時隱藏,只要移動一下滑鼠這些功能就會回復。

SVG Backgrounds

STEP 3

調整完成後,將「CSS Output」輸出的內容直接複製到網站 CSS 樣式表,就能在特定部分載入 SVG 背景圖設計。前面有提到 SVG 圖的特色是容量小(甚至可轉為一段程式碼)、高解析度、可自由縮放且被大部分瀏覽器支援,因此在使用上就更為輕巧便利。

SVG Backgrounds

值得一試的三個理由:

  1. 提供各種 SVG 格式的網站背景素材免費下載
  2. 可線上預覽效果,調整顏色或各項細節
  3. 將產生的 CSS 語法放入網站樣式表就能顯示
分享本文