Shield badge generator
Generate shields.io style SVG badges with custom label, message, colour, style and logo, with live preview and SVG, base64 data URI, Markdown and HTML output.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Badge content
Output
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="20" role="img" aria-label="build: passing"> <title>build: passing</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="93" height="20" rx="3" fill="#fff"/></clipPath> <g clip-path="url(#r)"> <rect width="39" height="20" fill="#555"/><rect x="39" width="54" height="20" fill="#4c1"/><rect width="93" 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="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">build</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="290">build</text><text aria-hidden="true" x="660" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="440">passing</text><text x="660" y="140" transform="scale(.1)" fill="#fff" textLength="440">passing</text> </g> </svg>
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MyIgaGVpZ2h0PSIyMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJidWlsZDogcGFzc2luZyI+Cjx0aXRsZT5idWlsZDogcGFzc2luZzwvdGl0bGU+CjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjIwIiByeD0iMyIgZmlsbD0iI2ZmZiIvPjwvY2xpcFBhdGg+CjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+CjxyZWN0IHdpZHRoPSIzOSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzU1NSIvPjxyZWN0IHg9IjM5IiB3aWR0aD0iNTQiIGhlaWdodD0iMjAiIGZpbGw9IiM0YzEiLz48cmVjdCB3aWR0aD0iOTMiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPgo8dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTk1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyOTAiPmJ1aWxkPC90ZXh0Pjx0ZXh0IHg9IjE5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjkwIj5idWlsZDwvdGV4dD48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iNjYwIiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+PHRleHQgeD0iNjYwIiB5PSIxNDAiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiBmaWxsPSIjZmZmIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+CjwvZz4KPC9zdmc+
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MyIgaGVpZ2h0PSIyMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJidWlsZDogcGFzc2luZyI+Cjx0aXRsZT5idWlsZDogcGFzc2luZzwvdGl0bGU+CjxsaW5lYXJHcmFkaWVudCBpZD0icyIgeDI9IjAiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiYmIiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iLjEiLz48L2xpbmVhckdyYWRpZW50PjxjbGlwUGF0aCBpZD0iciI+PHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjIwIiByeD0iMyIgZmlsbD0iI2ZmZiIvPjwvY2xpcFBhdGg+CjxnIGNsaXAtcGF0aD0idXJsKCNyKSI+CjxyZWN0IHdpZHRoPSIzOSIgaGVpZ2h0PSIyMCIgZmlsbD0iIzU1NSIvPjxyZWN0IHg9IjM5IiB3aWR0aD0iNTQiIGhlaWdodD0iMjAiIGZpbGw9IiM0YzEiLz48cmVjdCB3aWR0aD0iOTMiIGhlaWdodD0iMjAiIGZpbGw9InVybCgjcykiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iVmVyZGFuYSxHZW5ldmEsRGVqYVZ1IFNhbnMsc2Fucy1zZXJpZiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZm9udC1zaXplPSIxMTAiPgo8dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iMTk1IiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSIyOTAiPmJ1aWxkPC90ZXh0Pjx0ZXh0IHg9IjE5NSIgeT0iMTQwIiB0cmFuc2Zvcm09InNjYWxlKC4xKSIgZmlsbD0iI2ZmZiIgdGV4dExlbmd0aD0iMjkwIj5idWlsZDwvdGV4dD48dGV4dCBhcmlhLWhpZGRlbj0idHJ1ZSIgeD0iNjYwIiB5PSIxNTAiIGZpbGw9IiMwMTAxMDEiIGZpbGwtb3BhY2l0eT0iLjMiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+PHRleHQgeD0iNjYwIiB5PSIxNDAiIHRyYW5zZm9ybT0ic2NhbGUoLjEpIiBmaWxsPSIjZmZmIiB0ZXh0TGVuZ3RoPSI0NDAiPnBhc3Npbmc8L3RleHQ+CjwvZz4KPC9zdmc+" alt="build: passing" />
What this tool does
- Add build status, version and licence badges to a README without depending on the shields.io service, so it still works on an intranet or offline.
- Tweak the badge content and instantly get four forms: SVG source, base64 data URI, Markdown and HTML.
- Inline the SVG in an email signature or an internal doc via the data URI, which avoids blocked external images and broken links.
- Match an existing set of shields badges exactly by reusing the same named colours (brightgreen, blueviolet, …).
Example
Input
Label build, message passing, message colour brightgreen, label colour grey, style flat, no logo
Output
Width 93 px, message colour #4c1 (brightgreen), label colour #555 (grey) Markdown: 
The width comes from the estimated Verdana 11px character widths: the "build" label is 39 px and "passing" is 54 px, so 93 px total. The extra 15 px logo width is only added when the label is non-empty and a logo is selected.
Frequently asked questions
Does the generated SVG depend on fonts or external assets?
No. Text width is estimated from a built-in Verdana 11px character width table and then pinned with textLength, so there are no external font requests and server-side rendering matches the browser. The font stack is still the generic Verdana, Geneva, DejaVu Sans, sans-serif, and small kerning differences on some systems will not distort the badge.
Which colour values are accepted?
Either a shields named colour (brightgreen, green, yellowgreen, yellow, orange, red, blue, grey, lightgrey, blueviolet, success, important, critical, informational, inactive, white, black, cyan, teal, purple, pink, brown) or a literal #rgb / #rrggbb. An unrecognised value is reported and falls back to the default #007ec6 / #555.
What is each of the four outputs for?
The SVG source goes into a .svg file or inline HTML; the base64 data URI is an image URL with no external file; the Markdown snippet pastes straight into a README; the HTML snippet is an img tag with alt text. They carry identical content in different wrappers.
Why does for-the-badge turn my text into capitals?
That is the shields definition of the style: 28 px tall, text scaled 1.1×, 10 px side padding, and both label and message upper-cased. Pick flat, flat-square or plastic if you need to keep the original casing.
What if I leave the message empty?
It answers "The message cannot be empty" and renders nothing. The label may be empty though — a message-only badge such as MIT comes out 32 px wide as a single segment.
Keywords：badgeshieldssvg徽章markdown 徽章readmedata urishield badge徽章生成