SVGシンボルスプライト作成
home、search、userと入力すると、それぞれのsymbolを含む非表示のSVGスプライト1つと、アイコンごとに貼り付けられるuse要素が手に入ります。空の一覧、重複、使えない名前は受け付けません。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- Ids
- home, search, user
- 数量
- 3
- viewBox 属性
- 0 0 24 24
- IDプレフィックス
- シンボルID
- home, search, user
SVG シンボルスプライトはアイコン体系を小さく、キャッシュしやすく、アクセシブルに保ちます。隠れた一つの文書に再利用可能なシンボルを置き、各ボタンやナビ項目は短い use 要素でそれを指します。それでもデザイナーやフロントエンドエンジニアは、ラッパーを手書きし、id を付け替え、新しいアイコンがセットに入るたびに参照箇所を同期する手間を強いられがちです。本機能は空でないアイコン識別子の一覧と、任意の viewBox および id 接頭辞を受け取り、決定論的なスプライトマークアップと各最終シンボル id 用の use スニペットを返します。
SVG シンボルスプライトとは何か、なぜ id 一覧が重要か
古典的な SVG アイコンスプライトは、通常 display none で隠し aria-hidden を付けた単一のルート svg 要素です。支援技術が定義ブロックを読み飛ばせるようにするためです。
その中で各アイコンは symbol 要素となり、id はプロダクトがどこでも使う安定した名前（home、search、cart、user-settings など）です。
パスや形状はそれらの子として置き、本ツールは共通 viewBox 付きの空の symbol シェルを出力するので、資産パイプラインやデザイナーのエクスポートが後から形状を注入でき、各利用側を書き直す必要がありません。
呼び出し側では use とシンボル id に一致する href フラグメントで参照し、サイズや currentColor 用に小さな svg で包むのが一般的です。その id 語彙をコピーしたマークアップではなく単一の一覧として保つと、Figma エクスポート、React コンポーネント、メールフッター、静的マーケページの間でのずれを防げます。
一覧が空なら公開するものはありません。
活用例
コンポーネントライブラリと Storybook 文書
Storybook のノブと README 例を実在のシンボル id に揃え、開発者が存在しないフラグメントを参照しないようにします。
CMS とマーケページのショートコード
ナビやフッター用アイコンの貼り付け可能な use マークアップをコンテンツ著者に渡し、SVG 定義を手編集させません。
よくある質問
id 一覧が空だとどうなりますか？
空のカタログは有効なスプライト公開ではありません。一覧を直して再試行してください。検証失敗は課金されません。
すべてのシンボルにicon-のような接頭辞を付けるには？
接頭辞を一度入力すると、すべての名前の前に付きます。たとえばhomeはicon-homeになり、同じページにある別のライブラリの同名シンボルと衝突しなくなります。
アイコン名にはどの文字を使えますか？
先頭は英字かアンダースコアで、その後に英字、数字、アンダースコア、ピリオド、コロン、ハイフンを使えます。空白などの記号は、マークアップやuseからの参照を壊すため受け付けません。
2つのアイコンが同じ名前になった場合はどうなりますか？
スプライトは作成されず、分かりやすいメッセージが表示されます。接頭辞を付けた後に初めて重複する場合も同じです。ブラウザ上で黙って上書きされるより、一覧を直すほうが安全です。
各シンボルの表示領域（viewBox）は指定できますか？
指定しなければ、すべてのシンボルに0 0 24 24が使われます。16ピクセルの絵など別の大きさに合わせる場合は、幅と高さが正の値になる4つの数字を入力してください。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/svg-symbol-sprite-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"ids":["home","search","user"]}'const res = await fetch("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"ids": [
"home",
"search",
"user"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-symbol-sprite-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"ids": [
"home",
"search",
"user"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-symbol-sprite-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"ids":["home","search","user"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"ids":["home","search","user"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-symbol-sprite-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"ids": [
"home",
"search",
"user"
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_symbol_sprite_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
空の一覧は invalid_input で失敗し、パイプラインが中身のないスプライトを公開しないようにします。
SVG シンボルスプライトとは何か、なぜ id 一覧が重要か
本エンドポイントはゼロ個のシンボルを返す代わりに空の id 配列を拒否し、不用心な緑ビルドと壊れた UI の出荷を防ぎます。任意の view_box の既定は Material 系でよく使う 0 0 24 24 ですが、四つの数値の任意の viewBox を渡せば 16 ピクセルや独自アートボードもスプライト全体で揃います。
入力契約、応答の形、検証ルール
各項目は trim され、空白のみは拒否されます。各 id は実用的な SVG/XML 名トークンに一致する必要があります。先頭は英字またはアンダースコア、続きは英字・数字・アンダースコア・ピリオド・コロン・ハイフンです。この規則は属性やフラグメント参照を壊す空白や文字を弾きます。属性値は amp・引用符・山括弧用にエスケープされ、合法だが特殊なトークンもマークアップ内で安全です。検証失敗は課金されません。ids を含む JSON 本体を POST してください。必須で空でない文字列配列です（別名 icon_ids と icons も受け付けます）。任意の id_prefix 適用後に最終シンボル id が重複すると、明確な invalid_input で失敗し、ブラウザ上で上書きする代わりにカタログ側を直せるようにします。view_box は任意で既定は 0 0 24 24、指定時は正の幅と高さをもつ空白区切りの四つの数値である必要があります。id_prefix も任意で既定は空、設定時は連結後のシンボル id が合法になるよう、それ自体が有効な名トークンでなければなりません。成功時の本体には count、正規化済み view_box と id_prefix、入力順の symbol_ids、id ごとに空の symbol を含む複数行の隠し svg である sprite_markup、貼り付け用の id と snippet を持つ use_snippets、デモ用に改行で結合した use_list_markup が含まれます。成功した呼び出しは公開済みの基本価格 $0.002 で前払い KIT 残高を使い、モデルトークンも外向きネットワークもない純粋な parse 処理だからです。
スプライトと use 生成が価値を生む場面
デザインシステムチームはアイコントークンファイルが変わるたびにスプライトシェルを生成し、既存 symbol 内に path 子だけを足す PR を開きます。マーケサイトや CMS テーマは著者に完全な SVG 構文を教えず、リッチテキストやショートコードに use スニペットを貼れます。アイコンがコントロールの唯一の可視名である場合は、著者が引き続き aria-label や title を付けます。id 一覧を版管理し、空の公開を拒否すれば、シェル用マークアップのためだけに本格的なアイコン CDN を立てずに、SVG シンボルスプライトの単一の真実源を得られます。コンポーネントライブラリは同じ API 応答のシンボル id を列挙する Storybook コントロールを届け、文書がスプライトにない id をでっち上げないようにします。アクセシビリティレビューでは定義ブロックが aria-hidden であること、装飾的 use が本エンドポイントの既定どおり aria-hidden と focusable false を持つことを確認します。マルチブランド製品は id_prefix でブランド接頭辞を写像し、一つのパイプラインが brand-a-home と brand-b-home をハンドラ分岐なしで出します。エッジワーカーや静的ジェネレータは、プレビュー用の無料ブラウザ経路とデザインダンプ後の一括再構築用 API 経路で同じモジュール形を呼べます。
連携の活用例
デザイントークンとアイコンカタログのエクスポート
CI でカタログが変わるたびに、アイコン名の JSON 一覧を隠し SVG スプライトシェルと対応する use スニペットに変換します。
技術的な質問
SVG シンボルスプライト生成器は何を返しますか？
各 id 用の空の <symbol> 要素からなる隠し SVG スプライトと、<use href="#id"> 参照を含む use_snippets および use_list_markup です。パス形状は資産パイプラインでシンボル内に追加します。
接頭辞で id に名前空間を付けられますか？
はい。id_prefix（例: icon-）を設定すると home は icon-home になります。接頭辞後の重複は拒否されます。
各シンボルの viewBox はどう設定しますか？
view_box に 0 0 24 24（既定）や 0 0 16 16 のような四つの数値を渡します。幅と高さは正でなければなりません。
SVG シンボルスプライト生成の料金は？
ブラウザツールは無料です。API 要求は成功した呼び出しごとに前払い KIT 残高を $0.002 で使い、無効な入力は課金されません。