SVG 背景パターン

よくある質問

この値はどう使いますか？

任意の要素の background に貼り付けるだけです。たとえば body { background: …; } やヒーローセクションにそのまま入れてください。値ひとつに背景色、data URI のパターンタイル、repeat がすべて含まれており、宣言一行で完結します。タイルは縦横ともに継ぎ目なく繰り返されます。

色はどう変えますか？

値には色がちょうど 2 つあります。先頭の背景 hex と、data URI 内のパターン hex（URL エンコードされており %23 が # 記号）です。両方をパレットに合わせて差し替えてください。より控えめな質感にしたい場合は、色ではなく URI 内の fill-opacity や stroke-opacity を下げます。

data URI の背景でもネットワークリクエストは発生しますか？

いいえ。SVG は CSS の中に一緒に載って届くため、追加リクエストもホスティングするファイルも、背景が遅れて表示されるちらつきもありません。ここのタイルは数百バイト程度で、data URI のサイズが問題になる水準ではありません。

パターンは拡大・縮小できますか？

はい。同じ要素に background-size を追加してください。たとえば 24px タイルに background-size: 48px 48px を指定すると 2 倍になります。コピーした値に書かれたタイルの縦横比を保てば、継ぎ目はずれません。