SVG 파일 URL 인코딩하기

Unsplash _ Harpal Singh

블로그 스킨을 바꾸고 시간이 날 때마다 조금씩 수정하다 보니 이제 끝이 보인다. 탕비수다 스킨은 대부분 SVG 파일 코드가 사용됐는데, HTML에서는 수정이 쉽지만 문제는 CSS에서 SVG 파일을 나타내는 것이었다.

아래는 현재 댓글과 방명록 영역에 적용된 형식이다. 일반적인 구조에서는 HTML로 나타낼 수 있지만 이와 같은 특정 위치 앞에 나타내려면 CSS에서 before 속성으로 지정해줘야 한다. 하지만 여기서 또 걸리는 부분은 HTML과 CSS에서 읽는 코드가 다르다는 점이다.

블로그 주인 필명 앞 표시
비밀 댓글 표시

적용하기 전에는 인코딩하려면 프로그램을 사용해야 되는 줄 알고 패턴을 분석한 다음 문자 하나하나 고치면서 시도해봤는데 도저히 엄두가 안 나서 여기저기 헤매다가 쉽고 간단하게 CSS에서 읽을 수 있는 코드로 인코딩할 수 있는 사이트를 찾았다.

URL-encoder for SVG

https://yoksel.github.io/url-encoder/

위 링크에서 Insert your SVG 폼에 SVG 파일 코드를 입력하면 Ready for CSS 폼에 CSS에서 사용할 수 있는 코드가 출력되며 Preview 폼에서 결과를 확인할 수 있다. 이렇게 인코딩된 코드는 content 속성으로 나타낼 수 있다.

url("data:image/svg+xml,%3Csvg class='svg-icon' fill='%23f67e7f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M376 192h-24v-46.7c0-52.7-42-96.5-94.7-97.3-53.4-.7-97.3 42.8-97.3 96v48h-24c-22 0-40 18-40 40v192c0 22 18 40 40 40h240c22 0 40-18 40-40V232c0-22-18-40-40-40zM270 316.8v68.8c0 7.5-5.8 14-13.3 14.4-8 .4-14.7-6-14.7-14v-69.2c-11.5-5.6-19.1-17.8-17.9-31.7 1.4-15.5 14.1-27.9 29.6-29 18.7-1.3 34.3 13.5 34.3 31.9 0 12.7-7.3 23.6-18 28.8zM324 192H188v-48c0-18.1 7.1-35.1 20-48s29.9-20 48-20 35.1 7.1 48 20 20 29.9 20 48v48z'/%3E%3C/svg%3E")