_data-url

Base64エンコードされたData URLを作成します。

引数型初期値説明
_data-url($data...);
$dataList...ルートディレクトリからのファイルパス、またはインラインSVG

インラインSVGをBase64エンコード

改行なしのSVGを指定するとBase64エンコードされてCSSの url 関数として出力されます。

.element {
  background-image: _data-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="100"/></svg>');
}

.element {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCIvPjwvc3ZnPg==);
}

1行だと見づらい場合は、改行またはスペース区切りにできます。

.element {
  background-image: _data-url(
                      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">'
                        '<circle cx="100" cy="100" r="100"/>'
                      '</svg>',
                    );
}

.element {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9IjEwMCIvPjwvc3ZnPg==);
}

ファイル名の指定

プロジェクトルートからのファイルパスを指定すると、ファイルが読み込まれてBase64エンコードされます。

.element {
  background-image: _data-url('img/background.svg');
}