【CSS】超簡単なSVGアイコンのサイズや色変更の使い方を徹底解説

CSS

近年、Web開発の現場などで、非常に多く利用されるようになりましたSVGアイコンについて、初めて利用される方でも簡単に操作できる方法についてご紹介していきます。

SVGアイコンとは

SVGアイコンとは拡大縮小しても画質が劣化しない画像のようなものです。

CSSなどを利用すればサイズや色変更を行うことができるだけではなく、アニメーションさせることも可能です。

近年のWebサイトなどではレスポンシブ対応が非常に重要になっており、サイズが固定されるの通常の画像ではPCやスマートフォンなどで拡大縮小が行われると画質の劣化を感じてしまう場合があります。

また、各サイズに合わせて画像を用意してしまうとサイト自体の容量が増えてしまい動作の重いサイトになるため、拡大縮小しても劣化のしないSVGを利用したアイコンが主流となりつつあります。

SVGアイコンの構成と操作するための必須要素

CSSでSVGアイコンを操作するには、まずはどのような構成で作成され、アイコンを表示しているかを理解しなくてはなりません。

もちろん、すべてを理解する必要はありませんので、以下のインフォメーションSVGアイコンを例にサイズや色変更を行うために必要な構成をご紹介していきます。

SVGアイコンの構成

以下は前述のインフォメーションSVGアイコンを構成するHTMLタグとなります。

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0,0,256,256"
  width="128px"
  height="128px"
  fill-rule="nonzero"
>
  <g
    fill="none"
    fill-rule="nonzero"
    stroke="none"
    stroke-width="1"
    stroke-linecap="butt"
    stroke-linejoin="miter"
    stroke-miterlimit="10"
    stroke-dasharray=""
    stroke-dashoffset="0"
    font-family="none"
    font-weight="none"
    font-size="none"
    text-anchor="none"
    style="mix-blend-mode: normal"
  >
    <g transform="scale(6.4,6.4)">
      <path
        d="M20,38.5c-10.201,0 -18.5,-8.299 -18.5,-18.5c0,-10.201 8.299,-18.5 18.5,-18.5c10.201,0 18.5,8.299 18.5,18.5c0,10.201 -8.299,18.5 -18.5,18.5z"
        fill-opacity="0.43137"
        fill="#94d82d"
      ></path>
      <path
        d="M20,2c9.925,0 18,8.075 18,18c0,9.925 -8.075,18 -18,18c-9.925,0 -18,-8.075 -18,-18c0,-9.925 8.075,-18 18,-18M20,1c-10.493,0 -19,8.507 -19,19c0,10.493 8.507,19 19,19c10.493,0 19,-8.507 19,-19c0,-10.493 -8.507,-19 -19,-19z"
        fill-opacity="0.74902"
        fill="#4eb552"
      ></path>
      <path
        d="M20,10c-1.10457,0 -2,0.89543 -2,2c0,1.10457 0.89543,2 2,2c1.10457,0 2,-0.89543 2,-2c0,-1.10457 -0.89543,-2 -2,-2z"
        fill="#ffffff"
      ></path>
      <g fill="#ffffff">
      <path d="M22,28v-12h-5v1h1v11h-1v1h6v-1z"></path></g>
    </g>
  </g>
</svg>

こちらを見て拒絶反応を起こしている方もいるかもしれません。たった1つのアイコンを生成するのにこれだけのコード量があれば、慣れていない方なら当然の反応だと思います。

でも安心してください。

本記事でご紹介するサイズや色変更を行う上で重要なポイントはたったの3点です。

SVGアイコンの操作に必須の3要素

SVGアイコンの操作に必須のポイントは以下の通り

  • 色を指定している属性
  • サイズを指定している属性
  • 上記2点を設定しているタグ

これらを理解することでCSSを利用して自由にSVGアイコンを操作することができるようになります。

それではさっそく先ほどのSVGアイコンのHTML構成をもとにどの部分に着目すればよいかをわかりやすくハイライトを適応してみていきましょう。

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0,0,256,256"
  width="128px"
  height="128px"
  fill-rule="nonzero"
>
  <g
    fill="none"
    fill-rule="nonzero"
    stroke="none"
    stroke-width="1"
    stroke-linecap="butt"
    stroke-linejoin="miter"
    stroke-miterlimit="10"
    stroke-dasharray=""
    stroke-dashoffset="0"
    font-family="none"
    font-weight="none"
    font-size="none"
    text-anchor="none"
    style="mix-blend-mode: normal"
  >
    <g transform="scale(6.4,6.4)">
      <path
        d="M20,38.5c-10.201,0 -18.5,-8.299 -18.5,-18.5c0,-10.201 8.299,-18.5 18.5,-18.5c10.201,0 18.5,8.299 18.5,18.5c0,10.201 -8.299,18.5 -18.5,18.5z"
        fill-opacity="0.43137"
        fill="#94d82d"
      ></path>
      <path
        d="M20,2c9.925,0 18,8.075 18,18c0,9.925 -8.075,18 -18,18c-9.925,0 -18,-8.075 -18,-18c0,-9.925 8.075,-18 18,-18M20,1c-10.493,0 -19,8.507 -19,19c0,10.493 8.507,19 19,19c10.493,0 19,-8.507 19,-19c0,-10.493 -8.507,-19 -19,-19z"
        fill-opacity="0.74902"
        fill="#4eb552"
      ></path>
      <path
        d="M20,10c-1.10457,0 -2,0.89543 -2,2c0,1.10457 0.89543,2 2,2c1.10457,0 2,-0.89543 2,-2c0,-1.10457 -0.89543,-2 -2,-2z"
        fill="#ffffff"
      ></path>
      <g fill="#ffffff">
      <path d="M22,28v-12h-5v1h1v11h-1v1h6v-1z"></path></g>
    </g>
  </g>
</svg>

確認すべき場所が背景が明るくなっているたったの8行程度となり、だいぶ絞られていることがわかりますね。

それでは該当箇所をそれぞれ解説していきます。

  width="128px"
  height="128px"

5,6行目
こちらはアイコンの表示サイズを指定しています。比較的通常の画像と同じような表記となっており、要素をWidthとHightで任意の値を設定することでアイコンサイズを自由に変更することができます。

そのほかの行すべて
残りの行ではアイコンのカラーを指定しています。SVGアイコンでは色をfillもしくはstrokeで設定する必要があり、CSSでは各要素に対して色を割り当てる必要があります。

CSSで色やサイズを変更する例としては以下のようになります

svg{
    height: 64px;
    width: 64px;
}
svg g{
    fill: #0000FF;
    stroke: #0000FF;
}
svg path{
    fill: #0000FF;
}

今回のSVGアイコンはSVGタグで囲われているWidthとHightでサイズを指定されています。
そのため、CSSでサイズ変更を行う際に指定するセレクタはSVGとなります。

また、色が指定されている要素はgタグとpathタグです。SVGアイコンでは一見するとSVGタグで色を指定されていると考えてしまうかもしれませんがそうではありません。

あくまで色を指定しているgタグとpathタグに対してCSSを適応させる必要があります。

上記のCSSを適応させたSVGアイコンを変更前とどのように変化したのか比較してみましょう。

左側が変更前、右側が変更後となります。

元のサイズ128pxから半分の64pxサイズに変更されており、アイコンのカラーも青ベースの色となっていますね。

このように通常のCSSでの色指定とは異なりますが、重要なポイントを理解することで簡単に好みの色に設定することができます。

タイトルとURLをコピーしました