SVGアイコンの色を変える方法。(エディタでシンプルに。)ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

SVGアイコンの色を変える

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

SVG?

petsSVGアイコン。

多くのフリー素材サイトにある、便利で手軽なアイコンやピクトグラム。
IllustratorやPhotoshop等で自作しなくても、簡単にアイコンが使える時代になった。

なかでもSVG形式のアイコンは、Webサイトで使用するアイコン画像として非常に優れている。
ベクター形式なので、ディスプレイの解像度や大きさによる劣化がなく、かつ軽い。

SVGアイコンの色を変える方法。(エディタでシンプルに。)


SVGアイコンの色の変更方法。

そのようなSVGアイコンだが、色を変えたい場合がある。

画像編集ソフトではもちろん可能だが、SVGは、VSCodeなどのテキストエディタでも開くことができる。

  1. エディタで開いた場合は、形状を形成するソースコードが現れる。
  2. 普通は全体がsvgタグで囲まれ、その中に入れ子でpathタグが入っている。
  3. 色の変更は、このpathタグの中のfill属性で簡単にできる。(※ちなみにPhotoshopやIllustratorの「塗り」は、英語では「fill」。)

SVGアイコンの色を変える方法。


svgタグのfillの値で色を指定する。

petsSVGはエディタで開ける。

例えば、ダウンロードしたSVGアイコンをエディタで開いて、その中のコードが黒(「fill=”#000″」)だった場合、「fill=”#fff”」と変えてあげればそのアイコンは白に変わる。

エディタで開いたsvgファイル

fillの値で色を変える。

白いアイコンを黒にしたい場合は上記の逆の手順で行うことができ、また、細かな色指定も、同様に16進数値のカラーコードですぐに変えられる。

  • 白くしたい場合は、「fill=”#fff”」
  • 黒くしたい場合は、「fill=”#000”」
  • ターコイズブルーにしたい場合は、「fill=”#00b7ce”」
rgbでもrgbaでも。

rgbでの10進数値でも、さらにrgbaでアルファチャンネルを使った透明度の指定も可能だ。

  • 白くしたい場合は、「fill=”rgba(255, 255, 255)”」
  • 黒くしたい場合は、「fill=”rgba(0, 0, 0)”」
  • 半透明の白にしたい場合は、「fill=”rgba(255, 255, 255, 0.5)”」
  • 半透明の黒にしたい場合は、「fill=”rgba(0, 0, 0, 0.5)”」

などと、HTMLファイルやCSSファイルのコードを増やさずに、SVGファイルだけでシンプルに、色の指定ができる。

SVGアイコンの色を変える方法。


CSSで色を変えることもできる。が、コードによってはできない場合も。

ラスターとベクター。

画像はラスター(別名ビットマップ)形式かベクター形式かの2通りに分かれる。

JPGやPNG、WebPなどはラスター形式であり、ピクセルの集合でできている。なので拡大するとそのピクセルの点々が見える。

ラスター

例えば写真は、デジタルではめっちゃ細かいピクセル、印刷であればドットでできている。ラスター形式はエディタで開いて色を変えることはできない。

ベクター

SVGはベクター形式であり、コードによる計算式によって画像が作られている。その中に色を指定するための箇所があるので、エディタやCSSで色を変えることができる。


色を変えられる場合のコード例。

SVGのコードをそのままHTMLファイルへ貼り付けても、SVG画像として表示させることが可能だ。

その場合は、CSSのfillプロパティで色を変更することもできる。CSSでpathタグのfill属性の指定を上書きすれば良い。

HTML

例)

SVGによるTwitterのロゴ。

<svg width="35" height="28" viewBox="0 0 35 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.931 6.97053C30.952 7.27431 30.952 7.57809 30.952 7.88467C30.952 17.2263 23.8405 28 10.8367 28V27.9944C6.99536 28 3.2338 26.8997 0 24.825C0.558565 24.8922 1.11993 24.9258 1.68269 24.9272C4.86609 24.93 7.9585 23.8619 10.4629 21.895C7.43773 21.8376 4.7849 19.8651 3.85816 16.9855C4.91789 17.1899 6.00982 17.1479 7.04996 16.8637C3.75176 16.1973 1.37891 13.2995 1.37891 9.93414C1.37891 9.90334 1.37891 9.87394 1.37891 9.84455C2.36165 10.3919 3.46198 10.6957 4.58751 10.7293C1.48111 8.65322 0.523567 4.52068 2.39945 1.28969C5.98882 5.70641 11.2847 8.39144 16.9697 8.67562C16.4 6.22017 17.1783 3.64714 19.015 1.92105C21.8624 -0.755585 26.3407 -0.618394 29.0174 2.22763C30.6007 1.91545 32.1182 1.33448 33.5069 0.511335C32.9791 2.14783 31.8746 3.53794 30.3991 4.42129C31.8004 4.2561 33.1695 3.88092 34.4588 3.30836C33.5097 4.73067 32.3142 5.96959 30.931 6.97053Z" fill="black"/>
</svg>
CSS

例)

黒をCSSでブルーに変える。

path#twitter {
 fill: #1D9BF0;
}

hoverでも変更可能。

path:hover {
 fill: #1D9BF0;
}

マウスカーソルを表示させたい場合は「cursor: pointer」を追記する。

path#pointer:hover {
 fill: #1D9BF0;
 cursor: pointer;
}

色を変えられない場合もある。

上記の例ではpathタグやfill属性を利用しているが、もちろんpathやfillが使われていないSVG画像には適用されない。

ただの四角形や円形など単純な図形の場合は、pathを使わないこともあると思われるので、そういう場合は別の方法で、(適用するタグを変えるなど)すると良いかもしれない。

またSVGの書き出し方によってはベクターではなくラスタライズされた画像となってしまうので、この場合もエディタやCSSで色を変えることはできない。

SVGアイコンの色を変える方法。(エディタでシンプルに。)

以上、参考になれば幸いです。


幸運を。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。