같은 SVG인데 img로 넣을 때와 직접 열 때가 다른 이유

외부 사진이 빠졌다면 파일 내용과 함께 포함 방식을 확인합니다. 브라우저 실측 화면이 아닌 처리 관계도입니다.

SVG를 새 탭에서 열면 완전한 그림인데 <img> 안에서는 일부가 빠진다면, SVG가 다른 파일을 참조하는지부터 확인하세요. 브라우저는 SVG를 이미지로 읽을 때와 하나의 문서로 열 때 허용하는 동작을 달리합니다.

파일을 다시 내려받아도 같은 부분이 빠지는 문제라면 특히 이 차이가 중요합니다. 파일 내용이 손상되지 않았어도 포함 방식이 달라지면 보이는 결과가 달라질 수 있습니다.

원은 남고 사진만 사라지는 그림

다음은 구조를 설명하기 위한 SVG입니다. 원 하나는 파일 안에 직접 정의하고, 사진은 같은 디렉터리의 leaf.png를 가리킵니다. 실제 사용자 파일을 실행한 결과가 아닌 설명용 예시입니다.

<svg
  xmlns=
    "http://www.w3.org/2000/svg"
     width="320" height="180"
     viewBox="0 0 320 180">
  <circle cx="70" cy="90" r="40"
          fill="#28786a"/>
  <image href="leaf.png"
         x="160" y="40"
         width="100" height="100"/>
</svg>

원의 좌표와 색은 SVG만 있으면 알 수 있습니다. 사진을 그리려면 leaf.png를 추가로 읽어야 합니다. 두 요소의 차이는 벡터와 사진이라는 이름보다 표시에 필요한 내용이 파일 안에 있는가에 있습니다.

MDN의 SVG 이미지 안내는 이미지 맥락에서 JavaScript와 외부 자원 로딩에 제한이 적용된다고 설명합니다. data: URL로 파일 안에 포함한 자원은 외부 참조와 구분합니다. 반면 직접 열기와 object·iframe 같은 문서 임베딩에는 같은 이미지 제한을 그대로 적용하지 않습니다.

따라서 사진이 빠졌다면 먼저 SVG의 href를 봅니다. 외부 참조가 있다면 그 파일도 함께 전달했는지, 주소 기준이 맞는지, 현재 포함 방식에서 읽을 수 있는지를 확인합니다. 새 탭에서 사진이 보였다는 사실만으로 <img>에서도 불러올 것이라고 기대하면 원인 추적이 어긋납니다.

세 경로를 따로 비교합니다

웹페이지에서 다음 세 가지는 서로 다른 사용 방식입니다.

• <img src="sample.svg">: SVG를 이미지로 소비합니다.
• SVG 주소를 새 탭에서 열기: SVG 문서를 탐색합니다.
• HTML 안에 <svg>...</svg> 넣기: SVG 요소가 페이지 문서의 일부가 됩니다.

SVG 2의 처리 모드는 이미지 용도에서 스크립트와 외부 참조를 제한하는 모드를 정의합니다. ‘브라우저가 SVG를 지원하는가’만 묻는 대신 사용 중인 경로가 어느 모드에 해당하는지를 봐야 하는 이유입니다.

예시를 점검한다면 SVG와 leaf.png의 내용을 고정하고 포함 방식만 바꿉니다. 파일도 바꾸고 경로도 바꾸면 어느 변경 때문에 사진이 나타났는지 구분하기 어렵습니다. 별도 파일이 전혀 없는 작은 SVG는 세 경로에서 비슷하게 보일 수 있으므로, 단순한 원 하나가 잘 보였다는 결과로 외부 사진까지 검증했다고 보지는 않습니다.

직접 열어도 사진이 없다면 이미지 맥락의 제한만으로 설명할 수 없습니다. 파일 위치나 상대 주소처럼 문서를 열 때도 필요한 조건을 먼저 확인해야 합니다.

HTML에 붙여 넣으면 해결될까

직접 만든 아이콘을 페이지 CSS와 연결하려는 목적이라면 inline SVG가 적합할 수 있습니다. MDN의 HTML 내 SVG 설명도 이런 포함 방법을 다룹니다.

다만 업로드된 SVG를 <img>로 보이다가 원문을 그대로 HTML에 넣는 변경은 별도 검토가 필요합니다. 브라우저가 제한된 이미지로 읽던 내용을 페이지 문서 안으로 옮기기 때문입니다. 사진 하나를 보이게 하려고 입력 파일의 모든 요소와 동작을 허용할 필요는 없습니다.

정적인 삽화만 필요하다면 원본 제작 단계에서 외부 사진을 내부에 포함하거나, 관리된 변환 환경에서 PNG를 만드는 방법을 검토할 수 있습니다. 선택 기준은 독자가 벡터 확대·편집·상호작용 중 무엇을 필요로 하는지입니다. 편집 기능이 필요하면 원본 관리가 남고, 블로그 썸네일처럼 정적인 표시만 필요하면 배포할 이미지의 구성이 더 단순해집니다.

PNG 변환을 택했을 때는 생성 파일을 열어 원과 사진이 모두 들어 있는지 확인합니다. 글자가 있는 SVG라면 글꼴과 줄바꿈도 봐야 합니다. 누락된 상태를 그대로 PNG로 저장하면 문제를 고정된 이미지로 옮겼을 뿐입니다.

업로드 서비스라면 원본 다운로드도 확인합니다

SVG 미리보기가 <img>에서 조용히 보이는 것과, 사용자가 원본을 새 탭에서 열 수 있는지는 다른 경로입니다. 관리자 화면만 inline으로 넣는 구현도 있을 수 있습니다. 입력 파일이 도달하는 경로를 확인해야 미리보기의 제한을 어디까지 믿을 수 있는지 알 수 있습니다.

OWASP의 파일 업로드 안내는 허용 형식·크기·저장 위치·실제 내용 등을 함께 검토하며, 업로드 요청의 Content-Type을 신뢰할 수 있는 판정으로 사용하지 않도록 설명합니다. SVG 확장자와 MIME 유형만 통과시키는 검사는 원문 전체를 검토한 것이 아닙니다.

이 글은 2026년 9월 28일 확인한 공식 문서에 따른 설명이며 완성된 SVG 정제기를 제공하지 않습니다. 현재 문제를 좁힐 때는 같은 파일, 같은 외부 자원, 다른 포함 방식으로 비교하세요. 원인이 외부 참조에 있다면 필요한 자원을 포함한 배포본을 만들고, 실제 <img> 경로에서 다시 확인하면 됩니다.