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

目的

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

方法

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

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

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

背景画像方式

▼ html

▼ css

    .back-svg{
    	-webkit-mask:   url("/image/icon-svg.svg") no-repeat center center / contain;
    	mask-image:     url("/image/icon-svg.svg");
        mask-repeat:    no-repeat;
        mask-position:  center center;
        mask-size:      contain;
    	width:	        800px;
    	height:	        800px;
    	background-color:     black;
    }
    .backColor-red{
    	background-color: red;
    }

【解説】

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

<img>方式

▼ html

▼ css

    .image{
        width:      800px;
    }
    .filter-red{
        filter: brightness(0) saturate(100%) invert(29%) sepia(99%) saturate(5392%) hue-rotate(352deg) brightness(118%) contrast(142%);
    }

【解説】

• 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ファイルで済むことになりますので、非常に利便性が高くなります。