SVG占位图生成器
生成16–2000px的SVG占位图，支持前景／背景色、短标签、字号和左中右对齐，提供SVG、Data URI复制和本地下载。
16 to 2,000 pixels.
16 to 2,000 pixels.
8 to 200 pixels.
Up to 80 characters. A blank label becomes the current width × height.
LIVE PREVIEW
Generated placeholder
The preview uses the same generated data URI shown below. Check text and contrast before using it in a design.
使用步骤
如何使用
- Set a width, height, colors, font size, and text alignment within the displayed limits.
- Enter a short label or leave it blank to use the current dimensions, then inspect the live SVG preview.
- Copy the SVG markup or data URI, or download the generated SVG file.
A small image generated in this browser
The tool creates an SVG string using a rectangle and one text element, then previews the URL-encoded data URI in the current page. It makes no image request, font request, server call, or account record. Width and height are limited to 16–2,000 pixels, label length is capped at 80 characters, and font size is limited to 8–200 pixels so the result remains practical to inspect.
Escaping, fonts, and contrast still matter
Text content is XML-escaped before SVG markup is created, and the complete markup is passed through encodeURIComponent for the data URI. The SVG asks for common system sans-serif fonts, so exact glyph shapes and text width can vary by browser and device. Choose a readable foreground/background contrast and review a long label at its final rendered size; this tool does not calculate accessibility contrast ratios or wrap text.
常见问题
你可能还想知道
What happens to ampersands, quotation marks, or angle brackets in my label?
They are XML-escaped in the SVG text node and URL-encoded in the data URI. They remain visible as literal characters in the rendered label rather than being interpreted as SVG markup.
Why can the text look different on another computer?
The SVG uses a generic system-ui, sans-serif font stack. Each browser chooses an available fallback font, which can change glyph shapes and the amount of horizontal space a label needs.
Does this upload or store the placeholder?
No. The SVG, preview, clipboard action, and download are generated locally in the browser. Nothing is saved by Hello Keyboard Tools after you leave the page.