平时在逛Github的时候都经常看到项目首页各式各样的徽章：
vue : 
React : 
Angular : 
那么这些徽章是怎么生成的呢？
徽章的本质是一种特定生成的 svg 矢量图标，无论如何如何放大缩小都不会失真
和插入图片的原理一样，但是变得变得更加精巧细致，适用于多种情况
首先需要生成自己喜欢的 svg 徽章文件
徽章的常用格式：[](想要跳转的超链接)
采用 Markdown 格式：
[](https://github.com/JeffreyYou/My_Documentation)
采用 HTML 格式：
<a href="https://github.com/JeffreyYou/My_Documentation"><img src="https://img.shields.io/badge/JeffreyYou%E7%9A%84-GitHub-brightgreen" alt="我是徽章"></a>
比较常见的网站如 Quality metadata badges for open source projects
该网站适用于绝大多数使用情况, 默认按照徽章内容分类
支持 Build,Code Coverage,Analysis 等多主题,同时支持自定义徽章和动态徽章.
例如：
以 create-react-app 为例，我们要展示它的开源许可证
create-react-app 是Facebook为了方便开发者搭建 react 项目开发环境所准备的手脚架
首先进入官网选择 License -- npm
然后输入 packageName create-reacte-app
Copy Badge URL ，表示MIT开源许可的徽章就生成了
| 常见命令 | 命令含义 | 补充 | |
|---|---|---|---|
| 1. | ?label=healthinesses |
将徽章左边的内容改成healthinesses |
/ |
| 2. | ?logo=appveyor |
搜寻添加自己想要的 Logo | / |
| 3. | ?logo=data:image/png;base64,… |
自定义logo (≥ 14px) | 整体大小不能大于 8192 bytes |
| 4. | ?logoColor=violet |
改变logo的颜色 | 支持 hex, rgb, rgba, hsl, hsla ，css named 颜色 |
| 5. | ?logoWidth=40 |
设置logo的水平长度 | / |
| 6. | ?link=http://left&link=http://right |
单独设置徽章左侧的超链接 | / |
| 7. | ?labelColor=abcdef |
修改左侧背景颜色 | 可用 colorA 替换 |
| 8. | ?color=fedcba |
修改右侧背景颜色 | 可用 colorB 替换 |
| 9. | ?cacheSeconds=3600 |
设置HTTP缓存生存时间 | 可用 maxAge 替换 |
| 10. | ?+command1+&command2 |
同时使多个command生效 | 注意只有一个 ? 其余使用 & 连接 |
除了官方已经提供的 Logo 外，为了能够更详细展示内容，也为了能够更好地装X(不是)，我们还希望可以自己导入喜欢的logo
但是由于单独制作 svg过于麻烦，官网贴心的提供了导入自定义logo的选项
步骤：
第一步 ：下载好自己喜欢的 svg / imae / png
第二步 ：将下载好的图片通过 Base64转码工具 转成一个以 data:image/png;base64 为开头的字符串
第三步 ：将转义好的 base64 字符串通过 百分号转码工具 将一些字符如 / 转义成 %2F 的 URL 地址
第四步 ：将转义好的 URL 按照 ?logo=URL 的格式添加的链接的结尾
第五步 ：配合修改背景颜色等命令食用更佳，多条命令之间用 & 连接
| 展示 | 效果 |
|---|---|
| 那个绿色的男人 |  |
| 求求了给个三连吧 |  |
| I love open source |  |
| 充钱就能变得更强 |  |
| 最大的同性交流网站 |  |
个人推荐的图片图标资源网站：https://icons8.com/
自定义logo时尽量选择14px左右的图片，且尽量挑选纯色的图片，否则展示效果可能会不是很理想，如果图片太大经过Base64转码后的url会非常长，导致加载失败。