SVG画像を簡単に生成・カスタマイズできる無料ツール!Webサイトやスマホアプリの背景にぴったり -BGJar
Post on:2020年10月7日
Webサイトやスマホアプリの背景にぴったりなSVG画像を簡単に生成できる無料オンラインツールを紹介します。
ドットで構成された地図、流線型のブロッブ、回路基板、ウェーブ、シャイニーオーバーレイなど、カスタマイズにも対応したツールです。
![SVGの背景画像を簡単に生成・カスタマイズできる無料ツール](http://coliss.com/wp-content/uploads-202004/2020100401@2x.png)
BGJarの特徴
BGJarは、SVGの背景画像を簡単に生成できるツールです。サイズやカラーの変更をはじめ、各エフェクトのカスタマイズにも対応しています。
ライセンスはCC BY 4.0で、商用でも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020100402-01.png)
BGJarで作成できるSVGの背景画像は、下記の通りです。
サンプルはブルーですが、カラーは簡単に変更できます。
![BGJarで作成できるSVGの背景画像](http://coliss.com/wp-content/uploads-202004/2020100403-01.png)
BGJarで作成できるSVGの背景画像
![BGJarで作成できるSVGの背景画像](http://coliss.com/wp-content/uploads-202004/2020100403-02.png)
BGJarで作成できるSVGの背景画像
![BGJarで作成できるSVGの背景画像](http://coliss.com/wp-content/uploads-202004/2020100403-03.png)
BGJarで作成できるSVGの背景画像
BGJarの使い方
BGJarの使い方は簡単、登録など面倒なことは一切不要です。
まずは、サイトにアクセスします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202004/2020100402-02.png)
画像を選択して「Customize」をクリックすると、カスタマイズ画面になります。
![世界地図を選択](http://coliss.com/wp-content/uploads-202004/2020100402-03.png)
World Map 世界地図を選択
カスタマイズのツールは左サイドバーにあります。まずは、ハイライトされている場所を変更してみます。
![場所を変更](http://coliss.com/wp-content/uploads-202004/2020100402-04.png)
「Active Area」で場所を変更
「Japan」にすると、日本全域はもちろん、各都市も選択できます。
![場所の選択](http://coliss.com/wp-content/uploads-202004/2020100402-05.png)
ハイライトされている場所の選択
日本全域を選択してみました。
![日本全域を追加](http://coliss.com/wp-content/uploads-202004/2020100402-06.png)
日本全域を追加
カラーやサイズも簡単に変更できます。
世界地図の場合は、背景とドットのカラーを変更できます。
![カラーの変更](http://coliss.com/wp-content/uploads-202004/2020100402-07.png)
カラーの変更
カラーはグラデーションにも対応しています。
![背景をグラデーションに変更](http://coliss.com/wp-content/uploads-202004/2020100402-08.png)
背景をグラデーションに変更
カスタマイズが終了したら、下部の「Download」からSVGをダウンロードできます。また、「Get Code」からは、SVGのコード・Data URI・CSSのBackground Imageとして利用できます。
sponsors