SVG パターン生成ツール

SVG パターン生成ツールとは？

SVG パターン生成ツールは、グラフィックエディタを開かずに軽量で繰り返し可能な背景が欲しいウェブデザイナーやフロントエンド開発者向けの無料ブラウザ内ツールです。ドロップダウンからパターン（ドット・グリッド・ストライプ・斜線・チェッカー）を選び、図形の前景色とタイルの背景色を設定し、スケールと太さの数値入力でタイルサイズと線の太さを調整します。出力は鮮明な SVG として描かれた 1 枚のタイルで、継ぎ目なく繰り返すよう設計されているため、ファイルは極小で、拡大してもぼやけません。フォーマット切り替えでコピー用の出力を生の SVG マークアップと CSS background-image ルールの間で切り替え、コピーするか .svg ファイルをダウンロードして、サイト・カード・ヒーロー領域・UI モックアップに使えます。

SVG パターン生成ツールの使い方

1. ドロップダウンからパターンを選びます：ドット・グリッド・ストライプ・斜線・チェッカー。
2. 図形の前景色とタイルの背景色を入力または選択します。
3. スケール（タイルのピクセルサイズ）と太さ（ドットの半径または線の太さ）の数値入力を設定します。
4. 設定を開き、フォーマット切り替えで出力を SVG と CSS の間で切り替えます。
5. プレビューがパターンをタイル表示するのを確認し、SVG または CSS をコピーするか、ダウンロードをクリックして .svg ファイルを保存します。

使用例

よくある質問

どんなパターンを生成できますか？

5 種類のタイル状パターンです：ドット・グリッド・ストライプ・斜線・チェッカー。それぞれ継ぎ目なく繰り返す小さな SVG タイル 1 枚として描かれるため、どのサイズでも鮮明でファイルは極小です。

スケールと太さは何を制御しますか？

スケールはタイル 1 枚のピクセルサイズで、繰り返す図形どうしの間隔を決めます。太さはタイル内のドットの半径または線の太さです。太さはスケールに対して自動的に上限が設けられるため、パターンがタイルを埋め尽くすことはありません。

SVG 出力と CSS 出力の違いは？

SVG は独立した .svg ファイルやインライン用途のための生のマークアップを提供します。CSS はデータ URI と background-repeat: repeat を使った background-image ルールを提供し、スタイルシートにそのまま貼り付けられます。設定内のフォーマット切り替えで両者を切り替えます。

HEX を入力せずに色を視覚的に選べますか？

はい。前景または背景フィールドの横の色チップをクリックするとブラウザ標準のカラーピッカーが開きます。または #4f86f7 のような HEX 値を直接入力できます。変更に合わせてプレビューと出力が更新されます。

色やファイルはどこかにアップロードされますか？

いいえ。パターンはブラウザ内で SVG 文字列として完結し、ダウンロードもローカルで Blob として作成されます。色やコード、ファイルがサーバーに送信されることは一切ないため、オフラインでも動作し、作業内容のプライバシーが保たれます。