SVGパターンジェネレーター - シームレスなベクターバックグラウンドを作成

SVGパターンジェネレーター

パターンタイプ、サイズ、間隔、回転、傾き、色、不透明度を組み合わせ、ブラウザだけで実務レベルのSVGテクスチャを構築します。

ストライプ

SVGサイズ:0.53 KB

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480" role="img">
      <defs>
        
        <pattern id="_R_2npfiv9flb_" patternUnits="userSpaceOnUse" width="28" height="28" patternTransform="rotate(45)">
          <rect width="28" height="28" fill="#c3d4ff" />
          <rect width="6" height="28" fill="#667eea" />
        </pattern>
      
      </defs>
      <rect width="100%" height="100%" fill="#f7f8fc" />
      <rect width="100%" height="100%" fill="url(#_R_2npfiv9flb_)" opacity="0.9" />
    </svg>

コントロール

類似画像ツール

すべて表示

画像トリミング

自由またはプリセット比率でトリミングし、回転・ズーム・複数フォーマット出力に対応。

Base64変換

画像とBase64の相互変換。完全ローカル処理でプライバシー配慮。

画像リサイズ

ピクセルまたはパーセンテージで画像サイズを調整。アスペクト比制御。

SVGパターンジェネレーターガイド

ツール紹介

ブラウザ上でストライプ、グリッド、波、ドット、三角形などのシームレスなベクターパターンを素早く作成できます。間隔や色、不透明度、角度を自在に調整し、すぐに使えるSVGコードとして書き出します。

使用方法

パターンタイプを選択し、キャンバスでライブプレビューします
レイアウトに合わせて幅・高さ・間隔・線/ドットサイズを調整します
ブランドカラーに合わせて色と不透明度を微調整します
（ストライプの場合）角度スライダーで傾きを変更します
SVGコードをコピーするか、ファイルをダウンロードしてすぐに利用します

使用のコツ

細かな背景には間隔を狭くし不透明度を下げると上品に仕上がり、ヒーローセクションではコントラストを上げた大きめのパターンが映えます。

よくある質問

注意事項

極端な間隔値や巨大なキャンバスはブラウザ描画コストが増えます
グラデーションなどの追加効果は書き出し後に手動で編集してください
テキストの背面で使用する際は十分なコントラストを確保してください
SVGは現在のキャンバス寸法を保持するため、ダウンロード前にサイズを調整してください

ツールナビゲーション