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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 143.9 173" style="enable-background:new 0 0 143.9 173;" xml:space="preserve">
<path d="M53,144.2h15.3V173H53V144.2z（省略）"/>
</svg>

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

<svg class="svgIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 143.88 173">
<path d="M53,144.2h15.3V173H53V144.2z（省略）"></path>
</svg>

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

<a href="#">
  <svg class="svgIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 143.88 173">
    <path d="M53,144.2h15.3V173H53V144.2z（省略）"></path>
  </svg>
  リンクテキスト
</a>

• cssでスタイル調整

.svgIcon {
  fill: #000; /*svgの色はfillで変えられる*/
  width: 23px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

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

.svgIcon {
  （略）
  height: 27.5px;
  （略）
}

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

a { color: #000; }
a:hover {color: #ff0; }
svg { fill: currentColor; }

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