SVG는 그림처럼 보여도 외부 이미지와 문서, 스타일을 URL로 참조할 수 있습니다. 공유 전 원문에서 href와 url 참조를 찾고, 필요한 자산은 안전하게 포함하거나 PNG로 렌더링한 뒤 오프라인에서 다시 확인하세요.
SVG → PNG
SVG를 단순한 그림 파일로만 보지 않기
SVG는 XML 기반 문서이며 도형과 글자 외에도 다른 리소스를 참조할 수 있습니다. SVG 2 문서에서는 image, use, script, iframe, video 같은 요소가 href를 통해 외부 구조를 가리킬 수 있고, 스타일 속성이나 스타일시트의 url 표현도 이미지와 글꼴 같은 자원을 불러올 수 있습니다. 따라서 파일이 현재 컴퓨터에서 정상적으로 보인다는 사실만으로 모든 시각 요소가 파일 안에 포함됐다고 볼 수 없습니다.
외부 참조의 실제 동작은 브라우저, 편집기, 보안 정책, 네트워크와 교차 출처 제한에 따라 달라집니다. 어떤 앱은 요청을 허용하고 다른 앱은 차단할 수 있으며, 원격 파일이 바뀌거나 사라지면 같은 SVG도 다른 모습으로 열릴 수 있습니다. 공유 목적이 로고 전달, 웹 게시, 인쇄 또는 단순 미리보기 중 무엇인지 먼저 정하고, 수신 환경에서 외부 연결이 허용되는지도 확인해야 합니다.
- SVG는 XML 문서로 취급
- 외부 이미지·문서·스타일 참조 확인
- 수신 앱의 보안 정책 고려
현재 화면에 보이는 요소가 모두 SVG 파일 내부에 저장되어 있다고 가정하지 마세요.
공유 시 생길 수 있는 개인정보와 재현 문제
SVG를 열 때 외부 서버로 요청이 나가면 서버는 일반적인 웹 요청에서 보게 되는 시간, 네트워크 주소와 클라이언트 관련 정보를 기록할 수 있습니다. URL 자체에 프로젝트명, 계정 식별자, 임시 접근 토큰이나 내부 경로가 포함돼 있다면 파일을 전달하는 순간 그 문자열도 함께 노출됩니다. 실제로 요청이 성공하지 않더라도 민감한 주소가 원문에 남아 있을 수 있으므로 개인정보 검토는 렌더링 결과가 아니라 파일 내용까지 포함해야 합니다.
외부 자산은 재현성에도 영향을 줍니다. 제작자 컴퓨터의 로컬 경로, 사내 서버 또는 로그인 세션에 의존한 링크는 수신자 환경에서 깨질 가능성이 큽니다. 반대로 공개 URL이 살아 있어도 나중에 이미지가 교체되면 과거 문서의 모양이 달라질 수 있습니다. 보관하거나 계약 결과물로 전달하는 SVG라면 필요한 자산과 라이선스, 버전을 고정하고 네트워크 없이도 의도한 모습이 나오는지 시험하는 것이 안전합니다.
- URL 속 민감한 문자열 확인
- 로컬·사내 경로 제거
- 오프라인 재현 여부 시험
텍스트 원문에서 참조를 체계적으로 찾기
먼저 원본을 복사한 뒤 신뢰할 수 있는 텍스트 편집기에서 공유용 사본을 여세요. href와 xlink:href, url 괄호, @import, http와 https, file 스킴과 상대 경로를 검색합니다. image와 use 요소뿐 아니라 style 블록, 인라인 style, 필터와 마스크 정의도 함께 살펴보세요. 사람에게 보이는 링크 텍스트만 지우고 속성 값을 남기면 외부 요청 가능성은 그대로이므로 태그와 속성의 실제 값을 확인해야 합니다.
찾은 항목을 무조건 삭제하면 그림이 깨질 수 있으므로 각 참조의 역할을 분류하세요. 단순 클릭 링크인지, 렌더링에 필요한 이미지인지, 글꼴이나 스타일인지, 제작 도구가 남긴 불필요한 메타데이터인지 구분합니다. 모르는 스크립트나 데이터는 실행해 확인하지 말고 격리된 환경에서 검사하세요. 파일이 복잡하면 원본과 수정본의 차이를 저장하고, 제거한 항목과 대체한 자산을 기록해야 이후 문제가 생겼을 때 되돌릴 수 있습니다.
- href·xlink:href·url 검색
- http·file·상대 경로 확인
- 참조 역할을 분류한 뒤 수정
참조를 포함하거나 렌더링 사본 만들기
계속 벡터 편집이 필요하다면 외부 이미지를 허용된 방식으로 문서에 포함하거나, 배포 가능한 로컬 자산 묶음으로 정리하고 상대 경로를 검증할 수 있습니다. 다만 포함하면 파일이 커질 수 있고 글꼴과 이미지의 라이선스 조건도 확인해야 합니다. 외부 스크립트나 불필요한 링크는 제거하고, 링크가 꼭 필요하다면 목적과 대상 도메인을 명확히 문서화하세요. 편집기에서 저장할 때 다시 외부 경로가 생기지 않는지도 재검사합니다.
수신자가 벡터 구조를 편집할 필요 없이 보기만 하면 SVG를 PNG로 렌더링한 공유 사본이 더 단순할 수 있습니다. 이 과정은 현재 렌더링된 픽셀을 고정하므로 외부 URL 구조를 그대로 전달하지 않지만, 변환 시 원격 자산이 차단되거나 로드되지 않으면 빠진 상태로 PNG가 만들어질 수 있습니다. 변환 전에 필요한 자산이 모두 표시됐는지 확인하고 원하는 픽셀 크기와 배경, 투명도, 글꼴 모양을 지정하세요. SVG 원본은 별도 보관합니다.
- 필요 자산의 포함·라이선스 확인
- 보기 전용이면 PNG 사본 고려
- 변환 전 누락된 원격 자산 확인
네트워크 없는 환경과 실제 수신 앱에서 확인하기
수정한 SVG를 저장한 뒤 네트워크를 끊거나 외부 요청을 차단한 테스트 환경에서 다시 여세요. 로고, 배경 이미지, 아이콘, 글꼴, 필터와 마스크가 그대로 보이는지 원본 캡처와 비교합니다. 그 다음 브라우저와 실제 수신 편집기에서 각각 열어 보세요. 프로그램마다 외부 참조와 글꼴 대체, 스크립트 처리 정책이 다르므로 한 앱에서 통과한 결과만으로 공유 준비가 끝났다고 판단하기 어렵습니다.
최종 사본의 원문을 다시 검색해 새로 생긴 URL과 로컬 경로가 없는지 확인하고, 파일명과 문서 메타데이터에도 개인정보가 남지 않았는지 살펴보세요. PNG도 함께 제공한다면 픽셀 크기, 배경과 투명 가장자리를 실제 게시 화면에서 검사합니다. 원본, 수정한 SVG, 렌더링 사본을 구분해 보관하고 어떤 버전이 외부 공유 승인본인지 표시하면 실수로 원본을 보내는 위험을 줄일 수 있습니다.
- 오프라인에서 다시 열기
- 브라우저와 수신 편집기 모두 확인
- 최종 원문에서 URL 재검색
공유 전 마지막 검사는 화면과 원문을 모두 대상으로 해야 합니다.
핵심만 정리했어요
- SVG의 image, use 등 여러 요소와 CSS는 문서 밖의 리소스를 URL로 참조할 수 있습니다.
- 외부 참조는 열람 환경에 따라 네트워크 요청, 추적 정보 노출, 깨진 이미지 또는 다른 렌더링을 만들 수 있습니다.
- 눈에 보이는 화면만 보지 말고 텍스트 원문에서 href, xlink:href와 url 괄호를 검색해야 합니다.
- 공유용 사본은 불필요한 참조를 제거하고 오프라인과 실제 대상 앱에서 다시 열어 결과를 검증하세요.
자주 묻는 질문
SVG를 열기만 해도 외부 요청이 생길 수 있나요?
문서에 외부 리소스 참조가 있고 열람 앱이 이를 허용하면 요청이 발생할 수 있습니다. 앱과 보안 정책에 따라 동작은 달라집니다.
화면에 링크가 없으면 안전한가요?
아닙니다. 보이지 않는 요소, 스타일과 href 속성에 URL이 남을 수 있으므로 텍스트 원문을 검색해야 합니다.
모든 외부 참조를 삭제해도 되나요?
렌더링에 필요한 이미지나 스타일일 수 있으므로 역할을 확인한 뒤 포함, 대체 또는 제거해야 합니다.
PNG로 바꾸면 외부 URL 문제는 끝나나요?
PNG에는 SVG의 참조 구조가 남지 않지만 변환 시 원격 자산이 빠질 수 있으므로 결과 화면을 반드시 비교해야 합니다.
최종 공유 전에 가장 간단한 검사는 무엇인가요?
원문에서 URL과 로컬 경로를 검색하고, 네트워크를 끈 상태와 실제 수신 앱에서 파일을 다시 여는 것입니다.