徽章生成器（shields 风格）
生成 shields.io 风格的 SVG 徽章：自定义文案、颜色、风格与图标，实时预览并输出 SVG 源码、base64 data URI、Markdown 与 HTML。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
徽章内容
风格
常用命名色
输出
实时预览宽度: 93 px · #4c1 / #555
SVG 源码
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="20" role="img" aria-label="build: passing"> <title>build: passing</title> <linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="93" height="20" rx="3" fill="#fff"/></clipPath> <g clip-path="url(#r)"> <rect width="39" height="20" fill="#555"/><rect x="39" width="54" height="20" fill="#4c1"/><rect width="93" height="20" fill="url(#s)"/> </g> <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"> <text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">build</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="290">build</text><text aria-hidden="true" x="660" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">passing</text><text x="660" y="140" transform="scale(.1)" fill="#fff" textLength="440">passing</text> </g> </svg>
base64 data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MyIgaGVpZ2h0PSIyMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJidWlsZDogcGFzc2luZyI+Cjx0aXRsZT5idWlsZDogcGFzc2luZzwvdGl0bGU+CjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjIwIiByeD0iMyIgZmlsbD0iI2ZmZiIvPjwvY2xpcFBhdGg+CjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+CjxyZWN0IHdpZHRoPSIzOSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzU1NSIvPjxyZWN0IHg9IjM5IiB3aWR0aD0iNTQiIGhlaWdodD0iMjAiIGZpbGw9IiM0YzEiLz48cmVjdCB3aWR0aD0iOTMiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPgo8dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTk1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyOTAiPmJ1aWxkPC90ZXh0Pjx0ZXh0IHg9IjE5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjkwIj5idWlsZDwvdGV4dD48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iNjYwIiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+PHRleHQgeD0iNjYwIiB5PSIxNDAiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiBmaWxsPSIjZmZmIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+CjwvZz4KPC9zdmc+
Markdown
HTML
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MyIgaGVpZ2h0PSIyMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJidWlsZDogcGFzc2luZyI+Cjx0aXRsZT5idWlsZDogcGFzc2luZzwvdGl0bGU+CjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjIwIiByeD0iMyIgZmlsbD0iI2ZmZiIvPjwvY2xpcFBhdGg+CjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+CjxyZWN0IHdpZHRoPSIzOSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzU1NSIvPjxyZWN0IHg9IjM5IiB3aWR0aD0iNTQiIGhlaWdodD0iMjAiIGZpbGw9IiM0YzEiLz48cmVjdCB3aWR0aD0iOTMiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPgo8dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTk1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyOTAiPmJ1aWxkPC90ZXh0Pjx0ZXh0IHg9IjE5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjkwIj5idWlsZDwvdGV4dD48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iNjYwIiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+PHRleHQgeD0iNjYwIiB5PSIxNDAiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiBmaWxsPSIjZmZmIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+CjwvZz4KPC9zdmc+" alt="build: passing" />
这个工具能做什么
- 给 README 加「构建状态」「版本号」「许可证」这类徽章，不必依赖 shields.io 的在线接口，内网或离线环境也能出图。
- 徽章内容按项目实时调整，改完立刻拿到 SVG 源码、base64 data URI、Markdown 与 HTML 四种形式。
- 把 SVG 内联进邮件签名或内部文档，用 data URI 就不会出现外链被拦截、图片挂掉的问题。
- 需要和现有 shields 徽章风格完全一致时，直接用同名的命名色（brightgreen、blueviolet…）对齐视觉。
示例
输入
标签 build，消息 passing，消息颜色 brightgreen，标签颜色 grey，风格 flat，无图标
输出
宽度 93 px，消息色 #4c1（brightgreen 的取值），标签色 #555（grey） Markdown：
宽度由估算的 Verdana 11px 字符宽度决定：label「build」39 px + message「passing」54 px = 93 px。只有左侧标签非空且选了图标时才会再加 15 px 的图标宽度。
常见问题
生成的 SVG 会不会依赖字体或外部资源？
不依赖。文字宽度是自己按 Verdana 11px 的字符宽度表估算的，再用 textLength 把实际渲染宽度钉死，所以没有外部字体请求，服务端渲染和浏览器里结果一致。字体本身仍用 Verdana, Geneva, DejaVu Sans, sans-serif 的通用字体栈，个别系统字距略有差异也不会让徽章变形。
颜色能写哪些值？
可以用 shields 命名色（brightgreen、green、yellowgreen、yellow、orange、red、blue、grey、lightgrey、blueviolet、success、important、critical、informational、inactive、white、black、cyan、teal、purple、pink、brown），也可以直接写 #rgb 或 #rrggbb。认不出的颜色会提示，并且回退到默认的 #007ec6 / #555。
四种输出分别用在哪？
SVG 源码用于保存成 .svg 文件或内联进 HTML；base64 data URI 是不依赖外部文件的图片地址；Markdown 片段直接粘进 README；HTML 片段是带 alt 的 img 标签。它们内容一致，只是包装方式不同。
for-the-badge 风格为什么文字变成全大写？
这是 shields 对 for-the-badge 的定义：高度 28 px、字号放大 1.1 倍、左右内边距 10 px，并把标签和消息都转成大写。想保留原始大小写就选 flat、flat-square 或 plastic。
消息留空会怎样？
会提示「消息不能为空」并不生成徽章。标签可以留空，此时徽章只剩右侧一段，例如只写 MIT 得到宽度 32 px 的单段徽章。
关键词：badgeshieldssvg徽章markdown 徽章readmedata urishield badge徽章生成