首页 在线工具 图像颜色工具 详情页

Shield Badge 生成器

Shield Badge 生成器,在线生成双段徽章 SVG,自定义左右文本、背景色、文字色,并支持复制与导出 PNG。

Shield徽章生成 Badge生成器 在线SVG工具 README徽章
免费工具
左右双段 复制 SVG / Data URI 导出 PNG
徽章预览
左侧实时渲染 SVG,适合一边调整文字和颜色,一边确认视觉平衡。
SVG 输出
生成后的 SVG 可以直接贴进 README、文档站或项目导航页;如果你只需要图片,也可以直接下载 PNG。
输出宽度
-
徽章高度
-
输出模式
-
当前文案
-

        
整体设置
控制徽章高度、圆角、左右内边距,以及是否启用右侧状态段。
左侧字段
通常用作标签、模块名、构建项或技术栈名称。
右侧字段
通常用作状态、版本号、许可证或数量说明。

常见用途

  • 项目 README 里经常需要放版本、构建状态、License、覆盖率或部署状态等徽章。
  • 资源站、导航页或工具卡片上,也可以把它当作简洁的状态标签和元信息模块。
  • 如果只想做单段标题徽章,关闭右侧状态段即可,适合做短标签或分类标识。

使用建议

  • 左段建议放相对稳定的名称,右段适合放经常变化的状态或数字,这样信息层次更清楚。
  • 想靠近经典 Shields 风格时,可以保持 28px 左右高度、较深左底色和更亮的右底色。
  • 导出 PNG 前先确认文字长度,过长文案虽然会自动撑宽,但更适合拆成两段短词。

网友评论

0
收藏0