SONICMOOV LAB

SVGはベクターデータで扱えるため、Webサイト上ではデザインパーツやアニメーション用のパーツとして使われることが多いかと思いますが、今回はそのSVGを使って背景を綺麗に見せるためのサービスを紹介したいと思います。 関連記事 SVGとは?使う前に知っておきたいことまとめ

SVG Backgroundsとは

SVG Backgroundsは、予め用意された様々なデザインパターンのオブジェクトの中から好きなものを選択し、色などをカスタマイズしてそれをCSSコードでコピーして使ったり、SVGそのもののデータをダウンロードしてをWebサイトの背景として利用できるサービスです。 オブジェクトによっては、色の他にデザインパターンの大きさ、透明度、ブレンドモードなどを自由にカスタマイズして利用することができます。 SVG用背景サービスSVG Backgrounds データ自体は5KB程度と軽量なので、美麗なSVGの背景を利用できる機会があるなら検討するのもいいでしょう。 なお、基本的には40のデザインパターンが用意されていますが、それ以外で利用したい場合には月額5ドル/1ユーザーからの有料となっています。

コードの記述方法

上記でも述べたように、SVG BackgroundsのSVGは、CSSのコードをコピーして使うこともでき記述は下記ように行います。

なお、インライン記述では動作しませんので気をつけましょう。

使い方

実際にサイトにアクセスして使い方を軽く見てみましょう。 まずは、サイトにアクセス。 https://www.svgbackgrounds.com/ アクセスすると下記のようなオブジェクトが表示されますので、試しにクリックしてみてください。 SVG Backgroundsの使い方 そうすると下記のようにクリックしたオブジェクトのデザインがページの背景に適用されます。 SVGのカスタマイズ 左のコントロールバーには色(COLOR)やブレンド(BLEND)、透明度(OPACITY)などをカスタマイズするためのパーツがいくつか用意されていますので、色々と触ってカスタマイズしてみてください。終わったら「CSS Output」からコードをコピーするか、「DOWNLOAD SVG」から直接ダウンロードして使用します。 SVGのCSSコピー、ダウンロード 上記以外にもで残パターンの大きさ(SCALE)や、色の適用角度(ANGLE)があります。色々と試してみてください。 SVGの大きさなどのカスタマイズ 関連記事

あわせて読みたい記事