本地生成 Badge
输入标签、消息和颜色后直接生成 Shield Badge，不依赖远程徽章服务。
SVG/PNG 下载
支持下载 SVG 源文件，也可以导出 PNG 图片用于文档或演示。
样式颜色可调
支持扁平和圆角样式，可分别设置左侧标签色和右侧消息色。
Shield Badge · 浏览器本地生成
Shield Badge 生成器
生成项目状态徽章，可下载 SVG 或 PNG。所有内容都在浏览器本地生成，不上传服务器。
标签
build
消息
passing
样式
扁平
格式
SVG/PNG
<svg xmlns="http://www.w3.org/2000/svg" width="136" height="28" role="img" aria-label="build: passing"> <rect width="136" height="28" rx="3" fill="#22c55e"/> <rect width="60" height="28" rx="3" fill="#555555"/> <path d="M57 0h3v28h-3z" fill="#555555"/> <text x="30" y="18" text-anchor="middle" fill="#fff" font-family="Verdana,Geneva,sans-serif" font-size="12">build</text> <text x="98" y="18" text-anchor="middle" fill="#fff" font-family="Verdana,Geneva,sans-serif" font-size="12">passing</text> </svg>
修改字段即可在浏览器本地生成 Shield Badge，不上传服务器。
工具使用说明
怎么用 Shield Badge 生成器
填写标签和消息
例如 build / passing、version / 1.0.0、license / MIT。
设置颜色和样式
选择标签颜色、消息颜色和圆角样式，预览会实时更新。
下载 SVG 或 PNG
SVG 适合放在 README，PNG 适合放在图片素材或演示文档里。
功能说明
这个工具解决什么问题
Shield Badge 可以用在哪里
常用于 README、文档页、项目状态说明和内部规范卡片。
本地生成适合离线制作静态徽章，也避免依赖外部徽章服务。
本地生成的边界
当前生成的是静态 Badge，不会自动读取仓库状态或 CI 状态。
如果需要动态状态，仍应接入真实 CI 或监控数据源。
常见问题
关于 Shield Badge 生成器，用户常问这些
会上传服务器吗？
不会。SVG 和 PNG 都在浏览器本地生成。
可以放到 README 吗？
可以。下载 SVG 后可以直接作为静态图片引用。
支持动态状态吗？
当前是静态生成器，不自动连接 CI 或外部接口。
为什么提供 PNG？
PNG 更适合用于幻灯片、图片素材和不方便直接嵌入 SVG 的场景。