CSS背景、ボーダー画像、またはマスクで使用するために、SVG画像を安全なURL形式にエンコード
エンコーディングせずにSVGをCSSでデータURIとして使用できますが、これはWebkitベースのブラウザでのみ機能します。encodeURIComponent()によるエンコーディングはすべてのブラウザとの互換性を保証します。
データURI
encodeURIComponent()
SVGにはxmlns属性(例:xmlns='http://www.w3.org/2000/svg')が必要です。存在しない場合は自動的に追加されます。
xmlns='http://www.w3.org/2000/svg'
エンコードされたSVGはbackground、border-image、またはmaskプロパティで使用できます。
background
border-image
mask