Towalles Towalles

SVG Yer tutucu Jeneratörü

Kopya edilebilir kaynak veya veri URL 'si ile SVG yer tutucuları oluşturmak için boyutu, renkleri ve etiketini ayarlayın. Set size, colors, and label to generate SVG place tutucues with copyable source or data URL. Kablo çerçeveleri ve tembel yüklü kısımlar için kullanışlı.

Gizlilik: yerel olarak işlenir, asla yüklenmez.

Anında sonuçları görmek için aşağıdaki giriş alanına yapıştırın

自定义宽高、颜色与文字; 生成 SVG 占位图用于原型与 mock。

宽度 (px)
高度 (px)
显示文字
背景色
文字色
预览

SVG 源码

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
  <rect width="100%" height="100%" fill="#1e2230"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#94a3b8" font-family="system-ui,sans-serif" font-size="37.5">400×300</text>
</svg>

Notlar

说明

SVG 在浏览器本地生成; 可复制源码或 Data URL 嵌入 HTML/CSS。

Kopya edilebilir kaynak veya veri URL 'si ile SVG yer tutucuları oluşturmak için boyutu, renkleri ve etiketini ayarlayın. Set size, colors, and label to generate SVG place tutucues with copyable source or data URL. Kablo çerçeveleri ve tembel yüklü kısımlar için kullanışlı.

Hızlı başlangıç

  1. Set size

    1-4096 px.

  2. Copy SVG

    HTML için kaynağı kopyalayın veya veri URL 'sini kullanın.

Özellikler ve kullanım durumları

Herhangi bir yakınlaştırma seviyesinde özel boyut, renkler ve etiket-crisp ile SVG yer tutucuları oluşturun.

Wireframes, Storybook, lazy-load yer tutucuları ve e-posta şablonu önizlemelerinde kullanın.

Yerel nesil

Saf dizge oluşturma; sunucu istekleri yok.

Örnekler

Varsayılan

Input

400×300

Output

SVG with size label

FAQ

Gradients mi?

Yalnızca katı dolgu; kopyaladıktan sonra SVG 'yi düzenleyin.

Yüklendi mi?

Hayır, hayır.

Oluşturulan SVG yer tutucuları nasıl yeniden boyutlandırılır?

İki yöntem: 1) Araçta genişlik / yüksekliği ayarlayın ve yeniden oluşturun, veya 2) genişlik / yüksekliği özelliklerini (pikseller cinsinde) veya viewBox değerlerini (format '0 0 [genişlik] [yükseklik]') el ile düzenleyin kopyalanan kod. Deformasyon olmadan duyarlı ölçeklendirme için CSS ile viewBox kullanmanızı öneririz.