SVG Badge Generator
Generate a two-part SVG status badge with a label and value, custom colours and rounded corners, like the shields used in README files.
Last reviewed by the Radiatus Cloud team
Generate a label and value status badge as SVG code.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Generate status badges as SVG
Status badges are the small two-part labels seen on project pages, showing things like build status, version numbers or coverage. This generator creates one with a grey label on the left and a coloured value on the right, matching the familiar shield style. Set the label text, the value text and the three colours, and it produces compact SVG with the widths sized automatically to fit the text.
The badge is pure SVG with no external dependencies, so it renders consistently wherever it is placed.
Where badges are used
Badges appear in documentation, repository readme files, dashboards and websites to convey a piece of status at a glance. Because this one is self-contained SVG, you can embed it inline, host it as a file, or paste it into Markdown that supports SVG. The text is escaped so special characters display safely, and the rounded corners give the clean look of the widely used badge services.
You can recolour or resize the badge afterwards by editing the attributes. Everything is generated locally in your browser.
Notes
This SVG Badge Generator tool runs entirely in your browser, so nothing you enter is uploaded or stored on a server. The generated output is plain, standards-compliant code that you can copy, paste, edit and reuse freely in your own projects, documents and designs without any attribution or sign-up.
Related tools
- EXIF Viewer — Extract hidden EXIF data (Camera, GPS, Settings) from images.
- Favicon Generator — Generate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
- Placeholder Image Generator — Generate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.
- Image Resizer — Resize images in your browser with aspect ratio control and format conversion. Files are processed locally and never uploaded.
Frequently Asked Questions
What is a status badge?
A small two-part label showing a name and a value, such as build and passing, commonly used in project documentation.
Does the badge resize to the text?
Yes. The label and value widths are calculated from the text length so the badge fits neatly around the words.
Can I use any colours?
Yes. You choose the label background, value background and text colours, so you can match a style or convey status with colour.
Is it safe to embed?
Yes. The text is escaped and the SVG is self-contained with no external references, so it embeds cleanly and safely.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Set the label, value and colours, then generate the badge.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
EXIF Viewer
ImageExtract hidden EXIF data (Camera, GPS, Settings) from images.
Favicon Generator
ImageGenerate favicons and app icons at every required size from one source image, with the exact HTML to reference them.
Placeholder Image Generator
ImageGenerate placeholder images at any size with custom colours and label text. Produced in your browser as downloadable files, no external hotlinking.