Safariでmask-imageに指定したSVGが表示されない時の対処法

mask-imageにURLで指定したSVG画像がSafariだけ表示できなかったのでその対処法を備忘録。

絶対パス（https://〜/svg）や相対パス（/img/svg）でSVGを指定した際に、Chromeなど主要ブラウザの中でSafariのみ表示できなかったの時の対処法になります。

絶対パスや相対パスでは表示されない
対処法：SVG画像をBase64に変換する
1. 記述例

絶対パスや相対パスでは表示されない

/* 絶対パス */
mask-image: url(https://〜/img.svg);

/* 相対パス */
mask-image: url(img/img.svg);

どうやら、Safariのセキュリティ仕様で、外部URLのSVG（たとえ同一ドメインでも）をmask-imageとして扱えない場合があるらしく、上のようにURLが明示されている場合はブロックされやすいようです。

ですので、これを回避するためにSVG画像をBase64に変換する必要があります。

対処法：SVG画像をBase64に変換する

Base64 Image Encoder

Optimize your images and convert them to base64 online. Drag & Drop your files, copy to clipboard with a click and use t...

SVG画像をBase64に変換して指定することで表示できます。

SVG画像をBase64に変換してくれるオンラインツールは無数にあるので、検索してお好きなものを使いましょう。
CSS向けのコードを表示してくれるので、自分は上記のサイトを使いました。

記述例

上のアイコンをBase64で表示させる場合はこう書きます。

mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjY2NyIgdmlld0JveD0iMCAwIDgwMCA2NjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTY2LjY2NyA2Ni42NjY3QzExMS40MzggNjYuNjY2NyA2Ni42NjY3IDExMS40MzggNjYuNjY2NyAxNjYuNjY3VjU5OS41NkwxODguMDgxIDUwMEg2MzMuMzMzQzY4OC41NjMgNTAwIDczMy4zMzMgNDU1LjIzIDczMy4zMzMgNDAwVjE2Ni42NjdDNzMzLjMzMyAxMTEuNDM4IDY4OC41NjMgNjYuNjY2NyA2MzMuMzMzIDY2LjY2NjdIMTY2LjY2N1pNMjExLjkxOSA1NjYuNjY3TDEwOC45MzkgNjUxLjExQzgwLjQ2NzcgNjc0LjQ1NyAzOC40NjE3IDY3MC4zMDMgMTUuMTE1NSA2NDEuODNDNS4zNDE1MyA2MjkuOTEzIDAgNjE0Ljk3MyAwIDU5OS41NlYxNjYuNjY3QzAgNzQuNjE5MyA3NC42MTkzIDAgMTY2LjY2NyAwSDYzMy4zMzNDNzI1LjM4IDAgODAwIDc0LjYxOTMgODAwIDE2Ni42NjdWNDAwQzgwMCA0OTIuMDQ3IDcyNS4zOCA1NjYuNjY3IDYzMy4zMzMgNTY2LjY2N0gyMTEuOTE5WiIgZmlsbD0iIzIyMzE0MCIvPgo8L3N2Zz4K);

長いので複数箇所で使う場合は、以下のようにrootを使うなりしましょう。

:root {
--clock-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjY2NyIgdmlld0JveD0iMCAwIDgwMCA2NjciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTY2LjY2NyA2Ni42NjY3QzExMS40MzggNjYuNjY2NyA2Ni42NjY3IDExMS40MzggNjYuNjY2NyAxNjYuNjY3VjU5OS41NkwxODguMDgxIDUwMEg2MzMuMzMzQzY4OC41NjMgNTAwIDczMy4zMzMgNDU1LjIzIDczMy4zMzMgNDAwVjE2Ni42NjdDNzMzLjMzMyAxMTEuNDM4IDY4OC41NjMgNjYuNjY2NyA2MzMuMzMzIDY2LjY2NjdIMTY2LjY2N1pNMjExLjkxOSA1NjYuNjY3TDEwOC45MzkgNjUxLjExQzgwLjQ2NzcgNjc0LjQ1NyAzOC40NjE3IDY3MC4zMDMgMTUuMTE1NSA2NDEuODNDNS4zNDE1MyA2MjkuOTEzIDAgNjE0Ljk3MyAwIDU5OS41NlYxNjYuNjY3QzAgNzQuNjE5MyA3NC42MTkzIDAgMTY2LjY2NyAwSDYzMy4zMzNDNzI1LjM4IDAgODAwIDc0LjYxOTMgODAwIDE2Ni42NjdWNDAwQzgwMCA0OTIuMDQ3IDcyNS4zOCA1NjYuNjY3IDYzMy4zMzMgNTY2LjY2N0gyMTEuOTE5WiIgZmlsbD0iIzIyMzE0MCIvPgo8L3N2Zz4K); 
}

mask-image: var(--clock-icon);

短いですが、Safariでmask-imageに指定したSVGが表示されない時の対処法でした。