みなさんこんにちは!おさかなです!
今回は「SVG backgrounds」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・SVG形式の画像を使いたい方
・高画質な「背景画像」を使いたい方
・WebデザインやCSSを勉強している方
高画質な「背景画像」がほしい~!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
フルスクリーンでも綺麗に表示される「背景画像」ってないかな…?
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
あるよ。
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おおっ!?
![](https://osakanav.com/wp-content/uploads/2021/04/portfoliobox-top-160x90.jpg)
「SVG backgrounds」って何?
「SVG backgrounds」とは、SVG形式の画像を無料でダウンロードできるサイトのことです。
すべてのブラウザでサポートされており、CSSで使える16進数のカラーコードを表示してくれたり、色や透明度などカスタマイズができたりします!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/2661159c59de9edc988c40e20cbe82cd.png)
![](https://osakanav.com/wp-content/uploads/2021/02/canva-160x90.jpg)
実際につかってみよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-1024x554.png)
「TRY ME」と矢印のある、◯をクリックすると…?
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedsvg-bg_LI-1024x554.jpg)
こんな感じで、サイトの背景画像が「黄色」のものに変わってしまいました!(魔法みたい~🌟)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-yellow-1024x554.png)
カスタマイズしてみよう!
左側にカラーの詳細が表示されます!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedsvg-bg-yellow_LI-1024x554.jpg)
一番上が「色の名前」By~は「製作者」が表示されていますね。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-yellow2-1024x554.jpg)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
この色は”Liquid Cheese”って名前だったんだ!
「Customize」というブロックから、お好みのカラーにカスタマイズすることができます!
「COLOR」… 色
「BLEND」… ブレンド
「OPACITY」… 透明度
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg.gif)
「HIDE UI」を押すと、画像の全体を見ることができます!(ほうほう…。)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-hide-1024x554.jpg)
こんな感じ…!(おおおお~っ✨)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-yellow-hide-1024x554.png)
画像の使用準備!
カスタマイズが完了したら画像の使用準備をしていきましょう!
使用方法は「CSSコード」を利用するか「SVG形式の画像」を保存するかの、2パターンあるので、ご自身の使いやすい方でOKです。
「CSSコード」を使用する場合
コードを使用する場合は「CSS Output」という項目の下にあるものをコピーすればOKです!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedsvg-bg-csscode_LI-1024x554.jpg)
「SVG形式の画像」を使用する場合
SVG形式の画像を保存する場合は「DOWNLOAD SVG」というボタンをクリックして、画像を保存しましょう!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedsvg-bg-download_LI-1024x554.jpg)
画像使用の「注意点」!
個人や商用で画像を使用する場合は、「無料のクレジット表記(FREE W/ATRIBUTION) 」または「有料ライセンスの取得(BUY LICENSE) 」を行う必要があります!
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-fre-1024x554.png)
クレジット表記をする場合は、ページ下にあるCSSコードを貼り付ければOKです!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedsvg-free_LI-1024x554.jpg)
BUY LICENSE
有料ライセンスを購入すれば、更に多くのデザインを利用することができます!(おお!)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-bg-premium-1024x554.png)
(あと、もうちょっと…🍊)
![](https://osakanav.com/wp-content/uploads/2021/04/doqat-top-160x90.jpg)
他にもたくさんのデザインが!
それでは最後に、いくつかのデザインを紹介して終わりにしたいと思います!
みなさんの作品が、更に良いものになりますように…🌟
(立体感があってすごい…!)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design0-1024x554.png)
(大人っぽいシマシマ!)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design2-1024x554.png)
(高級感あふれる赤と黒!かっこいい…✨)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design3-1024x554.png)
(なんか、PCの基盤みたいだな…?!笑)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design6-1024x554.png)
(まるまる!かわいい!)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design5-1024x554.png)
(アイスクリーム屋さんみたいな、ストライプ!)
![](https://osakanav.com/wp-content/uploads/2021/04/svg-design4-1024x554.png)
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
![](https://osakanav.com/wp-content/uploads/2021/02/nizima-top-160x90.jpg)
ここまで読んでくださり、ありがとうございました!