Towalles Towalles

Generatore di placeholder SVG

Impostare dimensioni, colori e etichette per generare placeholder SVG con URL di origine o dati copiabili. Pratico per wireframe e stubs pigri.

Privacy: elaborato localmente, mai caricato.

↓ Incolla nell 'area di input qui sotto per vedere i risultati istantaneamente

自定义宽高、颜色与文字; 生成 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>

Note

说明

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

Impostare dimensioni, colori e etichette per generare placeholder SVG con URL di origine o dati copiabili. Pratico per wireframe e stubs pigri.

Avvio veloce

  1. Set size

    1 - 4096 px.

  2. Copiare svg

    Copiare la fonte per HTML o utilizzare l'URL dei dati.

Caratteristiche e casi d'uso

Generare placeholder SVG con dimensioni personalizzate, colori e etichette-crisp a qualsiasi livello di zoom.

Usare in wireframe, Storybook, placeholder per carico pigro e anteprime di modelli di posta elettronica.

Generazione locale

Build stringa pura; nessuna richiesta di server.

Esempi

default

Input

400×300

Output

SVG with size label

FAQ

Gradienti?

Solo riempimento solido; modifica SVG dopo la copia.

Uploaded?

No.

Come ridimensionare i placeholder SVG generati?

Due metodi: 1) Regolare la larghezza / altezza nello strumento e rigenerare, oppure 2) Modificare manualmente gli attributi larghezza / altezza (in pixel) o i valori di viewBox (formato '0 0 [larghezza] [altezza]') nel codice copiato. Consigliamo di utilizzare viewBox con CSS per una scala reattiva senza distorsione.