[HTML, CSS] 글자 백그라운드에 svg 파일을 삽입하는 법

결과물

<h1>best h<span>o</span>rr<span>o</span>r scenes</h1>

.heading h1 span {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath style='fill:%23e7473c;' d='M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z'/%3E%3C/svg%3E") no-repeat center 18px;
  background-size: 50%;
}

 

O에 span 처리를 해서 백그라운드 이미지로 svg 이미지를 넣고자 하였다. 하지만 폰트 어썸에서는 html에서 사용할 수 있는 경로만 제공했으므로 url에도 사용할 수 있는 data url이 필요했다. 

해당 방법은 아래의 zinee님의 블로그에서 많은 도움을 받았다.

https://zinee-world.tistory.com/520

 

나중엔 svg 파일에 애니메이션도 넣어보고 싶다. 

 

색상 변경 방법

path style="fill:#000";