S3からのSVGイメージの色変更とCORSエラーの対処方法

開発プロジェクトにおいて、S3バケット内のSVGイメージの色を変更する必要が生じました。
初めは、以下のようなmask-image(カラーコード#0000FFは例)を用いてこれらのSVGイメージをマスクして表示しようとしましたが、本番相当の環境でSVGイメージを表示したらCORS（Cross-Origin Resource Sharing）エラーに遭遇しました。

# mask-image
backgroundColor: #0000FF,
maskImage: url('S3のpath'),
maskRepeat: no-repeat,
maskPosition: center,
maskSize: 30px,

SVGイメージをmask-imageを使ってimgタグ内でマスクする際、SVGファイルが異なるドメイン（S3バケットのドメイン）にホストされていると、ブラウザがセキュリティ上の理由からアクセスを拒否することがあることがわかりました。

CORSエラーを回避する方法として、S3バケットの設定でCORSヘッダーを適切に設定することができますが、S3の設定ではなく、アプリケーション内でCORSエラーを解決したいと考えました。
そのため、開発プロジェクトではSVGイメージの色変更にCSSのfilterプロパティを使用する方法を採用しました。

CSSのfilterプロパティで色を変更する

SVGイメージの色をCSSのfilterプロパティを使用して変更するには、こちらのサイトに表示されるfilterの値を利用すれば簡単です。
例えば、カラーコード #0000FF の場合、以下のようなfilterの値が表示されますが、意図した色にならない場合があるため、必要に応じてfilterの値を微調整することで意図した色になると思います。

filter: invert(7%) sepia(100%) saturate(7489%) hue-rotate(248deg) brightness(103%) contrast(143%);

imgタグのsrc属性にS3のURLを指定する場合、CORSエラーが発生しない理由

imgタグ内でS3のURLを指定する場合、ブラウザは同一オリジンポリシーに従います。同一オリジンポリシーでは、異なるオリジンからのアクセス制約が適用されず、画像を正常に読み込むことができます。このため、CORSエラーが発生しないそうです。

<img :class="XXX" src="S3のpath" />

以上、少しでも参考になりましたら幸いです。