SVG背景画像ジェネレーターSVGBackgrounds.com

SVG背景画像ジェネレーターSVGBackgrounds.com

最近興味をもったSVGジェネレーターについて調べてみたことをご紹介します。

SVGBackgrounds.comとは

▼ジェネレーター
SVGBackgrounds.com

SVGBackgrounds.comとはアメリカのマサチューセッツ州にあるWebデザイン会社を経営するマットさんが作られたジェネレーターツールです。

  1. ライセンスと使用…SVGBackgrounds.comからバックグラウンドを再配布したり再販したりしない限り、個人または商用プロジェクトで使用可。
  2. 著作権表記について…SVGBackgrounds.comによって生成された背景を使用している場合は、SVGBackgrounds.comを表示してください。とのこと。 作者の理想としてはWebページ内にリンクを記載してほしいけど、最小限の表記として背景画像コードの近くでコメントアウトされたCSSコードにクレジットを置くこともよいとの事です。

▼CSSコード内へクレジット表記の仕方

SVGBackgroundsの使い方

  1. 右の模様パレットから選択
  2. 「COLOR」で色指定
  3. 「SCALE」で模様のサイズ調整
  4. 「OPACITY」で不透明度調整
  5. 「ANGEL」で角度調整
  6. 「HIDE UI」で生成したパターンのプレビュー
  7. 「CSS Output」CSSが生成されます
SVGBackgroundsジェネレーター

▼作ってみました

See the Pen JvPPBV by miwa-h-tbrave (@miwa-h-tbrave) on CodePen.

近年見かけるプリズム模様やカラーもグラデーション可能ですので、これはとても使えそうですね。以上、テクノブレイブ名古屋オフィス開発1Gでした。

料金表ナビゲーション 料金表ナビゲーション

おすすめ記事