Base64를 SVG로

Base64를 SVG로 디코딩하는 방법

1. Base64, data:image/svg+xml;base64,... URI, 또는 이를 포함한 CSS나 HTML을 붙여넣으세요. URL 인코딩된 SVG data URI(data:image/svg+xml,%3Csvg...)도 됩니다.
2. 미리보기가 그래픽을 그리고 크기를 표시합니다. 브라우저가 고정 크기를 알려 주지 않으면 “확대/축소 가능 (고정 크기 없음)“으로 나옵니다. 그 아래에 XML 소스 전체가 있습니다.
3. 파일 다운로드를 눌러 .svg를 저장하거나, 소스 창에서 마크업을 선택해 복사하세요.

SVG는 일반 텍스트이므로 디코딩하면 읽을 수 있는 마크업이 나옵니다. 파일을 저장하는 것 말고도 스타일시트 속 아이콘이 실제로 무엇을 그리는지, 어떤 색을 쓰는지, 왜 렌더링되지 않는지 알아낼 수 있습니다.

SVG 안전성: 이미지 미리보기와 인라인 마크업

SVG 파일은 문서입니다. <script> 요소, onload 같은 이벤트 속성, 링크, <foreignObject>를 통한 HTML, 외부 이미지와 글꼴 참조를 담을 수 있습니다. 브라우저가 이를 어떻게 처리하는지는 SVG를 불러오는 방식에 달려 있습니다.

이 페이지는 바이트를 디코딩해 data:image/svg+xml;base64,... 형태로 <img>에 넘기므로, 파일 안에 무엇이 있든 그려지기만 합니다. 소스 창은 텍스트를 해석하지 않고 보여 줍니다.

SVG를 페이지에 인라인할 계획이라면 먼저 소스를 읽고 다음을 찾아보세요.

• <script> 요소와 onload, onclick처럼 on으로 시작하는 속성
• href나 xlink:href 안의 javascript:
• 임의의 HTML을 담을 수 있는 <foreignObject>
• 추적에 쓰일 수 있는 http://나 https:// 주소를 가리키는 href 값
• 일부 서버 측 XML 파서가 위험하게 확장하는 <!ENTITY 선언

Base64는 이 모든 것을 대충 훑어봐서는 알 수 없게 숨기기 때문에 악성 SVG는 인코딩된 채로 오는 경우가 많습니다. Base64 자체는 아무것도 보호하지 않습니다. 인코딩과 암호화의 차이를 참고하세요.

SVG를 알아보는 방식

대부분의 SVG 파일은 <svg나 XML 선언으로 시작하므로 Base64는 PHN2Zy나 PD94bWwg로 시작합니다. 앞에 UTF-8 바이트 순서 표시가 있으면 77u/PHN2Zy...처럼 77u/가 붙습니다.

도구는 처음 2 KB 안에서 XML 선언, 주석, <!DOCTYPE svg ...> 줄을 건너뛴 뒤 <svg 태그가 첫 요소일 때 데이터를 SVG로 취급합니다. image/svg+xml을 선언한 data URI라면 어느 경우든 선언된 형식을 씁니다. HTML 페이지처럼 SVG가 다른 것 안에 들어 있거나, 매우 긴 주석 때문에 태그가 2 KB 뒤로 밀리면 “SVG 형식으로 보이지 않습니다” 안내가 나옵니다. 렌더링하려면 MIME 유형에 image/svg+xml을 입력하세요.

SVG가 렌더링되지 않을 때

• “이 SVG를 렌더링할 수 없습니다.” XML 형식이 잘못되었습니다. 닫히지 않은 태그, 이스케이프되지 않은 &, 또는 닫는 </svg>가 빠진 잘린 문자열입니다. 먼저 소스의 끝부분을 보세요.
• 여기서는 렌더링되는데 사이트에서는 안 됩니다. 사이트가 파일을 어떻게 제공하는지 확인하세요. data URI라면 유형이 image/svg+xml이어야 하며, text/plain이나 application/octet-stream으로 제공되는 파일도 이미지로 렌더링되지 않습니다.
• 인라인으로는 렌더링되는데 data URI로는 안 됩니다. 루트 요소에 xmlns="http://www.w3.org/2000/svg"가 없습니다. HTML 안의 인라인 SVG에는 필요 없지만 이미지에는 필요합니다.
• 색이 틀립니다. 이미지로 쓰인 SVG는 페이지의 currentColor나 CSS를 상속할 수 없습니다. 파일에 정의된 색으로 그려지며, 기본값은 검은색입니다.

코드에서 디코딩한 SVG 사용하기

브라우저에서 Base64 SVG를 안전하게 표시하는 방법은 이미지로 유지하는 것입니다.

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

대신 element.innerHTML = atob(b64)라고 쓰면 마크업이 페이지에 들어가 그 스크립트와 이벤트 핸들러가 페이지의 권한으로 실행됩니다. 또한 atob()는 바이트를 Latin-1 문자로 돌려주므로 SVG 안의 비 ASCII 텍스트가 깨집니다. UTF-8을 올바르게 디코딩하는 방법은 JavaScript에서 Base64에 있습니다. SVG를 인코딩하려면 SVG를 Base64로를 사용하세요.

자주 묻는 질문