徽章预览
左侧实时渲染 SVG,适合一边调整文字和颜色,一边确认视觉平衡。
SVG 输出
生成后的 SVG 可以直接贴进 README、文档站或项目导航页;如果你只需要图片,也可以直接下载 PNG。
- 输出宽度
- -
- 徽章高度
- -
- 输出模式
- -
- 当前文案
- -
整体设置
控制徽章高度、圆角、左右内边距,以及是否启用右侧状态段。
左侧字段
通常用作标签、模块名、构建项或技术栈名称。
右侧字段
通常用作状态、版本号、许可证或数量说明。
常见用途
- 项目 README 里经常需要放版本、构建状态、License、覆盖率或部署状态等徽章。
- 资源站、导航页或工具卡片上,也可以把它当作简洁的状态标签和元信息模块。
- 如果只想做单段标题徽章,关闭右侧状态段即可,适合做短标签或分类标识。
使用建议
- 左段建议放相对稳定的名称,右段适合放经常变化的状态或数字,这样信息层次更清楚。
- 想靠近经典 Shields 风格时,可以保持 28px 左右高度、较深左底色和更亮的右底色。
- 导出 PNG 前先确认文字长度,过长文案虽然会自动撑宽,但更适合拆成两段短词。

网友评论