WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： デザイン >デザイン参考

今回はSVGで背景パターンを生成してくれるオンラインツール「SVG Backgrounds」をご紹介します。

使い方

まずはサイトにアクセスしてみましょう。
https://www.svgbackgrounds.com/

アクセスしてみると、円形のオブジェクトが表示されます。試しにクリックしてみると…

背景が選択したデザインに反映されました！

左側にあるパネルの項目で微調整も可能なので、こちらを使って好きなデザインに変更することも出来ます。

修正が終わったら「CSS Output」からコードをコピーするか、「DOWNLOAD SVG」から直接ダウンロードをして自分のサイトの反映させたいCSSに記述します。

注意点

こちらのSVGを使用する際には、ライセンスをリンク表示もしくはCSS内にコメントアウトで表示する必要があるので、下記URLをご確認ください。ライセンスは「CC BY 4.0」になります。

ライセンス情報
https://www.svgbackgrounds.com/license/

まとめ

背景に色味や模様があることによってサイト全体の見栄えが様変わりします。デザインでお困りの方はぜひ活用してみてはいかがでしょうか。