SVG badge generator — shields-style badges for README files

How to use the SVG badge generator

1. Type the Label (the grey left part, such as “build” or “license”). Leave it blank for a one-part badge.
2. Type the Message (the coloured right part, such as “passing” or “MIT”). It cannot be empty.
3. Pick a Label colour and a Message colour.
4. Choose a Style: Flat (rounded corners with a soft shine), Flat square (square corners, no shine) or For the badge (taller, bold capitals).
5. Download badge.svg and copy the Markdown into your README.

What it does and when to use it

Badges are the small two-colour labels at the top of many open-source README files. They show facts at a glance: the licence, the current version, the supported language, or a “docs” link. This tool makes the same look without an account or a network call, so you can create badges for private projects, slide decks or internal wikis too.

For a whole README, the README generator can sit around your badges. For round status icons rather than text labels, try the SVG checkmark generator. For a project avatar to go beside the badges, use the SVG identicon avatar generator.

How it works

The tool estimates the width of each text part from character classes: narrow letters such as i and l, wide ones such as m and W, capitals, digits and others. It adds padding on both sides and draws two rectangles side by side. Flat style adds a 3 px corner radius and a faint top-to-bottom shine. For the badge uses 10 px bold capitals with extra letter spacing and a height of 28 px instead of 20 px.

Each text is drawn twice: a 30% dark copy one pixel lower acts as a shadow, and the white text sits on top. The SVG carries an aria-label and a title, such as “build: passing”, for screen readers. Text is escaped, so characters like < and & are safe. The shields.io link is built by the same rules shields.io uses for its static badge URLs: dashes and underscores are doubled, and other characters are URL-encoded.

Worked examples

Default build badge. Label “build”, message “passing”, flat. The SVG is 94 × 20, and the Markdown includes ![build](https://img.shields.io/badge/build-passing-44cc11?style=flat).

Licence badge. Label “license”, message “MIT”, colour #007ec6, flat square. The tag reads width="85" height="20" viewBox="0 0 85 20" role="img" aria-label="license: MIT".

Version, one part. Empty label, message “v2.4.0”, for the badge. The text becomes >V2.4.0</text> in capitals on a 63 × 28 badge.

Empty message. A message of only spaces returns “Enter a message for the badge.” instead of an SVG.

Limits and tips

• Keep messages short; badges are meant to be read in a glance.
• Pick a message colour with enough contrast for white text. Bright yellows and light greens can be hard to read.
• Line up several badges by putting their Markdown on one line, separated by spaces.