Static Display of Labels and Values
This tool is a frontend application for statically generating custom shield-like badges, widely used in software development documents and GitHub README files, in SVG (Scalable Vector Graphics) format.
When a user enters any string into the left label and right value input fields on the screen, the state is immediately updated by React's state hook (useState) and dynamically reflected into the SVG code rendered on the DOM.
For example, if you enter build for the left label and passing for the right data, the tool detects this and embeds these strings into the internal SVG template.
The output SVG code has the <svg> tag as its root element and includes the xmlns="http://www.w3.org/2000/svg" declaration. The badge visuals mainly consist of two rectangles (<rect>), with the label area having a dark background color (gray by default) placed on the left, and the data area having a user-specified color (green by default) placed on the right.
Since this tool specializes entirely in static badge generation, it does not have any functions to dynamically fetch build status from CI/CD pipelines or fetch the latest version number by communicating with external service APIs.
It behaves very simply and predictably, embedding the strings entered in the input fields directly as <text> elements in the SVG.
For text rendering, a text element simulating a drop shadow in semi-transparent black is placed slightly below the baseline to enhance visibility, and the main white text is overlaid directly on top of it.
Also, text-anchor="middle" is set for the <text> element, calculated to be placed in the geometric center of the left and right rectangular areas.
The text font family is specified as Verdana,Geneva,DejaVu Sans,sans-serif, and is implemented so that fallbacks to standard sans-serif fonts of the browser or OS function.
Because it does not have the process of loading external Web fonts, the text rendering result (font thickness and fine kerning) may differ slightly depending on the user's environment.
Functions such as embedding icon images and exporting to PNG format are not implemented, so it can be used purely for purposes that require lightweight vector data text badges.
Three Styles and Colors
The visual impression of the generated SVG badge is determined by the badge style and color settings selectable by the user. Three style options are provided: flat, flat-square, and plastic, which can be selected from the select box on the UI.
The flat style adopts the flat design standardly used in modern web design. Inside the SVG, a slight light-and-dark gradient (from semi-transparent gray to transparent) is overlaid from top to bottom using the <linearGradient> tag to express a faint texture while remaining flat.
The flat-square style is a sharp design that completely eliminates corner rounding. No gradient overlay layer is applied, and it is rendered purely as a solid single color.
The plastic style has a three-dimensional gloss. By overlaying complex gradients with multiple <stop> elements (strong highlight at the top, transparent layer in the middle, strong shadow at the bottom), it simulates a texture like plastic.
In the color settings, it is possible to specify HEX codes via standard HTML color pickers (<input type="color">) or text input fields for both the left label background and the right data background.
For the right data color, 9 preset buttons are provided: Green, Bright Green, Yellow, Yellow Green, Orange, Red, Blue, Grey, and Light Grey, and simply clicking these immediately applies a specific HEX code (e.g., #97ca00 for Bright Green) as the right background color.
These style and color information are directly bound to the fill attribute of the <rect> elements in the SVG. To control the overall shape of the badge, a rounded rectangular mask is defined using the <clipPath> tag, and the left and right background rectangles and gradient layers are grouped (<g> tag) and contained within that mask.
Note that while this tool outputs a static design visually similar to standard shield badges, it does not guarantee complete compatibility with external generation services, and the gradient coefficients and shadow offset values in the implementation are based on our own simple definitions.
Dimensions and Simple Character Width
When generating SVG badges, in order to appropriately contain variable-length text while maintaining beautiful margins, it is necessary to predict the physical width occupied by the entered string to some extent in advance and dynamically determine the overall SVG canvas (width attribute) and rectangle width.
This tool solves this problem by implementing a simple character width estimation function using built-in JavaScript logic, without using external font metrics APIs or advanced Canvas measurements.
Note that the width is an approximate character width and not an actual font measurement.
In this estimation logic, the input string is scanned character by character, and a virtual width coefficient is added based on its UTF-16 code unit.
Specifically, for a base font size of 11px, fixed coefficients are assigned: 6.5px for numbers (0-9), 7.5px for uppercase Latin alphabets (A-Z), 6.0px for lowercase Latin alphabets (a-z), 11.5px for characters with UTF-16 values of 0x4e00 and above (which broadly catches CJK characters, full-width forms, and potentially individual emoji surrogates), and 4.5px for other symbols and spaces.
After summing up these coefficients for the entire input string, the final pixel width is approximated by multiplying it by the ratio of the font size (calculated as 55% of the height) corresponding to the badge height specified by the user.
The calculated text widths and padding determine the overall width. The height is limited to 14–40 px and corner radius to 0–12 px. Flat Square always uses square corners.
This approach operates lightly and rapidly, but because it is a simple coefficient calculation based on the Verdana font, slight discrepancies may occur between the actual rendering result and the predicted width depending on the fallback font (such as DejaVu Sans) on the OS environment.
For example, if strings with unique widths in a proportional font like W are entered consecutively, cases exist where the left and right margins appear uneven.
This is a limitation in the specifications of the static generation engine that does not depend on the browser's execution environment.
XML Escaping and Color Validation
When using the English version of this tool, text inputs for label and value are processed using XML escaping. Special characters including ampersands (&), less-than (<), greater-than (>), double quotes ("), and apostrophes (') are escaped before being inserted into the <text>, <title>, and aria-label attributes.
The UI renders the generated SVG output directly inline and is not sandboxed. Escaping generated labels and values and restricting color palettes prevents malformed markup within the generator's template, but this does not act as a general-purpose sanitizer or validator for arbitrary external SVG, nor does it guarantee absolute safety for all SVG content.
Furthermore, font metrics are estimated rather than precisely measured, which affects layout dimensions rather than security guarantees.
Users should be aware that the output is displayed directly as inline SVG.
In addition, the tool applies color validation using safe color rules. Color inputs are restricted to valid 3-digit or 6-digit HEX color codes.
If an invalid color string or non-HEX value is entered, the tool automatically falls back to default safe colors (#555555 or #4c1).
Text is XML-escaped and invalid color values use a fallback. Check the rendered badge before embedding it.
Copying and Saving SVG
This tool provides two main output interfaces for using the generated SVG code in external projects: the Copy Code function and the Download SVG File function.
Both of these are implemented leveraging client-side JavaScript APIs and do not involve any communication with an external server.
When you click the Copy Code button, the latest SVG source code string held as a React state is directly written to the operating system's clipboard area through the browser's Clipboard API.
Note that there is no waiting for copy success, and a clipboard icon alone is not proof of a completed copy in these EN implementations.
The copied text is purely the SVG tags only, and markdown-format wrappers or HTML <img> tags are not automatically added.
The export process via the Download SVG File button is achieved using the browser's Blob API and URL.createObjectURL. First, a Blob object specifying the MIME type as image/svg+xml with the SVG source code string as its content is generated in memory.
Next, a temporary reference URL to this Blob is created and assigned to the href attribute of a dynamically generated anchor tag (<a> element).
Regarding the downloaded filename, the English version does not implement filename sanitization. The requested filename is simply label-value.svg as is, without replacing invalid characters or clamping the string length.
Clicking this anchor tag programmatically from JavaScript triggers a download request, which may or may not open a save dialog depending on browser settings, and does not guarantee completion of the save process.
Immediately after the process, the URL object reference is destroyed to free that specific resource, though this does not guarantee full memory release.
Usage in READMEs and Lack of State Update Support
The downloaded or copied SVG badges can be incorporated and used in GitHub README.md files or various project documents. As a method to display the badge, it is common to commit and place the .svg file in the repository and reference it with a relative path using Markdown image notation, or to specify it in the src attribute of an HTML <img> tag.
An important technical point to note here is the ID conflict problem when directly pasting (inlining) the copied raw SVG source code (the string starting with <svg>) multiple times into an HTML file.
Fixed ID attributes, such as <linearGradient id="s"> for defining gradients and <clipPath id="r"> for defining rounded clipping masks, are hardcoded within the SVG code generated by this tool.
Therefore, if multiple SVG codes generated by this tool are placed inline as they are within a single HTML document (DOM tree), elements with the same IDs s and r will be duplicated.
As a result, the browser's rendering engine may get confused by the conflicting definitions, which can cause unintended gradient applications and display corruption for some or all of the SVGs.
To avoid this problem, you should load the badges as external files using <img> tags instead of expanding them inline, or manually change the ID attributes in the SVG code to unique strings.
Also, because this tool is a static generator, the output SVG badge itself does not have a function to autonomously update its contents.
For example, even if the test coverage rate or the latest release version changes, the contents of the downloaded SVG file will not automatically follow and be rewritten.
If you want to update the value, you must enter the new numerical value on the tool's screen again, regenerate the SVG, and manually replace the file.
This is a different specification from server-hosted badge services that continuously output images dynamically. However, the point that it can be included in the repository as an asset that does not increase external dependencies of the project and does not rely on external badge generation services with broken links due to communication errors or service termination is an advantage unique to static badges.