软件从业者工具箱

功能说明

本工具生成 shields.io 风格的状态徽章（Badge），就是常见于开源项目 README 顶部的那种「build passing」「license MIT」小标签。徽章由左右两个色块组成，左侧通常是类别标签，右侧是具体状态值。所有 SVG 均在浏览器本地拼接生成，不请求任何外部服务，因此可以放心用于内网项目与私有仓库。

为什么要自己生成

直接引用 shields.io 的在线图片有三个现实问题：内网或离线环境无法访问导致图片裂开；外部服务偶发抖动会拖慢 README 加载；文档导出为 PDF 或离线包时图片会丢失。把 SVG 下载到仓库里作为静态资源引用，可以彻底避免这些问题，而且 SVG 是矢量格式，任意缩放都清晰，体积通常只有一两 KB。

宽度是怎么算出来的

SVG 本身不会自动收缩到文字宽度，必须预先算好每段文字的像素宽度。本工具优先使用 Canvas 的 measureText 以 11 号 Verdana 字体实测宽度，这与 shields.io 的排版基准一致；当环境不支持 Canvas 时，回退到按字符类别估算的宽度表（中日韩字符按 11 像素、大写字母按 7.5 像素、小写字母按 6.4 像素、i 与 l 这类窄字符按 3.6 像素等）。文字两侧各留 6 像素内边距，带 Logo 时左区额外增加 17 像素。因此中文徽章、长文案徽章都能得到合适的宽度，不会出现文字溢出色块的情况。

样式说明

扁平是最常见的现代风格，纯色平铺配 3 像素圆角；立体渐变在色块上叠加一层自上而下的半透明渐变，模拟早期 Travis CI 徽章的塑料质感；直角去掉圆角，适合排版紧凑的表格或与其他方形元素对齐。文字投影会在正文下方绘制一层半透明深色文字，可显著提升浅色背景上的可读性，建议保持开启。

Logo 与安全限制

Logo 通过 SVG 的 image 元素嵌入，绘制在左区文字前方，尺寸固定为 14 x 14 像素。出于安全考虑，只接受 http、https、data 三种协议的地址，其他形式会被忽略。强烈建议使用 data URI 形式的内联 Logo，因为外链图片在把 SVG 当作独立文件打开、或在部分 Markdown 渲染器中会因跨域与引用限制而不显示，内联则永远可靠。你可以先用 Base64 工具把小图标转成 data URI 再粘贴进来。

使用场景

开源项目 README 状态标识、内部文档的版本与环境标签、CI 流水线产出的动态状态图、技术分享 PPT 中的技术栈标签。