SVGデータはとても便利だった。ボタンにちょっとした単色画像を利用するとしてサイズや色を変更するときにペイントソフトなどを毎回立ち上げたりして調整する必要があったけど、SVGデータならstyleでサイズ変更や色変更が可能なわけで、そもそも画像データなどをどこかに置く必要が特にないことが嬉しい。（多数のページで使い回ししたいのであればあっても良いかも）
しかし、このSVGをCSSでバックグラウンドに使おうと思っていたけど、使い方がちょっとよく分からないw
画像であればそのパスをurlで指定して読み込むことができれば表示するけど、SVGのファイルを置いてない場合はどうしたら良いんだろうか？
調べると、以下の方法で表示ができるそうなのでやってみた。
.svg_bg {
width: 24px;
height: 24px;
background: url('data:image/svg+xml;utf8,<svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"></path><path d="m15.5 14h-.79l-.28-.27c.98-1.14 1.57-2.62 1.57-4.23 0-3.59-2.91-6.5-6.5-6.5s-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z"></path></svg>') no-repeat center center;
}これで虫眼鏡のマークが表示するハズだったんだけど、表示はしなかった。他では表示してるサイトは多数あるから問題はどこなんだろうと記述方法でも違うのかと調べると、ある変換が必要だった。
それは、Base64にエンコードしないといけないらしい。SVGタグから始まり、終わりまでの全文をエンコードして、それを記入しなければならなかったそう。
そこで、URL変換するサービスサイトでエンコードしたものを再度当てはめて確認すると、ちゃんと表示した。
.svg_bg {
width: 24px;
height: 24px;
background: url('data:image/svg+xml;utf8,%3Csvg%20height%3D%2238%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0%200h24v24h-24z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22m15.5%2014h-.79l-.28-.27c.98-1.14%201.57-2.62%201.57-4.23%200-3.59-2.91-6.5-6.5-6.5s-6.5%202.91-6.5%206.5%202.91%206.5%206.5%206.5c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99%201.49-1.49zm-6%200c-2.49%200-4.5-2.01-4.5-4.5s2.01-4.5%204.5-4.5%204.5%202.01%204.5%204.5-2.01%204.5-4.5%204.5z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}
ちょっとしたアンカーボタンやbuttonタグをボタンのように加工してそこにSVGで作成したアイコンを背景に当てはめることはよく見る装飾方法だけど、まさかエンコードが必要だったとは。勉強になりました。
ちなみに、SVGをバックグラウンド用にBase64エンコードのサービスをしてくれるサイトは以下のURL先になります。
https://blog.s0014.com/posts/2017-01-19-il-to-svg/
Base64のエンコードだけで探して出てきたサイトでSVGをBase64にエンコードしてみても全く違う文字列になってしまいました。CSSで使用するためのエンコードは何か違うみたいなので、注意は必要かと思います。表示しなかったらエンコードの内容が違うかも。