SVG 佔位圖生成：前端原型與郵件都適用
為什麼用 SVG 佔位圖，如何生成帶尺寸/文字/顏色的佔位圖並內聯為 Data URI。
為什麼用 SVG 佔位
SVG 是矢量、體積極小、可任意縮放不模糊，且能直接內聯進 HTML/郵件，不依賴外部圖片請求，非常適合原型與骨架屏。
常用參數
寬高、背景色、文字顏色、顯示的尺寸文字。生成後可複製 SVG 源碼或 Data URI 直接用在
在 ToolBox 中生成
填寫尺寸與配色點擊生成，預覽即時更新；複製得到的 SVG/Data URI 粘貼到項目即可。
常見問題
- Data URI 會拖慢頁面嗎？
- 小圖內聯反而省一次請求；大圖則建議用獨立文件，避免 HTML 體積過大。
- 郵件裏能用 SVG 佔位嗎？
- 部分郵件客户端對 SVG 支持有限，必要時改用 PNG 佔位或帶兜底alt文本。
- 佔位圖能加圓角/漸變嗎？
- 能。SVG 支持 rect 的 rx 圓角與線性漸變，複雜樣式可在生成後手動編輯源碼。