画像SVGをBase64にして使ってはいけない。今はそのまま直接埋め込むことができる

更新日 2022/07/04 02:06:07

CSSに画像SVGをインラインで埋め込むときにBase64へ変換してる人向けの記事です。

検索サイトから「SVG CSS インライン」や「SVG CSS 直接埋め込む」などで調べると、上の方に来るサイトで紹介されているのが大体Base64に変換してから埋め込む方法。

この方法はIEでSVG表示する方法のためにあるが、IEはサポート終了したので今はもっと簡単に直接埋め込める方法がある。

古い

 div {
  background-image:url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCI+DQoJPGNpcmNsZSBjeD0iMTUwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0iIzAwOTlmZiIgc3Ryb2tlPSIjMDAyMmJiIiAvPg0KPC9zdmc+");
}

新しい

 div {
  background-image:url("data:image/svg+xml;utf-8,<svg  xmlns="http://www.w3.org/2000/svg" width="300" height="300"><circle cx="150" cy="150" r="50" fill="#0099ff" stroke="#0022bb" /></svg>");
}

base64にすると、元のデータの容量から約33%増加しますし、わかりにくいコードになってしまいますね。

新しい方法は直接埋め込むことができるので、もとのデータの容量で済み、直感的にSVGファイルで中身も大体わかりますね。

さらにカラーやSVG専用のCSSを後から追加することが簡単になるというメリットがある