SVG 클리너

SVG 클리너란?

SVG 클리너는 SVG 파일 맨 앞에 붙은 XML 선언(<?xml version="1.0"?>), DOCTYPE 선언, 선두 주석처럼 실제 그림에는 필요 없지만 일부 업로드 시스템에서는 오류를 일으키는 코드를 제거해주는 무료 도구입니다. Illustrator, Figma, svgrepo.com, Flaticon 같은 프로그램·사이트에서 내보낸 SVG 파일은 이런 메타데이터를 자동으로 포함하는 경우가 많은데, Blogger처럼 XML 선언이나 주석이 있으면 이미지 업로드 자체를 거부하는 플랫폼도 있습니다. 이 도구는 그런 원인이 되는 코드만 정확히 골라내 제거하고, 실제 그림 데이터는 그대로 보존합니다.

사용 방법

정리하고 싶은 SVG 파일을 드래그해서 놓거나 파일 선택 버튼으로 첨부하세요. 여러 장을 한 번에 올릴 수 있습니다. 파일을 올리면 자동으로 분석과 정리가 진행되고, 어떤 항목이 제거됐는지(XML 선언, DOCTYPE, 선두 주석)와 파일 용량 변화가 바로 표시됩니다. 저장하기 버튼을 누르면 정리된 SVG 파일이 원래 이름 그대로 다운로드됩니다. 파일이 아니라 코드 조각만 갖고 있다면 아래 '코드 직접 붙여넣기'를 펼쳐서 텍스트로도 정리할 수 있습니다.

이럴 때 유용해요

• svgrepo.com, Flaticon 등에서 받은 SVG 아이콘이 Blogger에 업로드되지 않을 때
• 일러스트레이터·잉크스케이프에서 내보낸 SVG가 특정 CMS에서 미리보기가 안 될 때
• SVG 코드를 웹페이지에 인라인으로 붙여넣기 전에 불필요한 메타데이터를 정리하고 싶을 때
• 여러 개의 SVG 아이콘 파일을 한꺼번에 정리해야 할 때

XML 선언과 DOCTYPE, 원래 왜 붙어있을까?

SVG는 사실 XML이라는 더 큰 표준의 한 종류라서, 일러스트레이터나 아이콘 사이트들은 표준을 철저히 지키려고 파일 맨 앞에 '이 문서는 XML 1.0 버전입니다'라는 선언과, 옛날 브라우저 호환을 위한 DOCTYPE 정의를 자동으로 붙입니다. 브라우저에서 <img> 태그로 표시하거나 파일을 그대로 열 때는 문제가 없지만, 일부 CMS(Blogger 등)는 업로드된 파일을 보안 검사할 때 이런 프롤로그 코드를 예상치 못한 형식으로 판단해서 아예 업로드를 거부하는 경우가 있습니다. 이 도구는 실제 그림 데이터(<svg> 태그 안)는 전혀 건드리지 않고, 이 문제를 일으키는 앞부분의 메타데이터만 정확히 찾아서 제거합니다.

SVG 파일, 이럴 때 자주 문제가 생겨요

• Illustrator에서 '웹용으로 저장'이 아니라 일반 저장으로 내보내면 불필요한 메타데이터가 더 많이 붙는 경향이 있어요
• svgrepo.com·Flaticon 같은 아이콘 사이트에서 받은 파일은 출처 주석이 파일 맨 앞에 포함된 경우가 많아요
• 같은 SVG인데 어떤 곳(예: 이메일 서명, 워드 문서)에서는 잘 보이고 어떤 곳(예: 특정 CMS)에서는 안 보인다면, 이런 프롤로그 코드가 원인일 가능성이 커요
• 인라인 SVG(HTML 코드 안에 직접 삽입)로 쓸 계획이라면 XML 선언이 있으면 아예 브라우저가 렌더링을 거부하니, 인라인 삽입 전엔 항상 이 도구로 정리하는 걸 습관화하면 좋아요

자주 묻는 질문

왜 SVG 파일이 Blogger나 일부 CMS에 업로드되지 않나요?

일부 플랫폼은 SVG 파일 맨 앞에 <?xml version="1.0"?> 선언이나 <!DOCTYPE svg ...> 코드, 주석이 있으면 업로드를 거부합니다. svgrepo.com, Flaticon 같은 아이콘 사이트나 일러스트레이터에서 내보낸 SVG는 대부분 이런 메타데이터를 자동으로 포함하고 있어서 이 문제가 자주 발생합니다.

이 도구는 SVG의 실제 그림(경로)도 손상시키나요?

아니요. XML 선언, DOCTYPE, 선두 주석만 제거하고 <svg> 태그 안의 실제 도형·경로·색상 데이터는 전혀 건드리지 않습니다.

여러 파일을 한 번에 정리할 수 있나요?

네, 여러 SVG 파일을 한꺼번에 올리면 파일마다 독립적으로 정리되고, 각각 따로 저장할 수 있습니다.

업로드한 SVG가 서버로 전송되나요?

아니요. 모든 처리는 브라우저 안에서만 이뤄지며, 파일이 서버로 전송되거나 저장되지 않습니다.

이미 깨끗한 SVG를 넣으면 어떻게 되나요?

제거할 항목이 없다는 안내만 표시되고, 원본과 동일한 내용으로 저장할 수 있습니다.

이 도구로 정리하면 SVG 파일이 더 가벼워지나요?

네, XML 선언·DOCTYPE·주석은 몇 바이트에서 많게는 수백 바이트까지 차지하는데, 이걸 제거하면 그만큼 파일 용량이 줄어듭니다. 다만 이 도구의 목적은 용량 최적화보다는 업로드 오류 해결에 있습니다.

정리 후에도 SVG를 다시 편집할 수 있나요?

네, XML 선언이나 DOCTYPE은 편집 프로그램(일러스트레이터, 잉크스케이프 등)에서 파일을 여는 데 필요한 정보가 아니라서, 정리된 SVG도 문제없이 다시 열어 편집할 수 있습니다.

왜 어떤 SVG는 이 문제가 없나요?

Figma처럼 애초에 XML 선언 없이 순수한 <svg> 태그만 내보내는 프로그램도 있습니다. 어떤 도구로 만들었는지에 따라 문제가 있는 파일과 없는 파일이 갈립니다.