SVG 佔位圖生成器

Data URI 不需要網路請求

佔位圖服務在出問題之前一直都很方便：直到域名開始限流、公司代理把它攔了、你在飛機上演示，或者服務悄悄改了輸出格式導致你一半的原型圖錯位。所有這些故障的根源都是同一個——佔位圖存在別人的伺服器上。

SVG Data URI 沒有這種依賴。整張圖就是一段寫在標記裡的字串，因此它在離線狀態、郵件客戶端、靜態匯出檔案以及三年後的截圖裡都會渲染成完全一樣的樣子。它在延遲上也不花任何代價：沒有 DNS 查詢、沒有建連、沒有往返。開發時一個頁面上放二十張佔位圖，這個差別相當明顯。

用 URL 編碼而不是 base64

本工具輸出的 Data URI 使用百分號編碼而非 base64。兩者都合法，但對 SVG 來說百分號編碼是更好的預設選擇，原因有二。

第一是體積。base64 會把資料膨脹約三分之一，而百分號編碼只會展開那少數真正需要轉義的字元——SVG 基本都是純 ASCII，所以結果通常反而更短。第二是可讀性：你在樣式表裡看到一段百分號編碼的 SVG，仍然能認出它是什麼，能順手改個顏色，能一眼看出拼寫錯誤。而 base64 資料塊必須先解碼才有意義。

百分號編碼唯一需要小心的是單引號，這也是本工具專門對它做轉義的原因：CSS 的 url() 值通常用單引號包裹，SVG 內部一個未轉義的撇號會讓這個值提前結束。

尺寸、縮放和 viewBox

生成的 SVG 同時帶有顯式的 width、height 屬性和與之匹配的 viewBox。這個組合是有意為之。width 和 height 給瀏覽器提供固有尺寸，避免圖片佈局前發生跳動；viewBox 則讓同一張圖能在 CSS 裡乾淨地縮放到任意大小。

因為是向量圖，文字在任何縮放比例下都保持銳利——高分屏上不會糊，也不需要另外準備 2x 素材。如果希望佔位圖撐滿容器，在 CSS 裡設定 width: 100%; height: auto，viewBox 會自動保持寬高比。如果希望無視寬高比固定成一個方框，保留生成的屬性即可，瀏覽器會照做。