css에 SVG 삽입방법
관련링크
https://sir.kr/talk/20091
93회 연결
본문
안녕하세요?
제가 올린 채팅 프로그램 https://sir.kr/talk/20091 을 편집하다가 언어지원 국기에 태극기가 빠져서 점검해보니 SVG 파일이 자체로 저장된 게 아니라 css에 첨부시켜두었는데, 그 양식도 일반적인 양식이 아닙니다.
/* icons/bgimg */
/* replace icons base color
base64 RkZGRkZG = FFFFFF (white)
base64 MDAwMDAw = 000000 (black)
base64 NjY2NjY2 = 666666 (grey)
*/
/* flags */
.svg_f_de{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Ik0zMS45LDJDMTguOCwyLDcuNywxMC40LDMuNiwyMmg1Ni42QzU2LjEsMTAuNCw0NSwyLDMxLjksMnoiIGZpbGw9IiMzZTQzNDciLz48cGF0aCBkPSJNMzEuOSw2MmMxMy4xLDAsMjQuMi04LjMsMjguMy0yMEgzLjZDNy43LDUzLjcsMTguOCw2MiwzMS45LDYyeiIgZmlsbD0iI2ZmZTYyZSIvPjxwYXRoIGQ9Im0zLjYgMjJjLTEuMSAzLjEtMS43IDYuNS0xLjcgMTBzLjYgNi45IDEuNyAxMGg1Ni42YzEuMS0zLjEgMS43LTYuNSAxLjctMTBzLS42LTYuOS0xLjctMTBoLTU2LjYiIGZpbGw9IiNlZDRjNWMiLz48L3N2Zz4=")}
.svg_f_cz{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiPjxwYXRoIGQ9Im0xMC44IDEwLjh2MjEuMmg1MS4yYzAtMTYuNi0xMy40LTMwLTMwLTMwLTguMyAwLTE1LjggMy40LTIxLjIgOC44IiBmaWxsPSIjZjlmOWY5Ii8+PHBhdGggZD0ibTEwLjggMzJ2MjEuMmM1LjQgNS40IDEyLjkgOC44IDIxLjIgOC44IDE2LjYgMCAzMC0xMy40IDMwLTMwaC01MS4yIiBmaWxsPSIjZWQ0YzVjIi8+PHBhdGggZD0iTTEwLjgsMTAuOEM1LjQsMTYuMiwyLDIzLjcsMiwzMnMzLjQsMTUuOCw4LjgsMjEuMkwzMiwzMkwxMC44LDEwLjh6IiBmaWxsPSIjNDI4YmMxIi8+PC9zdmc+")}
아떤 방법을 사용했는지 웹검색에도 나타나지 않아 문의드립니다.
혹시 자세한 설명이 올라간 웹사이트라도 아신다면 링크 부탁 드립니다.^^
!-->답변 1
svg파일을 base64로 인코딩한 것으로 보입니다.
물론 위 소스를 디코딩할 수도 있습니다.
아래 url 확인해 보세요.
encode
https://base64.guru/converter/encode/image/svg
decode
https://base64.guru/converter/decode/image/svg
답변을 작성하시기 전에 로그인 해주세요.