🏷️ 徽章 SVG 在你自己的浏览器里生成，不请求任何外部服务（不依赖 shields.io），生成的 SVG 直接内联在代码里，放进 README 就能显示。
🏷️ 徽章内容
📤 生成的代码
⚠️ 使用提示：① 生成的是纯 SVG 图形，不是 shields.io 的动态徽章——数字不会自动更新（如 star 数、下载量），需要你手动改文本；② 宽度按字符数估算，不同字体渲染略有差异，个别情况可能稍宽或稍窄；③ Markdown 里用 `![]()
` 标签是为了支持自定义尺寸与对齐，GitHub 正常渲染；④ 徽章颜色建议遵循 shields.io 的习惯色（绿 `#4c1`、红 `#e05d44`、黄 `#dfb317`、蓝 `#007ec6`）；⑤ 全部本地生成，不上传、不联网。
开发工具
完全免费
🌙 支持黑夜模式
🔒 本地生成，不联网
🎨 三种样式
📋 三种代码
开源项目的 README 顶部总有一排小徽章：构建状态、协议、版本、语言……它们本质是一张 SVG 图片，自己就能做。
① 可视化编辑：左右文本、左右颜色、样式都能调，实时预览；
② 三种风格：扁平 flat、直角 flat-square、立体 plastic；
③ 快捷预设：build / license / version / stars 等常见徽章一点即用；
④ 三种代码：SVG 源码、Markdown 代码（可带链接）、HTML 代码；
⑤ 本地生成：不请求 shields.io，断网也能用，SVG 可直接内联。
全程在你自己的浏览器里完成，内容不上传。
核心特性
本地 SVG 生成
三种样式
颜色自由配
快捷预设
Markdown / HTML
可下载 SVG
不联网
关于这个工具
怎么实现：
① 测宽：用 canvas 的 `measureText`（11px Verdana）估算左右文本像素宽度，再加左右内边距；
② 拼 SVG：按 shields.io 的布局惯例——左侧灰色底 + 右侧彩色底，圆角用 `rect` 的 rx，立体样式叠一层半透明渐变；
③ 文本居中：每个色块中心画 `text`，加一层白色阴影提升小字可读性；
④ 输出：同一份 SVG 分别包装成 SVG 源码、Markdown 图片标签（可选外链）与 HTML 代码。
它不做：不做动态数据徽章（不拉取 star 数、下载量）、不支持自定义字体上传。
怎么用
第 1 步
填左侧标签（如 `license`）与右侧文本（如 `MIT`）。
第 2 步
选颜色，或点预设徽章一键套用。
第 3 步
挑样式：扁平、直角或立体。
第 4 步
需要点击跳转就填链接地址。
第 5 步
复制 Markdown 代码粘贴到 README，或下载 SVG 文件放进 assets 目录。
更新记录
-
v1.0
2026-09-21
工具正式上线：本地生成 shields.io 风格徽章 SVG，支持左右文本与颜色自定义、flat / flat-square / plastic 三种样式、build / license / version / stars 等快捷预设、可选链接地址，实时预览并输出 SVG 源码 / Markdown / HTML 三种代码，可下载 SVG 文件。本地生成不联网，适配黑夜模式与移动端。
常见问题
徽章的数字会自动更新吗？
不会。本工具生成的是静态 SVG，文本写死在里面，不会随时间或仓库数据变化。
需要动态徽章（star 数、下载量、构建状态）请用 shields.io 这类在线服务，它们会定时去拉数据重新渲染。
本工具适合：协议、版本、语言、作者这类不常变的信息，以及你想完全离线、不依赖第三方服务的场景。
为什么在 GitHub 上显示宽度不太对？
徽章宽度是按 11px Verdana 估算的，而不同系统的字体渲染会有几个像素的差别，可能出现文字略微贴边。
解决办法：把右侧文本改短一点，或在 SVG 里手动调整宽度（复制源码后改 `width` 与 `rect` 宽度即可）。
能用中文吗？
技术上可以（SVG 里的 text 支持中文），但 shields.io 风格的徽章字体是等宽西文字体，中文会显示成系统默认字体，宽度估算也可能偏窄。
建议：中文徽章生成后先看预览，必要时手动加宽 SVG 的 width。
💬 留言板 0
全部留言需审核通过后展示
🎉
留言已提交！
审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！