XML 구조

SVG는 이 사이트에 나오는 다른 형식들과 완전히 다릅니다. 바이너리가 아니라 그냥 XML 텍스트거든요. 텍스트 편집기로 열어서 그대로 읽을 수 있습니다. 그래서 메타데이터를 지우는 일이 개념적으로는 더 단순하지만, 동시에 정보가 숨을 수 있는 자리도 더 많아요.

메타데이터는 전용 요소로 들어가기도 하고, 아무 요소의 속성으로, XML 주석으로, 또는 처리 명령으로 들어가기도 합니다. 벡터 편집 프로그램들은 자기 데이터를 SVG에 잔뜩 집어넣는 걸 아주 좋아하죠.

SVG의 기본 구조

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100" viewBox="0 0 100 100">

  <!-- 메타데이터 요소 -->
  <title>내 그림</title>
  <desc>홍길동이 만듦</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="...">
      <!-- RDF/Dublin Core 메타데이터 -->
    </rdf:RDF>
  </metadata>

  <!-- 벡터 내용 -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

주요 요소

<svg>:viewBox와 크기를 담는 루트 요소
xmlns:네임스페이스 선언
<defs>:재사용할 정의 (그라데이션, 패턴)
<g>:묶음 요소

메타데이터 요소

SVG 규격에는 메타데이터를 붙이는 방법이 여러 가지 있고, 도구마다 쓰는 방식이 다릅니다. 어떤 건 아주 대놓고 드러나고(이름부터 <metadata> 요소죠), 어떤 건 훨씬 은근해요.

<metadata>

구조화된 메타데이터를 담는 상자로, 보통 RDF/Dublin Core가 들어갑니다. 만든 사람 이름, 생성 날짜, 권리 정보 등이 들어갈 수 있어요.

<metadata>
  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:dc="http://purl.org/dc/elements/1.1/">
    <rdf:Description>
      <dc:creator>홍길동</dc:creator>
      <dc:date>2024-01-15</dc:date>
    </rdf:Description>
  </rdf:RDF>
</metadata>

<title>

SVG 전체나 개별 요소의 제목입니다. 접근성을 위해 쓰는 경우가 많지만, 문서의 용도가 드러날 수 있어요.

<desc>

설명 요소입니다. 이미지, 만든 사람, 용도에 대한 자세한 정보가 들어갈 수 있습니다.

XML 주석

 안에 작성자 메모, 생성 날짜, 소프트웨어 정보, 디버깅 내용이 남아 있을 수 있어요.

편집 프로그램 네임스페이스

SVG가 지저분해지는 지점이 바로 여기예요. 벡터 편집 프로그램은 저마다 SVG가 기본으로 지원하지 않는 기능을 저장하려고 자기 네임스페이스 속성을 덧붙입니다. Inkscape 파일을 열어 보면 inkscape:, sodipodi: 속성이 온 사방에 있어요. 그 자체가 프라이버시 위험은 아니지만, 어떤 소프트웨어를 썼는지가 그대로 드러납니다.

inkscape:* / sodipodi:*

Inkscape는 레이어 이름, 안내선 위치, 문서 설정, 편집 이력을 담는 네임스페이스 속성을 추가합니다.

<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     inkscape:version="1.2"
     sodipodi:docname="my-drawing.svg">
  <sodipodi:namedview inkscape:current-layer="layer1"/>
</svg>

Adobe Illustrator

Illustrator는 버전, 아트보드 설정, 때로는 AI 형식 데이터까지 방대한 메타데이터를 심어 둡니다.

xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:x="http://ns.adobe.com/Extensibility/1.0/"

Sketch / Figma

요즘 디자인 도구는 레이어 이름, 컴포넌트 ID, 내보내기 설정을 자체 속성에 담아 두기도 합니다.

처리 명령

SVG 파일 맨 앞에 오는 XML 처리 명령(<?...?>)에도 어떤 소프트웨어를 썼는지가 담길 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!-- Inkscape로 만듦 (http://www.inkscape.org/) -->

남기는 것과 지우는 것

• <?xml ...?> 선언:남김 (필수)
• <?xml-stylesheet ...?>:남김 (기능에 필요)
• 그 밖의 처리 명령:지움

DOM 기반 처리

SVG는 유효한 XML이라서 DOM 트리로 파싱한 다음 원하지 않는 부분만 정확히 도려낼 수 있습니다. 정규식으로 처리하는 방식보다 훨씬 정밀하고, 멀쩡한 내용을 실수로 망가뜨리지 않아요.

XML 파싱

구조를 유지한 채 SVG를 XML 문서로 파싱합니다

메타데이터 요소 제거

<metadata>, <title>, <desc> 요소를 지웁니다

편집 프로그램 속성 제거

inkscape:*, sodipodi:* 등 편집 프로그램 네임스페이스를 지웁니다

주석 제거

문서에 있는 XML 주석을 모두 없앱니다

네임스페이스 정리

루트 요소에서 쓰이지 않는 네임스페이스 선언을 지웁니다

직렬화

정리된 XML을 다시 SVG 파일로 씁니다

처리 요약

남는 것

• 모든 벡터 그래픽 (패스, 도형, 텍스트)
• 스타일과 CSS
• 그라데이션과 패턴
• 필터와 효과
• 삽입된 이미지 (참조된 것)
• viewBox와 크기
• 표준 SVG 네임스페이스

지워지는 것

• <metadata> 요소
• <title> 요소
• <desc> 요소
• XML 주석
• inkscape:* 속성
• sodipodi:* 속성
• Adobe/Sketch 네임스페이스
• 쓰이지 않는 네임스페이스 선언

파일에 박힌 이미지

사람들이 자주 놓치는 함정이 하나 있어요. SVG 파일에는 래스터 이미지를 base64 데이터 URI로 통째로 넣을 수 있습니다. 그렇게 박힌 JPEG이나 PNG 안에 EXIF 메타데이터가 그대로 숨어 있을 수 있어요.

현재의 한계

PicScrub은 지금은 SVG 수준의 메타데이터만 지우고, 안에 박힌 래스터 이미지는 디코딩해서 처리하지 않습니다:

<image href="data:image/jpeg;base64,/9j/4AAQ..." />

즉 SVG 안에 들어 있는 래스터 이미지는 아직 처리되지 않아요. 완벽하게 하려면 그 이미지를 따로 꺼내서 개별적으로 정리해 주세요.

SVG 형식