什么是徽章按钮制作器？

徽章/按钮制作器可以生成自定义徽章和标牌，自由设置文字、颜色和形状。填写标签和数值，选择样式，下载为PNG或SVG。

生成 shields.io 风格的徽章（彩色胶囊形,左灰右彩),以内联 SVG 渲染。可选择 flat、flat-square、rounded、pill、for-the-badge 五种形状;为两半各设十六进制颜色,标签与取值的文字色也可分别设置;一键加入技术图标(GitHub、npm、Docker、Python、Node.js 等),自动套用对应品牌色;为徽章添加可点击的链接 URL;复制为 README 用的 Markdown、邮件或网页用的 HTML,或下载清晰的 SVG 与 3 倍分辨率的 PNG。还能把多个徽章加入列表,一次复制全部 Markdown 或保存为 .md 文件。宽度随文字自动伸缩,'Build / Passing' 与 'License / Apache 2.0' 都能保持平衡,无需手动调整。

使用方法

1. 输入徽章文字——选择标签（左侧）和数值（右侧），例如"Version"和"2.0"。
2. 为标签和值的背景挑选颜色,选择形状,并可在左侧加入技术图标。
3. 实时查看徽章效果,然后下载为 PNG 或 SVG,或复制为 Markdown / HTML,粘贴到 README 或页面中。

何时使用

• 给 GitHub README 加上构建、版本或覆盖率徽章,不用接 CI。
• 在落地页功能行或定价档上加 'Beta'、'New'、'Pro' 这类标签。
• 在个人作品集或简历 PDF 里突出展示某项技术栈芯片。

结果

创建项目状态徽章：标签"Build"灰色背景，数值"Passing"绿色背景，扁平样式。效果就像GitHub仓库里的状态徽章。

常见问题

下载 PNG 自己托管,徽章还能正常显示吗?

可以。下载的 SVG 和 PNG 都是自包含文件,不会请求任何服务器。代价是没有实时数据:版本 1.2 的徽章会一直停留在 1.2,要更新只能再生成一次。

flat、rounded、pill 三种样式有什么区别?

Flat 是带细微渐变的直角矩形,flat-square 形状相同但去掉了渐变,rounded 使用 4 像素圆角,pill 两端为完整圆弧,for-the-badge 是 README 徽章常用的加粗、加高、全大写样式。请选择与周围 UI 最契合的样式。

可以改成品牌色,而不用默认的绿+灰吗?

可以,标签色、取值色,以及左右两半各自独立的文字色都是十六进制取色器。例如深色标签配浅色文字、再加亮色取值,做出高对比度效果。预览会实时刷新。

用 SVG 还是 PNG?

SVG 适合 GitHub README、网站,以及任何可能被缩放的地方(始终清晰)。PNG 用在不渲染 SVG 的场景:Word 文档、Slack 消息、某些截图工具里。

为什么 PNG 比 SVG 文件大?

PNG 是按屏幕显示尺寸的 3 倍渲染的,这样在高 DPI 屏上才清晰。一般徽章的 SVG 不到 1 KB,PNG 通常是 5-15 KB。要小文件用 SVG,要兼容性用 PNG。

相关工具