SVGデータの色変えとかインライン記述とか

2019年9月13日

この間、業務でsvgをインラインで記述した時にいろいろ大変だったのでまとめ。

ABテストを実行して効果のあったアイコンのみを本採用するため、いくつかのsvgアイコンをサーバにアップせずにインラインで記述することにした。

  • Illustratorなどで作ったsvgデータをテキストエディタで開く

  • こんな風になっている中身から不要な記述を削除して、cssでスタイルを操作できるようにclassを付与

  • 整形できたら、html上の表示したいところに直接記述する。

  • cssでスタイル調整

  • これでOKかと思いきや、IE11で表示崩れが! 指定した位置よりもアイコンがずれる!!
    調べたところ、IEでは height:auto; が効かないとのこと。
    heightにpxを指定して解決。

  • また、svgの色指定は currentColor にすると親要素のcolorを引き継いでくれるらしい。
    リンクのhover動作などのアイコンの色変えが簡単に出来るのは嬉しい。

ちなみにsvgはimgタグやobjectタグで記述することもできるけれど、cssで色を変えられるのはインライン記述をした場合のみとのこと。
今回の案件では、ABテスト後に効果のあったアイコンをwebフォントにするための一時利用としてインライン記述を行いましたが、html記述が増えることを許容できれば、class名を変えるだけでカラバリを量産できるので便利っちゃ便利。