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