Cover image generator

Generate an SVG cover layout from text, size, and style without bitmap encoding.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Title

Cover

SVG cover layout

Enter a title to see the result

What this tool does

Draft covers
Check title layout

Example

Input

Title

Output

封面：Title
尺寸 1280 × 720（比例 16:9，实际 1.7778）· 风格 gradient · 圆角 0px
主标题字号 153.6px（估算宽度 422.4px，画布 88% 上限 1126.4px）
字符数 5

SVG 源码：
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720" role="img">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#4D6BFE" /><stop offset="100%" stop-color="#8B5CF6" /></linearGradient>
  </defs>
  <rect x="0" y="0" width="1280" height="720" rx="0" ry="0" fill="url(#bg)" />
  <g font-family="system-ui, -apple-system, 'Noto Sans SC', sans-serif">
    <text x="640" y="412.22" text-anchor="middle" font-size="153.6" font-weight="700" fill="#FFFFFF">Title</text>
  </g>
</svg>

data URI（可直接作为 <img src> 或 CSS background-image）：
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgwIiBoZWlnaHQ9IjcyMCIgdmlld0JveD0iMCAwIDEyODAgNzIwIiByb2xlPSJpbWciPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJiZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0RDZCRkUiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOEI1Q0Y2IiAvPjwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjgwIiBoZWlnaHQ9IjcyMCIgcng9IjAiIHJ5PSIwIiBmaWxsPSJ1cmwoI2JnKSIgLz4KICA8ZyBmb250LWZhbWlseT0ic3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCAnTm90byBTYW5zIFNDJywgc2Fucy1zZXJpZiI+CiAgICA8dGV4dCB4PSI2NDAiIHk9IjQxMi4yMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNTMuNiIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI0ZGRkZGRiI+VGl0bGU8L3RleHQ+CiAgPC9nPgo8L3N2Zz4=

Outputs SVG and size metadata.

Frequently asked questions

Does it output bitmap?

No, SVG only.

Which ratios are supported?

Preset ratios are supported.

Is content uploaded?

No, it is local.

Keywords：封面coverSVGlayoutimage

What this tool does

Example

Frequently asked questions

Related tools