shield 徽章生成

功能

• 实时预览由本机绘制，页面不发起任何网络请求
• 四种样式：flat、flat-square、plastic、for-the-badge
• 颜色可选命名色（`brightgreen` 这类）或自定义十六进制，标签底色可单独设
• 可加 simple-icons 的图标（填 slug，如 `github`）
• 五种片段：徽章地址、Markdown、HTML、reStructuredText、离线 SVG 源码
• 可下载 SVG 文件，那一段不依赖 shields.io
• 每个片段单独可复制

使用方法

1. 填左侧与右侧文字
2. 选颜色与样式（需要就填图标名）
3. 看预览，不满意就改
4. 复制需要的片段，或下载 SVG

常见问题

这个工具会把我的输入发给 shields.io 吗？

不会。 预览是本机拼出来的 SVG，页面不发起任何请求 —— 你可以打开开发者工具的网络面板改几个字试试，看不到任何外部请求。 但你贴出去的那个地址指向 shields.io：别人打开你的 README 时，是他的浏览器去取那张图。那一次请求发生在你的站点上、由你的读者发起，与这个工具无关 —— 但既然地址指向第三方，就值得你知道。 如果不想让读者的浏览器访问第三方，用「SVG 源码」那一段：把 SVG 直接放进你的仓库或页面，它自包含、不依赖任何服务。

为什么预览与 GitHub 上显示的不完全一样？

因为宽度是估算的。shields.io 在服务端用真实的字体度量算标签宽度，而这里是在浏览器里拼 SVG —— 没法保证用户的机器装了 Verdana，也不能为了量一个字符串就去加载字体。所以这里用了一张自带的宽度表（`i` 与 `l` 比 `m` 与 `w` 窄、中文按双宽算）。 结果就是：颜色、样式、文字内容都一致，宽度可能差几像素。真图以 shields.io 渲染的为准。 顺带一提，这也意味着 `for-the-badge` 那种大写转换在这里是准确的 —— 它不依赖字体。

标签里可以写中文吗？

可以。地址里的中文会被百分号编码（`构建` → `%E6%9E%84%E5%BB%BA`），shields.io 收到后会正常显示。本地预览也按双宽算了中文的宽度，所以预览不会把中文压扁。 不过要注意两边宽度算法的差异还是存在的（见上一问），中文这种双宽字符上差得更明显一些。