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

Memo

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

SVGアイコンの色を変える

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

SVG?

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

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


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

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

エディタで開いた場合は、形状を形成するソースコードが現れる。

普通は全体がsvgタグで囲まれ、その中に入れ子でpathタグが入っている。
色の変更は、このpathタグの中のfill属性で簡単にできる。

(※ちなみにPhotoshopやIllustratorの「塗り」は、英語では「fill」。)


fillの値で色を指定する。

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

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

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

rgbでの10進数値でも、さらにrgbaでアルファチャンネルを使った透明度の指定も可能だ。
HTMLファイルやCSSファイルのコードを増やさずに、SVGファイルだけでシンプルに、色の指定ができる。


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

ラスターとベクター。

画像はラスター(別名ビットマップ)形式かベクター形式かの2通りに分かれる。JPGやPNG、WebPなどはラスター形式であり、ピクセルの集合でできている。なので拡大するとそのピクセルの点々が見える。(写真はデジタルではめっちゃ細かいピクセル、印刷であればドットでできている。)

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

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

一例としてHTMLのコード量が増えるが、ベクターであるSVGのコードをそのままHTMLファイルへ貼り付けてもSVG画像として表示させることが可能だ。

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

例)

<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>
path {
 fill: #1D9BF0;
}

hoverでも変更可能。

path:hover {
 fill: #1D9BF0;
}

上記の例のSVGによるTwitterのロゴ。hoverで色が変わる。指のマウスカーソルを表示させたい場合は「cursor: pointer」を追記すれば表示される。

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

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

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

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

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


幸運を。

疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

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

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

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。