BackgroundsツイートSVGはベクターデータで扱えるため、Webサイト上ではデザインパーツやアニメーション用のパーツとして使われることが多いかと思いますが、今回はそのSVGを使って背景を綺麗に見せるためのサービスを紹介したいと思います。Backgroundsは、予め用意された様々なデザインパターンのオブジェクトの中から好きなものを選択し、色などをカスタマイズしてそれをCSSコードでコピーして使ったり、SVGそのもののデータをダウンロードしてをWebサイトの背景として利用できるサービスです。オブジェクトによっては、色の他にデザインパターンの大きさ、透明度、ブレンドモードなどを自由にカスタマイズして利用することができます。データ自体は5KB程度と軽量なので、美麗なSVGの背景を利用できる機会があるなら検討するのもいいでしょう。基本的には40のデザインパターンが用意されていますが、それ以外で利用したい場合には月額5ドル/1ユーザーからの有料となっています。BackgroundsのSVGは、CSSのコードをコピーして使うこともでき記述は下記ように行います。</style>なお、インライン記述では動作しませんので気をつけましょう。実際にサイトにアクセスして使い方を軽く見てみましょう。https://www.svgbackgrounds.com/アクセスすると下記のようなオブジェクトが表示されますので、試しにクリックしてみてください。すると下記のようにクリックしたオブジェクトのデザインがページの背景に適用されます。左のコントロールバーには色(COLOR)やブレンド(BLEND)、透明度(OPACITY)などをカスタマイズするためのパーツがいくつか用意されていますので、色々と触ってカスタマイズしてみてください。SVG」から直接ダウンロードして使用します。上記以外にもで残パターンの大きさ(SCALE)や、色の適用角度(ANGLE)があります。関連記事JPGの圧縮率とPNGの透過を実現する超軽量なJPNG.svgを試してみた大画面スマホも怖くない!SVGスプライトの作り方ツイート記事作成者の紹介マーツ(その他)ビールが好き。最近はワインと日本酒もいいなぁと思える今日この頃。Artista関連するSONICMOOVのサービスデザイン・イラスト制作オリジナリティのあるデザインが欲しい、フリー素材では満足できないなど、ロゴデザインや各種グラフィック、キャラクターイラストまでお客様のニーズに合わせたデザイン・イラストをご提供いたします。×SNSでも情報配信中!ぜひご登録ください。Market花火大会シミュレーターSHARESHAREWeb制作・アプリ開発に関する、UI/UX情報、イラストテクニック、エンジニア向け情報をお届けしています。