無料ツール
日本語
SVGバッジの作成
SVGバッジの作成 — サイズや色を指定し、コードや結果を確認. 入力ガイド: バッジの文字, 背景色, 色. 登録不要.
登録不要
ツールを読み込み中…
使い方
- 1入力ガイド: バッジの文字, 背景色, 色.
- 2ツールを実行して結果を確認してください。
- 3結果をコピー / 結果をファイルに保存.
使う前に
入力範囲と単位を確認してください。結果は入力条件とブラウザに基づきます。
広告配信で通信情報を処理する場合があります。パーソナライズはプライバシー選択に従います。 プライバシー（英語）
実際の入力と出力の例
実際のエンジンに以下の例を入力した結果です。個人の入力や保存作業は使いません。ツールの例読込で同じ入力を確認できます。
入力例
| 項目 | 値 |
|---|---|
| バッジの文字 | Saemol |
| 背景色 | #0F766E |
| 色 | #FFFFFF |
結果例
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="80" viewBox="0 0 320 80"><rect width="320" height="80" rx="16" fill="#0F766E"/><text x="160" y="40" text-anchor="middle" dominant-baseline="central" font-family="sans-serif" font-size="24" fill="#FFFFFF">Saemol</text></svg>