美麗!ページの背景に使えるSVG Backgrounds

美麗!ページの背景に使えるSVG Backgrounds

  • このエントリーをはてなブックマークに追加

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

関連記事 SVGとは?使う前に知っておきたいことまとめ

SVG Backgroundsとは

SVG Backgroundsは、予め用意された様々なデザインパターンのオブジェクトの中から好きなものを選択し、色などをカスタマイズしてそれをCSSコードでコピーして使ったり、SVGそのもののデータをダウンロードしてをWebサイトの背景として利用できるサービスです。

オブジェクトによっては、色の他にデザインパターンの大きさ、透明度、ブレンドモードなどを自由にカスタマイズして利用することができます。
SVG用背景サービスSVG Backgrounds

データ自体は5KB程度と軽量なので、美麗なSVGの背景を利用できる機会があるなら検討するのもいいでしょう。

なお、基本的には40のデザインパターンが用意されていますが、それ以外で利用したい場合には月額5ドル/1ユーザーからの有料となっています。

コードの記述方法

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

    <style>
        body{
            *** コードをここに貼り付け ***
        }
    </style>

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

使い方

実際にサイトにアクセスして使い方を軽く見てみましょう。

まずは、サイトにアクセス。
https://www.svgbackgrounds.com/

アクセスすると下記のようなオブジェクトが表示されますので、試しにクリックしてみてください。
SVG Backgroundsの使い方

そうすると下記のようにクリックしたオブジェクトのデザインがページの背景に適用されます。
SVGのカスタマイズ

左のコントロールバーには色(COLOR)やブレンド(BLEND)、透明度(OPACITY)などをカスタマイズするためのパーツがいくつか用意されていますので、色々と触ってカスタマイズしてみてください。終わったら「CSS Output」からコードをコピーするか、「DOWNLOAD SVG」から直接ダウンロードして使用します。
SVGのCSSコピー、ダウンロード

上記以外にもで残パターンの大きさ(SCALE)や、色の適用角度(ANGLE)があります。色々と試してみてください。
SVGの大きさなどのカスタマイズ

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation