브라우저에서 SVG가 인쇄되지 않나요? 인쇄 레이아웃 확인하기

웹 페이지에서 화면에는 SVG가 보이지만 인쇄하면 사라진다면, 먼저 페이지의 인쇄 CSS와 해당 그림이 CSS 배경인지 확인하세요. 같은 SVG라도 이미지 요소로는 유지되는 반면, 인쇄 규칙 때문에 인라인 사본이 숨겨지거나 배경 설정 때문에 장식용 사본이 빠질 수 있습니다. 그림을 다시 만들어도 이 두 원인은 해결되지 않습니다.

페이지와 SVG의 사본으로 작업하세요. HTML과 스타일, 사용할 브라우저의 인쇄 설정, 저장된 PDF나 인쇄 미리보기를 확인할 수 있어야 합니다. 사이트를 편집할 수 없다면 페이지 URL, 브라우저 버전, 빠진 그림, 배경을 켰을 때 결과가 바뀌는지를 소유자에게 전달하면 도움이 됩니다.

인쇄 실패와 빈 SVG 구분하기

먼저 일반 페이지에서 그림이 보이는지 확인하세요. 그곳에서도 원본이 비어 있다면 빈 SVG 진단부터 시작합니다. 이 가이드는 없는 도형, 채색, 클리핑, 뷰포트 문제를 다룹니다.

화면에서는 보이는데 인쇄에서 실패한다면 페이지가 그림을 어떻게 배치하는지 확인하세요.

이는 서로 다른 렌더링 방식이며 벡터 품질의 종류가 다른 것은 아닙니다. 인라인 SVG와 img 비교 가이드는 각 형태에서 어떤 페이지 스타일이 그림에 적용될 수 있는지 설명합니다.

개념 삽화

인쇄 중 적용되는 규칙 살펴보기

인쇄 스타일시트나 @media print 블록은 종이나 PDF 출력용으로 페이지를 바꿀 수 있습니다. MDN 인쇄 가이드는 두 방식을 문서화하며 CSS 명시도가 계속 적용된다고 설명합니다.

브라우저가 인쇄 미디어 에뮬레이션을 제공한다면 개발자 도구에서 해당 모드로 그림을 확인하세요. 일치하는 규칙과 계산된 display, visibility, opacity, 치수, 채색을 살펴봅니다. 그림을 담는 요소도 확인해야 합니다. display: none은 하위 요소도 렌더링에서 제거합니다. 자식 SVG를 display: block으로 설정해도 상위 요소가 계속 숨겨져 있으면 복구할 수 없습니다.

수정하기 전에 출력을 바꾸는 규칙을 기록하세요. 인쇄 스타일시트가 내비게이션 아이콘을 의도적으로 제거하면서 문서 로고에도 잘못 적용될 수 있습니다. 선택자 범위를 좁히거나 영향을 받는 구성 요소의 인쇄 규칙을 바꾸세요. 숨겨진 모든 요소를 노출하는 전역 덮어쓰기는 피합니다.

인쇄 미디어 에뮬레이션은 CSS 동작을 찾는 데 도움이 됩니다. 실제로 내보낸 PDF를 여는 작업을 대신하지는 않습니다.

같은 원본 SVG로 두 원인 재현하기

이 작은 예제는 그림을 고정하고 서로 독립적인 두 설정을 바꿉니다. 인쇄 전용 표시 규칙과 배경 인쇄입니다. 직접 만든 다음 마크를 mark.svg로 저장하세요.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
  <circle cx="60" cy="40" r="28" fill="#087f8c"/>
  <path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>

다음의 완전한 페이지를 같은 폴더에 broken.html로 저장하세요. 인라인 사본에도 같은 원과 삼각형이 들어 있습니다. 이미지와 배경은 모두 mark.svg를 로드합니다.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG print check</title>
<style>
  @page { size: A4; margin: 12mm; }
  body { margin: 0; font: 16px/1.4 sans-serif; color: #111; }
  h1 { margin: 0 0 12px; font-size: 22px; }
  p { margin: 0 0 16px; }
  .row { display: grid; grid-template-columns: 160px 120px;
         gap: 16px; align-items: center; height: 100px;
         border-bottom: 1px solid #ccc; }
  .slot, .slot svg, .slot img { width: 120px; height: 80px; }
  .slot svg, .slot img { display: block; }
  .background { background: url("mark.svg") center / contain no-repeat; }
  @media print { .inline svg { display: none; } }
</style>
<h1>SVG print check</h1>
<p>The same original SVG in three placements.</p>
<div class="row"><span>Inline SVG</span><div class="slot inline">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
  <circle cx="60" cy="40" r="28" fill="#087f8c"/>
  <path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>
</div></div>
<div class="row"><span>Image element</span><div class="slot image">
  <img src="mark.svg" width="120" height="80" alt="Original geometric mark">
</div></div>
<div class="row"><span>CSS background</span><div class="slot background"></div></div>
</html>

로컬 미리보기 서버를 통해 페이지를 여세요. Python 3가 설치되어 있다면 두 파일이 있는 폴더에서 사용 가능한 포트로 다음 명령을 실행합니다.

python3 -m http.server 8000 --bind 127.0.0.1

http://127.0.0.1:8000/broken.html에 접속하세요. 화면에 마크 세 개가 모두 보여야 합니다. 브라우저의 인쇄 미리보기를 열고 배경 그래픽을 끈 상태로 PDF를 저장한 다음, 켠 상태로 하나 더 저장하세요. 설정의 이름과 위치는 브라우저마다 다릅니다.

그다음 페이지를 fixed.html로 복사하세요. 다음 규칙만 바꿉니다.

@media print { .inline svg { display: block; } }

수정 페이지를 새로고침하고 두 가지 PDF 내보내기를 반복하세요. 이 변경은 예제에서 의도적으로 넣은 display: none을 되돌립니다. 실제 페이지에서는 해당 구성 요소의 의도한 인쇄 레이아웃에 맞춰 문제 규칙을 제거하거나 범위를 좁히세요.

실제 PDF 내보내기 결과

Playwright 1.56.1을 사용해 헤드리스 Chromium 141.0.7390.37에서 이 파일들을 실행했습니다. 로컬 이미지가 로드되기를 기다린 다음 한 페이지짜리 A4 PDF 네 개를 내보냈고, 점검을 위해 Poppler로 렌더링했습니다. 두 화면 캡처에는 모두 마크 세 개가 보였습니다.

내보내기는 인쇄 미디어, 배율 1, 페이지의 CSS 용지 크기를 사용했으며 머리글이나 바닥글은 없었습니다. Playwright의 printBackground를 false와 true 사이에서 바꿨습니다. PDF 문서는 이 옵션과 기본 인쇄 미디어 동작을 설명합니다. 두 파일 모두 print-color-adjust를 포함하지 않습니다.

배경을 켜자 배경 사본은 복구됐지만 숨겨진 인라인 SVG는 복구되지 않았습니다. 인쇄 규칙을 고치자 인라인 SVG는 복구됐지만 배경 인쇄가 켜지지는 않았습니다. 원본 그림은 한 번도 바꾸지 않았습니다.

이 시험은 명시한 Chromium 환경과 단순한 자체 제작 도형에서의 결과를 확인합니다. 모든 브라우저의 동일한 동작, 실제 프린터 출력, 정확한 색 일치를 입증하지는 않습니다.

원인을 고친 다음 저장 파일 확인하기

인쇄 규칙이 그림을 숨길 때: 문제가 시작되는 요소나 상위 요소에서 규칙을 고치세요. 문서를 고치다가 인터페이스 컨트롤을 뜻하지 않게 노출하지 않도록 화면과 인쇄 보기를 모두 다시 시험합니다.

CSS 배경만 빠질 때: 배경 인쇄를 켠 출력과 비교하세요. 그림이 필수 콘텐츠라면 장식용 배경에만 의존하지 말고 인쇄 레이아웃에 의미 있는 이미지나 인라인 SVG로 배치하는 방식을 고려합니다. 통제된 예제에서는 배경을 꺼도 이미지 요소가 보였지만, 실제 페이지는 별도로 확인해야 합니다.

이미지 자체가 로드되지 않을 때: 경로를 바꾸기 전에 요청 URL과 리소스 오류를 확인하세요. MDN은 이미지로 사용하는 SVG의 제한을 문서화하고 있으며 스크립트와 외부 리소스 제한을 포함합니다. 독립된 SVG 탭과 페이지에 내장된 이미지는 같은 의존성 시험이 아닙니다. 서버에서 생성한 WeasyPrint 출력이라면 별도의 SVG 리소스 해석 가이드를 사용하세요.

결과가 잘리거나 일부만 없을 때: 페이지를 문제가 있는 그림과 그 컨테이너만 남도록 줄이세요. 인쇄된 상자, overflow, SVG 경계를 비교한 뒤 기존 빈 SVG 가이드로 돌아가 도형을 점검합니다. 배경 토글을 클리핑의 일반적인 해결책으로 사용하지 마세요.

변경할 때마다 새로 저장한 PDF를 다시 열고 의도한 크기에서 그림을 확인하세요. 주변 콘텐츠, 페이지 나눔, 의미 있는 레이블을 점검합니다. 브라우저 버전과 관련 내보내기 설정을 기록해 두세요. 디스크에 PDF 파일이 있다는 사실만으로 그 안에 그림이 있다고 입증되지는 않습니다.

별도의 원본 문제에만 벡터화 사용하기

사용 가능한 경로가 있는 기존 SVG는 페이지를 고치는 동안 그 경로를 유지해야 합니다. 유일한 원본이 래스터 클립아트이고 편집 가능한 도형이 필요하다면 PerfectVector로 클립아트를 SVG로 변환하세요. 미리보기를 확인한 뒤 결과를 잠금 해제해 SVG를 편집하고 내보냅니다. 삽입하기 전에 실루엣, 구멍, 작은 디테일을 래스터와 비교하세요.

PerfectVector는 주변 인쇄 스타일시트를 고치거나 브라우저의 배경 설정을 선택하지 않습니다. 그림 파일을 교체한 뒤에는 같은 페이지-PDF 시험을 반복하세요.

의도한 설정으로 저장한 출력에 필요한 그림이 잘리지 않고 보이면 작업을 마칩니다. 래스터 그림에서 편집 가능한 도형도 복원해야 한다면 PerfectVector로 SVG를 준비한 다음 최종 페이지에서 확인하세요. 종이 출력이 최종 결과물이라면 실제 교정본을 사용합니다. 이 예제는 디지털 PDF만 시험했습니다.

자주 묻는 질문

print-color-adjust: exact를 쓰면 SVG 배경 인쇄가 보장되나요? 아닙니다. 의도한 외관을 유지하도록 브라우저에 요청하지만 사용자 옵션이 이를 덮어쓸 수 있습니다. MDN print-color-adjust 참고 문서는 이 한계를 명시합니다. 요소를 숨기는 display 규칙을 되돌리지도 않습니다.

인쇄 문제를 고치려면 SVG를 PNG로 바꿔야 하나요? 먼저 원인을 파악하세요. 파일 형식을 바꿔도 인쇄 미디어 규칙이 제거되거나 배경 인쇄가 켜지지는 않습니다. 페이지와 출력 설정을 확인하는 동안 사용 가능한 SVG 도형을 보존하세요.

이미지 버전은 인쇄되는데 인라인 버전은 인쇄되지 않는 이유는 무엇인가요? 페이지가 서로 다른 선택자를 적용할 수 있습니다. 통제된 예제에서는 인쇄 전용 규칙이 인라인 SVG를 숨기는 반면 이미지 요소는 계속 보입니다. 어느 삽입 방식이 항상 더 잘 인쇄된다고 가정하지 말고 실제 규칙을 확인하세요.

출처

1. MDN: 인쇄 — 인쇄 스타일시트, 인쇄 미디어, 계속 적용되는 CSS 캐스케이드를 설명합니다.
2. MDN: display — 표시 억제가 요소와 하위 요소에 미치는 영향을 정의합니다.
3. Playwright: page.pdf — 실제 시험에 사용한 인쇄 미디어와 배경 내보내기 컨트롤을 설명합니다.
4. MDN: 이미지로 사용하는 SVG — 이미지 삽입과 독립 SVG 문서를 구분하는 제한을 설명합니다.
5. MDN: print-color-adjust — 외관 유지 요청과 사용자 인쇄 기본 설정의 우선순위를 설명합니다.