本站使用的徽章

2026-05-23 6 min

如何制作本站徽章（SVG Badge）

介绍如何制作本站 Astro.svg、icp.svg 这种风格的网站徽章。这种风格来自于 Shields.io 徽章服务。

一、徽章效果展示

以下是本站使用的几种徽章：

徽章名称	效果
Astro
Theme
BlogFinder
ICP备案
公安备案

二、SVG徽章结构解析

以 icp.svg 为例（备案徽章，包含中文）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142" height="20" role="img" aria-label="粤ICP备 2024264991号-1">
    <title>粤ICP备 2024264991号-1</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="142" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#r)">
        <rect width="51" height="20" fill="#555"/>
        <rect x="51" width="91" height="20" fill="#007ec6"/>
        <rect width="142" 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="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">粤ICP备</text>
        <text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">粤ICP备</text>
        <text aria-hidden="true" x="955" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="810">2024264991号-1</text>
        <text x="955" y="140" transform="scale(.1)" fill="#fff" textLength="810">2024264991号-1</text>
    </g>
</svg>

结构说明

部分	说明
`<svg>`	画布尺寸，`width="101"` 和 `height="20"` 定义徽章总宽度和高度
`<linearGradient>`	添加渐变遮罩效果，让徽章看起来有立体感
`<clipPath>`	裁剪路径，`rx="3"` 创建圆角效果
`<g clip-path="url(#r)">`	使用裁剪路径的图形组
`<rect>`	矩形色块，左侧深灰色，右侧彩色
`<text>`	文字，每行有阴影文字（aria-hidden）和实际文字两层

三、关键参数调整

1. 调整徽章宽度

徽章总宽度 = 左侧色块宽度 + 右侧色块宽度

<!-- 以 ICP备案 为例，总宽度142 = 51 + 91 -->
<rect width="51" height="20" fill="#555"/>           <!-- 左侧灰色 -->
<rect x="51" width="91" height="20" fill="#007ec6"/> <!-- 右侧蓝色 -->

2. 调整颜色

左侧色块通常为深灰色 #555，右侧色块可自定义颜色：

颜色代码	颜色名称
`#007ec6`	蓝色（最常用）
`#ffd700`	金色/黄色
`#28a745`	绿色
`#dc3545`	红色
`#555`	灰色

3. 调整文字位置

文字的 x 坐标需要根据文字长度计算：

文字内容	文字长度(textLength)	x坐标	说明
短文字	310	265	5个字符左右
中等文字	410	265	4个中文字或6-7个英文字符
长文字	510	860	约7-8个中文字
更长文字	810	955	10个以上中文字

4. 文字分两行显示

左侧文字和右侧文字分别位于左右两个色块区域内：

<!-- 左侧文字区域（约前50宽度） -->
<text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">左侧文字</text>

<!-- 右侧文字区域（从51开始的后续宽度） -->
<text x="755" y="140" transform="scale(.1)" fill="#fff" textLength="310">右侧文字</text>

四、最简单的方法：使用 Shields.io

如果你不想手动编写SVG代码，可以直接使用 Shields.io 在线生成：

格式

https://img.shields.io/badge/左侧文字-右侧文字-颜色?style=flat-square

示例

https://img.shields.io/badge/Powered%20by-Astro-blue?style=flat-square
https://img.shields.io/badge/Theme-Retypeset-blue?style=flat-square
https://img.shields.io/badge/%E7%B2%A4ICP%E5%A4%87-2024264991%E5%8F%B7-blue?style=flat-square

参数说明

参数	说明	可选值
左侧文字	徽章左侧显示的文本	任意文字
右侧文字	徽章右侧显示的文本	任意文字
颜色	右侧区域的背景色	blue, green, red, yellow, orange, purple, pink, grey 等
style	徽章样式	flat-square（方形）, flat（圆角）, plastic（立体）

五、自定义SVG完整模板

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="[总宽度]" height="20" role="img" aria-label="[无障碍描述]">
    <title>[鼠标悬停显示的标题]</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="[总宽度]" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#r)">
        <rect width="51" height="20" fill="#555"/>
        <rect x="51" width="[右侧宽度]" height="20" fill="[#右侧颜色]"/>
        <rect width="[总宽度]" 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="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="[左侧文字长度]">[左侧文字]</text>
        <text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="[左侧文字长度]">[左侧文字]</text>
        <text aria-hidden="true" x="[右侧X坐标]" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="[右侧文字长度]">[右侧文字]</text>
        <text x="[右侧X坐标]" y="140" transform="scale(.1)" fill="#fff" textLength="[右侧文字长度]">[右侧文字]</text>
    </g>
</svg>

六、本地查看SVG效果

修改完 .svg 文件后，可以直接在浏览器中打开查看效果：

找到要查看的 .svg 文件（如 public/icons/icp.svg）
在文件管理器中双击文件，或拖拽到浏览器中打开

七、常见问题

Q: 为什么文字显示不完整？

A: 检查 textLength 的值是否与实际文字长度匹配。如果文字过长，需要增加徽章的总宽度。

Q: 如何让文字换行显示？

A: 这种徽章样式不支持自动换行。如果文字过长，可以：

使用缩写（如 “ICP” 代替 “粤ICP备”）
增加徽章宽度
考虑使用其他徽章样式

Q: 渐变效果不显示？

A: 确保 <linearGradient> 的 id 与 fill="url(#s)" 引用一致，且在 <clipPath> 裁剪范围内。

八、更多资源

Shields.io 官网 - 在线徽章生成器
Simple Icons - 品牌图标库
SVG 教程 - MDN - 学习SVG基础