사용 방법
- .svg 파일을 드롭 영역에 끌어다 놓거나, 클릭해서 선택하거나, 이미지를 붙여넣습니다.
- SVG 마크업 자체를 인코딩하려면 ‘변환 형식’을 ‘원본 유지’로 두고, 픽셀 이미지로 바꾸려면 PNG, JPEG, WebP 중 하나를 선택합니다.
- 래스터화하는 경우 ‘최대 너비’로 픽셀 크기를 조절합니다.
- 스타일시트에는 CSS 배경 이미지 출력을 복사하고, 그 밖의 용도에는 data URI, 순수 Base64, img 태그, Markdown 버전을 사용합니다.
data URI로 쓰는 SVG
SVG(Scalable Vector Graphics, MIME 유형 image/svg+xml)는 도형을 XML 텍스트로 기술하므로 어떤 크기에서도 선명합니다. SVG의 Base64는 보통 PHN2Zy(<svg를 인코딩한 값)로 시작하며, 파일이 XML 선언으로 시작하면 PD94bWw로 시작합니다.
SVG를 이미지로 사용할 때는 루트 요소에 xmlns="http://www.w3.org/2000/svg"가 있어야 합니다. HTML에서 복사한 인라인 코드 조각에는 이 속성이 빠진 경우가 많으며, 그러면 data URI가 아무것도 표시하지 않습니다. 또한 이미지 모드에서는 외부 리소스가 차단되므로 SVG 안의 웹 글꼴이나 링크된 이미지가 로드되지 않습니다. 텍스트를 패스로 변환하거나 해당 리소스를 먼저 포함시키십시오.
Base64와 URL 인코딩 중 무엇을 쓸까
SVG는 원래 텍스트이므로 data URI에 마크업을 그대로 담고 일부 문자(<, >, #, %, 따옴표)만 퍼센트 인코딩할 수 있습니다. CSS에 넣는 일반적인 아이콘이라면 이 방식이 Base64보다 짧고 gzip으로도 더 잘 압축됩니다. 따옴표나 특수 문자를 망가뜨리는 시스템을 거치는 문자열이거나 API가 Base64를 요구하는 경우에는 Base64가 더 안전합니다.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* 퍼센트 인코딩 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");퍼센트 인코딩 형식을 만들려면 Data URI 생성기에서 ‘퍼센트 인코딩’을 선택하십시오.
신뢰할 수 없는 SVG 새니타이징
SVG에는 <script> 요소, onload 같은 이벤트 핸들러 속성, 다른 문서로 연결되는 링크가 들어 있을 수 있습니다. 브라우저는 <img>나 CSS 배경으로 표시한 SVG에서는 스크립트를 실행하지 않지만, 같은 파일을 HTML에 인라인으로 넣거나 단독으로 열면 스크립트가 실행될 수 있습니다. 사용자가 애플리케이션에 SVG 파일을 업로드할 수 있다면 저장하거나 삽입하기 전에 DOMPurify 같은 도구로 새니타이징하십시오. Base64는 마크업을 언뜻 보기에 감출 뿐 안전하게 만들어 주지는 않습니다.
자주 묻는 질문
SVG에는 Base64와 URL 인코딩 중 무엇이 더 좋습니까?
CSS에 넣는 SVG라면 대개 URL 인코딩이 더 짧고 읽기도 쉽습니다. 문자열이 다른 시스템을 거치거나 API가 Base64를 요구할 때는 Base64가 더 안정적입니다.
SVG data URI가 표시되지 않는 이유는 무엇입니까?
xmlns 속성이 없는 경우, 퍼센트 인코딩한 URI에서 #을 이스케이프하지 않은 경우, SVG가 다른 파일의 글꼴이나 이미지를 불러오는 경우입니다.SVG를 PNG Base64 문자열로 변환할 수 있습니까?
예. ‘변환 형식’에서 PNG를 선택하십시오. 브라우저가 SVG를 픽셀로 렌더링하며, ‘최대 너비’ 옵션으로 결과를 더 작게 만들 수 있습니다.