SassでSVGをdata URI schemeで表示させるコード生成

dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。

このようなコードになります。
HTMLコードだけで1pxの透過GIFから引用しました。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />

以前、画像ファイルなしCSSだけでSVGを表示というBase64にエンコードするやり方を紹介しましたが、
今回は、生のSVGコードをURLエンコードする処理をSassに任せbackground-imageとして貼り付けるやり方です。

See the Pen SVG data URI scheme by webdev (@webdev-jp-net) on CodePen.0

URLエンコードはIEのため

IE、Edgeではないブラウザでは、SVGはエンコードせずにdataURLに埋め込めます。

background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24px… 1.594-0.563 3.094-1.547 4.219l0.281 0.281h0.797z"></path></svg>');

しかし、IEは文字化けしてしまうのでURLエンコードしたコードをcharset=utf8,つきで記述します。

background-image: url('data:image/svg+xml;charset=utf8,\a%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%3E\a%20%20%3Cpath%20fill%3D%22%22%20d%3D%22M9.516%2014.016c2.484%200%204.5-2.016%204.5-4.5s-2.016-4.5-4.5-4.5-4.5%202.016-4.5%204.5%202.016%204.5%204.5%204.5zM15.516%2014.016l4.969%204.969-1.5%201.5-4.969-4.969v-0.797l-0.281-0.281c-1.125%200.984-2.625%201.547-4.219%201.547-3.609%200-6.516-2.859-6.516-6.469s2.906-6.516%206.516-6.516%206.469%202.906%206.469%206.516c0%201.594-0.563%203.094-1.547%204.219l0.281%200.281h0.797z%22%3E%3C%2Fpath%3E\a%20%20%3C%2Fsvg%3E\a%20%20');

Sassのfunctionでエンコードできる

B-iggy氏のEncode SVG SCSSと、jakob-e氏のinline-svg-function.scssを組み合わせるとURLエンコードができます。

  1. SVGのコードを引数としてinline-svg-function.scssを実行
  2. inline-svg-function.scssでは、渡されたSVGの文字列とURLエンコード対象の文字列リストをEncode SVG SCSSに渡しています
  3. Encode SVG SCSSは、渡された文字を1文字ずつ置換判定し、結果をリターンしています。

関連記事