SVGアイコンは、拡大縮小しても見た目が劣化しにくいところがメリット。
ボタンとかリンクによくあるプラスマークや矢印マーク、検索フォームの虫眼鏡マークなどはSVGアイコンで適用することが多くなっていると思います。
そのSVGアイコンをファイルではなくCSSで適用する方法をこのサイトでも備忘録として残してましたが、意外と忘れがちなのは、SVGアイコンの色を変更する方法。
今回はその記録を残します。
方法としては、SVGアイコンを生成しているソース内にあるPATHタグの中にfillを入れてカラーを指定することです。何もしなければ黒色がデフォルトで付くようですが、SVGのフリーサイトでダウンロードしたものに色付けする場合は手作業で変更する必要があります。
例えば、白に変更したい場合、PATHの中にfill=”#FFFFFF” と付け加えればOKとなります。
// 例
<svg ~~~~>
<path fill="#ffffff" d="＊＊＊＊＊＊" />
</svg>出来上がったソースをBASE64に変換して使用すればOKとなります。返還する場合は、変換してくれるサイトを利用すると便利です。返還ツールを提供してくれているサイトは以下のサイトがCSSの入力方法もアドバイスしてくれて大変助かっています。