PNG画像として保存できますか？

このツールはSVGとCSS backgroundの生成に特化しています。ラスター画像が必要な場合は、生成したSVGを別途画像変換ツールで変換してください。

SVG optimizer と併用できますか？

はい。生成したraw SVGをSVG最適化ツールへ貼り付けられます。ただし、最適化後のSVGはこの画面のData URIやCSSとは別内容になるため、必要なら最適化後のSVGから改めてData URIを作成してください。

デザイン・Web制作

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

ドット、グリッド、斜線、チェッカーの繰り返し背景を、同じ設定から SVG / data URI / CSS background として生成。色・不透明度・8〜96pxのタイルサイズを調整可能。

登録不要

パターン設定

パターン

タイルサイズ: 24px点の半径: 2px模様の不透明度: 35%

模様の色背景色

プレビューと生成結果

CSS background

background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23db2777%22%20opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E");
background-size: 24px 24px;

Data URI

data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20fill%3D%22%23db2777%22%20opacity%3D%220.35%22%2F%3E%3C%2Fsvg%3E

Raw SVG

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="#ffffff"/><circle cx="12" cy="12" r="2" fill="#db2777" opacity="0.35"/></svg>

このツールについて問い合わせる →

SVG パターン背景ジェネレーターについて

SVG pattern ジェネレーターとは

SVG pattern ジェネレーターは、ドット、グリッド、斜線、チェッカーの繰り返し背景を、同じ設定からSVG、data URI、CSS backgroundとして作成するツールです。模様と背景の色、模様の不透明度、8〜96pxのタイルサイズを調整できます。ドットは半径、グリッドと斜線は線幅も変更できます。チェッカーはタイルを4等分する固定構造です。

SVG波形ジェネレーターがセクション区切り用の波形に向いているのに対し、このツールは背景パターンやUI面の質感作りに特化しています。

使いどころ

LPや管理画面の薄い背景パターンを作る
プレースホルダー画像やOGP素材の背景に使う
外部画像ファイルを増やさず、CSSの背景画像として埋め込む

よくある質問

Q. PNG画像として保存できますか？: このツールはSVGとCSS backgroundの生成に特化しています。ラスター画像が必要な場合は、生成したSVGを別途画像変換ツールで変換してください。
Q. SVG optimizer と併用できますか？: はい。生成したraw SVGをSVG最適化ツールへ貼り付けられます。ただし、最適化後のSVGはこの画面のData URIやCSSとは別内容になるため、必要なら最適化後のSVGから改めてData URIを作成してください。