Softonic

SVGストライプパターンジェネレーター

ステップ 1 / 4
次へ

フラットなストライプパターンは、ストック写真に頼らずにヒーローセクション、区切り、空のカードを埋める、最も頼れる方法の1つです。このジェネレーターは、2色、設定可能なストライプ幅、回転角度を持つすっきりした<pattern>ベースのSVGを出力するので、同じファイルが320pxのモバイルヒーローから4Kのデスクトップバナーまでくっきりと拡大します。

SVGストライプパターンを生成する方法

  1. 1

    キャンバスサイズを設定

    必要な幅と高さを入力します。SVGはviewBoxを使うので、ページ上でも拡大縮小します。

  2. 2

    ストライプ幅を選ぶ

    小さい値は細いピンストライプ、大きい値は日よけ風の帯になります。

  3. 3

    角度を選ぶ

    水平は0、垂直は90、定番の斜めは45を使います。

  4. 4

    2色を選ぶ

    前景と背景のhex値を設定します。透明なストライプでも構いません。

  5. 5

    SVGをコピー

    インラインで貼る、.svgとして保存する、またはSVGからCSSへの変換ツールでCSS背景に入れます。

パターンの作られ方

SVGはストライプ2本分のサイズの小さな<pattern>を定義し、viewBox全体を覆う<rect>をfill="url(#stripes)"で塗ります。パターンは自動的に繰り返すので、キャンバスサイズを変えてもストライプの太さは変わりません。変わるのは、何本のストライプが収まるかだけです。

patternTransform="rotate(angle)"が、幾何を計算し直さずに斜めを作ってくれます。パターンはどの角度でも継ぎ目なくタイル化されます。

ストライプ幅の早見表

Stripe width Look Common use
2 - 6 px Fine pinstripe Form backgrounds, subtle texture
10 - 20 px Balanced diagonal Hero sections, cards, dividers
30 - 60 px Bold awning Landing-page banners, empty-state art
80 px+ Poster-scale blocks Headers that need to read from far away

ヒント

  • パターンがテキストの背後にあるときは、コントラストを低く保ちます（例：#ffffffの上に#f5f5f5）。
  • 15、30、45度の角度は、きっちり0や90よりも「デザインされた」感じになります。
  • ストライプをアニメーションさせるには、<rect>を<g>で包み、ループで平行移動させます。パターンはタイル化するので、無限スクロールがただで手に入ります。
  • 出力は外部参照のない純粋なSVGなので、<script>タグを取り除くHTMLやメールテンプレートにインラインで入れても安全です。

よくある質問

はい。出力を.svgファイルとして保存し、background-image: url(...)とbackground-repeat: repeatで参照するか、SVGからCSSへの変換ツールに入れてインラインのデータURLにします。

斜めはブラウザでアンチエイリアスされます。にじみが見えるなら、ストライプ幅を1〜2ピクセル増やすか、大きめのPNGにラスタライズして縮小してください。

カラーピッカーは不透明な色を出力するため、ストライプを透明にするには出力SVGを編集します。いずれかの fill を none、または #00000000 のようなアルファ付き8桁hexに設定してください。そうすると、SVGの背後にあるものが透けて見えます。

出力はあなたのものです。あなたの入力に基づいて生成されたマークアップにすぎず、商標のある形やサードパーティの素材はありません。

2つの色と幅・高さは、SVGプレビューを描画するためだけに当社のサーバーへ送信されます。保存も記録もされず、ファイルがアップロードされることもありません。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます