shield バッジ生成

機能

• プレビューはローカル描画。ページは一切通信しません
• 4 スタイル：flat・flat-square・plastic・for-the-badge
• 色は名前付き（`brightgreen` など）か任意の 16 進数。ラベルの色は別に指定できます
• simple-icons のアイコンを任意で追加（slug を入力、例：`github`）
• 5 種類のスニペット：URL・Markdown・HTML・reStructuredText・オフライン SVG ソース
• SVG はダウンロード可能。このスニペットは何にも依存しません
• 各スニペットを個別にコピーできます

使い方

1. 左右のテキストを入力します
2. 色とスタイルを選びます（必要ならアイコンの slug も）
3. プレビューを見て調整します
4. 必要なスニペットをコピーするか、SVG をダウンロードします

よくある質問

入力内容は shields.io に送られますか？

送られません。 プレビューはローカルで組み立てた SVG で、ページはリクエストを出しません —— 開発者ツールのネットワークパネルを開いて何文字か入力してみてください。外部へのリクエストは現れません。 ただし共有する URL は shields.io を指します：誰かがあなたの README を開くと、その人のブラウザーが画像を取得します。その通信はあなたのサイトで読者が起こすもので、このツールとは無関係です —— とはいえ URL が第三者を指す以上、知っておく価値はあります。 読者に第三者へアクセスさせたくない場合は「SVG ソース」のスニペットを使ってください。SVG をリポジトリやページに直接置けば、何にも依存しません。

プレビューが GitHub の表示と少し違うのはなぜですか？

幅が推定値だからです。shields.io はサーバー側で本物のフォント指標からラベル幅を計算しますが、こちらはブラウザー内で SVG を組み立てます —— Verdana が入っている前提は置けませんし、文字列を測るためだけにフォントを読み込むのは本末転倒です。そこで同梱の幅テーブルを使っています（`i` や `l` は `m` や `w` より狭く、CJK は全角として数えます）。 結果として、色・スタイル・文字は完全に一致し、幅だけが数ピクセル違い得ます。実際の画像は shields.io の描画が正です。 副次的な利点として、`for-the-badge` の大文字化はこちらでは正確です —— フォントに依存しません。

ラベルに日本語は使えますか？

使えます。URL 内ではパーセントエンコードされ（`構築` は `%E6%A7%8B%E7%AF%89`）、shields.io は正しく表示します。ローカルのプレビューも全角として幅を数えるので、潰れることはありません。 ただし幅の計算方法の違いは残ります（前の質問を参照）。全角文字ではその差がやや目立ちます。