SVGとPNGのアイコンを表示してみよう！

Google FontsのアイコンはPNGとSVGのダウンロードもできるので、今回はこちらを試してみたいと思います！

Google Fontsのアイコンにアクセス

https://　fonts.google.com/icons

▼今回はAccount Circleというアイコンを使ってみます。Fillにチェックを入れて、Weight700にしてみます。

▼使いたいアイコンをクリックすると、コードが出てきます。

今回は右下にある、SVGとPNGというのを使ってみたいと思います。

SVGとPNGをダウンロード

それぞれクリックしてダウンロードします。

▼名前を変更してimgフォルダに入れてみました。

SVGの方がサイズが若干軽いようです。

html

下記のように書いてみました。

---

 <p>▼png</p>

  <img src="img/account.png" alt="" />

  <hr />

  <p>▼svg</p>

  <img src="img/account.svg" alt="" />

---

⭐️hrとは区切り線のことです。

⭐️CSSで背景に色をつけて、imgのサイズを少し大きめに指定してみました。

▼ブラウザで確認。違いがわかりますでしょうか？

PNGはドット絵になっていて拡大されるとギザギザに見えます。

SVGはベクターデータなので拡大されても綺麗に見えます。

【参考サイト】

SVGとPNGの違いと使い分け

https://　kinsta.com/jp/blog/svg-vs-png/

CSSで色を変更！

下記サイトを参考にCSS で色をつけてみました！

【参考サイト】

【CSS】filterのみを使用して黒い画像を任意の色に変更する

https://　qiita.com/eltociear/items/39bcd78befdbd2c4b58c

▼PNG、SVG両方のimgにredというクラス名をつけてスタイルをあててみました

▼ブラウザで確認。両方赤になりました！

svgタグを使ってみよう！

invert○%とかではなくて、カラー名や16進数でもっと簡単に色指定できたらいいなと思い、

次にこちらのサイトを参考にSVGの色を変えてみたいと思います。

【参考サイト】

SVGのアイコンやロゴの色をCSSで変更する方法

https://　manamiw.com/svg-icon-color/

imgタグではなくて、svgタグのコードを入手したいので、

先ほどダウンロードしたSVGアイコンをテキストエディタで開くか、あるいは、ブラウザにドラッグして開きます。

▼Google Chromeにドラッグしてみます

▼右クリックして[検証]をクリックすると、下記のようにsvgのコードが見えます。

svgタグの上でまた右クリック、Edit as HTMLとかを選んでsvgタグごと丸っとコピーして、htmlファイルのbodyタグ内に貼り付けます。

svgタグへのCSS 

svgタグにクラス名svg01をつけてみました。

▼CSS は下記のようにしてみました。

---

body {

    background: beige;

   }

   .svg01 {

    width: 200px;

    height: auto;

   }

   .svg01 path {

    fill: pink;

   }

---

▼htmlファイルは下記のようになりました

▼ブラウザで確認

fillプロパティなら#f0f（＝#ff00ff）などの16進数カラーコードや、orange, pinkなどのカラー名も使えます。😊

下記のサイトではsvgにグラデーションカラーをつけて、アニメーションで動かす方法をご紹介していました！😍

興味ある方はチェックしてみてはいかがでしょうか？🌷

【参考サイト】

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

https://　kakechimaru.com/svg_grad_anim/

今回は以上になります。お疲れ様でした⭐️