svgファイルやpngファイル画像色変更

目的

svgファイルやpngファイルの画像は色を変更できます。
ここで紹介するのは、複雑な配色の方法ではなく、単色限定です。
画像ファイルのデフォルト色に関係なく変更可能です。

方法

htmlとcssだけで制御可能です。
ただし、ツールとして色指定のためのfilterプロパティへの変換サービスを使用します。
方法は以下の二つの方式があります。

• 背景画像方式
• <img>方式

svgの内容をインライン記述するなど他の方式もありますが、単純な記述で済む方法を採用します。

背景画像方式

▼ html

▼ css

【解説】

• 2行目　webkit用のimageプロパティ
• 2～6行目　標準のimageプロパティ
• 7～8行目　背景画像が出現できるように矩形領域を確保
• 9/12行目　背景画像の色　（未指定の場合は透過になるようです）

<img>方式

▼ html

▼ css

【解説】

• 2行目　画像のサイズ指定
• 5行目　filterプロパティ
  こちらから取得 https://angel-rs.github.io/css-color-filter-generator/
  上記サイトへ行く→「Desired Hex Color」→「#F00」→「Get Filter」クリック→filterの右端「Copy」
  親要素に指定しても効くようです

pngファイル

svgファイルをpngファイルに差し替えるだけで可能です。

まとめ

「背景画像方式」は記述が面倒ですが、色の指定が簡単で依存性がありません。
「<img>方式」は記述が簡単ですが、filterプロパティ取得用ツールに依存します。
どちらを採用するかは、その時々の都合によって判断することになるでしょう。

svgに関してはこのサイズでも劣化が見られません。サイズと色（単色）変更に関しては一つのsvgファイルで済むことになりますので、非常に利便性が高くなります。