Badges Used on This Site

2026-05-23 3 min

Table of Contents

How to Make Site Badges (SVG Badge)

Explains how to create website badges in the style of Astro.svg and icp.svg used on this site. This style originates from the Shields.io badge service.

I. Badge Examples

Here are several badges used on this site:

Badge Name	Effect
Astro
Theme
BlogFinder
ICP License
Public Security Record

II. SVG Badge Structure Analysis

Take icp.svg as an example (a record badge containing Chinese characters):

<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>

Structure Description

Part	Description
`<svg>`	Canvas dimensions; `width="101"` and `height="20"` define the total width and height of the badge
`<linearGradient>`	Adds a gradient overlay for a slightly three-dimensional look
`<clipPath>`	Clipping path; `rx="3"` creates rounded corners
`<g clip-path="url(#r)">`	Graphic group using the clipping path
`<rect>`	Rectangular color blocks; dark gray on the left, colored on the right
`<text>`	Text, comprising a shadow layer (`aria-hidden`) and the main text layer

III. Key Parameter Adjustments

1. Adjust Badge Width

Total badge width = Left block width + Right block width

<!-- Taking the ICP badge as an example, total width 142 = 51 + 91 -->
<rect width="51" height="20" fill="#555"/>           <!-- Left gray block -->
<rect x="51" width="91" height="20" fill="#007ec6"/> <!-- Right blue block -->

2. Adjust Colors

The left block is typically dark gray #555. The right block color can be customized:

Color Code	Color Name
`#007ec6`	Blue (most common)
`#ffd700`	Gold/Yellow
`#28a745`	Green
`#dc3545`	Red
`#555`	Gray

3. Adjust Text Position

The x coordinate of the text needs to be calculated based on text length:

Text Content	Text Length(textLength)	x coordinate	Description
Short text	310	265	Around 5 characters
Medium text	410	265	4 Chinese characters or 6-7 English characters
Long text	510	860	About 7-8 Chinese characters
Longer text	810	955	More than 10 Chinese characters

4. Text Displayed in Two Lines

The left and right texts are positioned within their respective colored blocks:

<!-- Left text area (approx. first 50 width) -->
<text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">Left Text</text>

<!-- Right text area (subsequent width starting from 51) -->
<text x="755" y="140" transform="scale(.1)" fill="#fff" textLength="310">Right Text</text>

IV. Simplest Method: Using Shields.io

If you prefer not to write SVG code manually, you can generate badges online using Shields.io:

Format

https://img.shields.io/badge/LeftText-RightText-Color?style=flat-square

Examples

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/ICP-2024264991-blue?style=flat-square

Parameter Description

Parameter	Description	Options
Left Text	Text displayed on the left side of the badge	Any text
Right Text	Text displayed on the right side of the badge	Any text
Color	Background color of the right section	blue, green, red, yellow, orange, purple, pink, grey, etc.
style	Badge style	flat-square (square), flat (rounded), plastic (3D)

V. Custom SVG Complete Template

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="[TotalWidth]" height="20" role="img" aria-label="[Accessibility Description]">
    <title>[Tooltip Title on Hover]</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="[TotalWidth]" height="20" rx="3" fill="#fff"/>
    </clipPath>
    <g clip-path="url(#r)">
        <rect width="51" height="20" fill="#555"/>
        <rect x="51" width="[RightWidth]" height="20" fill="[#RightColor]"/>
        <rect width="[TotalWidth]" 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="[LeftTextLength]">[Left Text]</text>
        <text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="[LeftTextLength]">[Left Text]</text>
        <text aria-hidden="true" x="[RightXCoordinate]" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="[RightTextLength]">[Right Text]</text>
        <text x="[RightXCoordinate]" y="140" transform="scale(.1)" fill="#fff" textLength="[RightTextLength]">[Right Text]</text>
    </g>
</svg>

VI. Previewing SVG Locally

After modifying an .svg file, you can open it directly in a browser to see the effect:

Locate the .svg file you want to view (e.g., public/icons/icp.svg)
Double-click the file in the file manager, or drag and drop it into a browser window.

VII. Frequently Asked Questions

Q: Why is my text not displaying completely?

A: Check if the textLength value matches the actual length of the text. If the text is too long, you need to increase the total width of the badge.

Q: How can I make the text wrap?

A: This badge style does not support automatic line wrapping. If the text is too long, you can:

Use an abbreviation (e.g., “ICP” instead of “粤ICP备”)
Increase the badge width
Consider using a different badge style

Q: The gradient effect is not showing up?

A: Ensure the <linearGradient> id matches the reference in fill="url(#s)", and that it falls within the <clipPath> clipping area.

VIII. More Resources

Shields.io Official Website - Online badge generator
Simple Icons - Brand icon library
SVG Tutorial - MDN - Learn SVG basics