SVGパターンジェネレーター - シームレス背景パターン作成 オンライン
リアルタイムプレビューでカスタムSVG背景パターンを生成。スケール、回転、不透明度、間隔、ストロークを調整し、SVG、CSS、PNGでエクスポート。100%クライアント処理、サーバーへのデータ送信なし。
よくある質問
SVGパターンジェネレーターとは何ですか？
SVGパターンジェネレーターは、SVG（Scalable Vector Graphics）形式でシームレスに繰り返し可能な背景パターンを作成するツールです。SVG <pattern>要素を使用して定義され、小さなグラフィック単位が表面全体に無限にタイリングされます。SVGパターンは軽量で、どの解像度でもスケーリング可能で、コードで完全にカスタマイズできるため、Webデザインの背景、装飾テクスチャ、ビジュアルアクセントに広く使用されています。
このSVGパターンジェネレーターの使い方は？
1. パターンライブラリを閲覧し、パターンタイプを選択します（例：斜線、六角形、ドット）。2. 前景色（パターン要素）と背景色をカスタマイズします。3. スケールを調整してパターンの密度を制御します。4. 回転角度を設定します。5. 不透明度、間隔、ストローク幅を微調整します。6. 塗りつぶしとアウトラインスタイルを切り替えます。7. SVGコードまたはCSSコードをコピーするか、SVG/PNGファイルとしてダウンロードします。
SVG出力とCSS出力の違いは何ですか？
SVG出力は、<pattern>と<rect>要素を含む完全なSVGファイルを提供します。HTMLに直接埋め込んだり、デザインツール（Figma、Illustrator）で使用したり、画像ファイルとして参照するのに最適です。CSS出力は、インラインSVGデータURIとしてエンコードされたCSS background-imageコードを提供します。追加ファイルなしでスタイルシートに直接パターンを適用するのに最適です。両方の出力は同じ視覚的結果を生成します。
シームレスパターンはどのように機能しますか？
このジェネレーターのすべてのパターンは、デフォルトでシームレスになるように設計されています。SVG <pattern>要素は、パターン単位を表面全体に自動的に繰り返すことでタイリングを処理します。スケール、間隔、回転パラメーターでタイリングの外観を微調整できますが、シームレス性は数学的に常に維持されます。
SVGパターンが画像ベースの背景より優れている点は？
SVGパターンはラスター画像背景（PNG、JPEG）に比べて多くの利点があります：ピクセル化なしでどの解像度にも完全にスケーリング、極めて小さいファイルサイズ（通常1KB未満）、コードでの色・スケール・回転のカスタマイズ、透明度のネイティブサポート、すべての画面密度（Retina、4K）でのクリアなレンダリング、追加HTTPリクエストなしでCSSにインライン化が可能です。
生成されたパターンをWebプロジェクトで使用できますか？
はい、生成されたパターンはどのWebプロジェクトでも自由に使用できます。SVGコードをHTMLに直接埋め込んだり、CSS出力をスタイルシートで使用したり、ダウンロードしたSVGファイルを参照したりできます。パターンは幾何学的プリミティブから生成され、標準準拠でモダンブラウザすべてで動作します。
このSVGパターンジェネレーターは安全でプライバシーは保護されますか？
はい。このツールはクライアントサイドJavaScriptを使用して100%ブラウザ内で実行されます。デザインデータ、パターン、色設定がサーバーに送信されることは一切ありません。すべてのパターン生成、SVG/CSSコード作成、PNGエクスポートはデバイス上でローカルに処理されます。
コード例
// Create SVG background patterns programmatically
function createDiagonalLinesPattern(options = {}) {
const {
size = 10,
strokeWidth = 1,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
rotation = 45,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<line x1="0" y1="${size}" x2="${size}" y2="0"
stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"
transform="rotate(${rotation} ${size / 2} ${size / 2})" />
</svg>`;
}
function createDotsPattern(options = {}) {
const {
size = 20,
dotRadius = 2,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<circle cx="${size / 2}" cy="${size / 2}" r="${dotRadius}"
fill="${color}" opacity="${opacity}" />
</svg>`;
}
// Convert SVG pattern to CSS background
function svgToCssBackground(svgString) {
const encoded = encodeURIComponent(svgString)
.replace(/'/g, "%27")
.replace(/"/g, "%22");
return `url("data:image/svg+xml,${encoded}")`;
}
// Usage
const linesSvg = createDiagonalLinesPattern({ size: 12, strokeWidth: 1.5, color: "#3b82f6" });
const dotsSvg = createDotsPattern({ size: 16, dotRadius: 1.5, color: "#8b5cf6" });
const element = document.getElementById("my-element");
element.style.backgroundImage = svgToCssBackground(linesSvg);
element.style.backgroundRepeat = "repeat";
console.log("CSS:", svgToCssBackground(dotsSvg));