Towalles Towalles

Gerador de placeholder SVG

Definir o tamanho, as cores e o rótulo para gerar espaçadores SVG com URL de origem ou de dados copiáveis.Útil para wireframes e stubs de carga preguiçosa.

Privacidade: processado localmente, nunca carregado.

↓ Colar na área de entrada abaixo para ver os resultados instantaneamente

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

Notas

说明

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

Definir o tamanho, as cores e o rótulo para gerar espaçadores SVG com URL de origem ou de dados copiáveis.Útil para wireframes e stubs de carga preguiçosa.

Iniciação rápida

  1. Set Size (em inglês)

    1 - 4096 px.

  2. Copiar SVG

    Copie a fonte para HTML ou use o URL dos dados.

Características e casos de uso

Gerar marcadores de espaço SVG com tamanho personalizado, cores e rótulos-crisp em qualquer nível de zoom.

Use em wireframes, Storybooks, placeholders de carga preguiçosa e prévias de modelos de e-mail.

Geração local

Construção de string pura; sem solicitações de servidor.

Exemplos

Default

Input

400×300

Output

SVG with size label

FAQ

Gradientes?

Só preenchimento sólido; edite SVG após a cópia.

Uploaded?

Não, não.

Como redimensionar os placeholders SVG gerados?

dois métodos: 1) Ajuste largura / altura na ferramenta e regenera, ou 2) edite manualmente os atributos largura / altura (em pixels) ou valores do viewBox (formato '0 0 [largura] [altura]') em código copiado. Recomendamos o uso do viewBox com CSS para escala responsiva sem distorção.