佔位圖生成器

設置佔位圖樣式與內容,生成骨架屏、模糊佔位和文字圖片,用於界面設計與開發。

免費瀏覽器
Centered size text such as 600x400.
Preview
600x400 / dimensions
Output

關於佔位圖生成器

按尺寸和視覺模式生成本地 SVG 佔位圖。真實圖片尚未準備好時,可使用尺寸標籤、首字母、骨架屏樣式等預設補齊原型素材。

如何使用佔位圖生成器

  1. 設置佔位圖寬度和高度。
  2. 選擇顯示模式,調整文字或顏色。
  3. 複製或下載 SVG,用於原型。

輸入與輸出示例

輸入與設置
寬度:800
高度:450
模式:尺寸標註
預期輸出
帶尺寸標註的 800 × 450 SVG 佔位圖。

適用場景

  • 在頁面原型中預留圖片空間。
  • 使用本地資源替代外部佔位圖服務。

使用前需要了解的限制

預設為合成 SVG 圖形,並非圖庫照片。靜態佔位圖也不能完整模擬真實加載過程。

數據處理與費用

核心操作在瀏覽器中完成,工具輸入不會上傳處理。網站仍可能使用會話 Cookie,並按隱私政策收集運行或使用數據。

在瀏覽器中免費使用,無需登錄。

常見問題

在開發和 mock 場景下可以。它會生成本地 SVG 佔位圖,不依賴第三方圖片 URL。

包含尺寸文字、隨機文本、lorem 文本塊、首字母、ASCII 風格、骨架屏、shimmer 狀態、模糊佔位和照片風 SVG。

可以。寬高控件會同時更新預覽和生成的 SVG 輸出。

相關工具