SVG 佔位圖產生器

SVG 佔位圖產生器的運作方式

工具功能說明

SVG 佔位圖產生器可建立輕量的向量佔位圖片，支援自訂尺寸、背景色、文字覆蓋與字型設定。它會直接輸出 SVG 標記，以及可直接嵌入 HTML 或 CSS 的 Base64 data URI。由於 SVG 與解析度無關且通常小於 1KB，這些佔位圖可在不發出網路請求的情況下立即載入。

常見的開發者使用情境

前端開發者在原型製作時會使用 SVG 佔位圖，在真實圖片尚未就緒前預留版面空間，避免累積版面位移（CLS）。它們也適用於設計系統中的頭像備援、縮圖骨架與響應式圖片容器。電子郵件開發者會在 HTML 範本中嵌入 data URI 佔位圖，因為電子郵件用戶端可能會封鎖外部圖片載入。

資料格式、型別或變體

輸出為標準的 SVG 1.1 文件，包含一個填滿的矩形與置中的文字元素。data URI 版本會將此 SVG 編碼為 Base64 字串，並以前綴 'data:image/svg+xml;base64,' 開頭，可直接用於 img 的 src 屬性、CSS 的 background-image 屬性或內嵌 HTML。尺寸以像素指定，但由於是向量格式，SVG 可縮放至任何容器大小而不會像素化。

常見陷阱與邊界情況

Data URI 不會被瀏覽器獨立於其嵌入的文件之外進行快取，因此在許多頁面中使用相同的佔位符，與單一可快取的外部檔案相比，會增加總傳輸量。若尺寸較小，過長的文字標籤可能會溢出 SVG 的 viewBox。一些較舊的電子郵件用戶端不支援 SVG data URI，會退回顯示為損壞的圖片圖示。內容安全政策（CSP）標頭可能會封鎖內嵌 data URI，若 img-src 未包含 'data:'。

何時使用此工具 vs 程式碼

在製作線框稿或原型時，使用此瀏覽器工具可快速產生一次性的佔位符圖片，而無需新增建置相依性。若要在正式環境中動態產生佔位符（例如使用者上傳圖片的備援顯示），請使用伺服器端 SVG 樣板或像 plaiceholder 這類可與你的圖片最佳化流程整合的專用服務，並可從實際圖片產生模糊的低品質圖片佔位符（LQIP）。