Base64 SVG 디코더

Base64 속 SVG 찾기

다른 이미지 형식과 달리 SVG는 일반 XML 텍스트입니다. <svg로 시작하는 파일은 PHN2Zy로 시작하는 Base64로 인코딩되고, XML 선언(<?xml)으로 시작하는 파일은 PD94bWwg로 시작합니다. Base64 SVG는 CSS 배경 이미지, 아이콘 세트, 디자인 도구 내보내기, 이메일 템플릿에서 흔히 볼 수 있습니다. MIME 유형은 image/svg+xml입니다.

SVG data URI 중에는 Base64가 아니라 data:image/svg+xml,%3Csvg...처럼 퍼센트 인코딩된 텍스트인 경우가 많습니다. 이 도구는 Base64를 입력으로 받으므로, 이런 URI는 Data URI 생성기에서 분석하십시오.

SVG 코드 읽기

미리 보기는 그래픽이 어떻게 렌더링되는지 보여 주지만, 정작 궁금한 부분은 패스 데이터, 색상, viewBox, 포함된 글꼴 같은 마크업인 경우가 많습니다. 파일을 ‘원본’이나 SVG로 다운로드해 텍스트 편집기에서 열거나, 같은 Base64를 Base64 디코딩 도구에 붙여넣으면 XML을 바로 텍스트로 볼 수 있습니다.

래스터를 SVG로: 벡터화가 아닌 감싸기

Base64 데이터가 PNG, JPEG 등 비트맵이라면 SVG를 선택했을 때 원본 픽셀을 <image> 요소에 담은 SVG 파일이 만들어집니다. SVG 파일만 받는 도구에 쓸 때는 유용하지만, 그림을 도형으로 트레이싱하지는 않습니다. 확대하면 여전히 흐려지고, 픽셀이 내부에 Base64로 저장되므로 파일도 비트맵보다 큽니다. 진짜 벡터 패스가 필요하다면 Potrace나 Inkscape의 비트맵 추적(Trace Bitmap) 기능 같은 트레이싱 소프트웨어를 사용하십시오.

신뢰할 수 없는 SVG 다루기

SVG에는 <script> 요소, 이벤트 핸들러 속성, 외부 리소스 링크가 들어 있을 수 있습니다. SVG를 <img> 태그나 CSS 배경을 통해 이미지로 표시하면 브라우저가 이를 모두 차단합니다. 하지만 파일을 브라우저 탭에서 직접 열거나 마크업을 페이지에 인라인으로 붙여넣으면 스크립트가 실행되고 외부 리소스가 로드될 수 있습니다. 출처를 알 수 없는 SVG는 그런 방식으로 사용하기 전에 검토하거나 정화(sanitize)하십시오.