SVG không in trong trình duyệt? Kiểm tra bố cục in

Nếu SVG hiện trên màn hình nhưng biến mất khi in trang web, trước tiên kiểm tra CSS in của trang và hình có phải nền CSS không. Cùng SVG có thể còn khi là phần tử ảnh, trong khi quy tắc in ẩn bản nội tuyến hoặc thiết lập nền bỏ bản trang trí. Dựng lại hình không sửa được nguyên nhân nào trong hai nguyên nhân đó.

Làm trên bản sao trang và SVG của nó. Bạn cần truy cập HTML và kiểu, thiết lập in của trình duyệt dự định, cùng PDF đã lưu hoặc hình xem trước khi in. Nếu không sửa được trang, bằng chứng hữu ích gửi chủ trang là URL, phiên bản trình duyệt, hình bị thiếu và việc bật nền có đổi kết quả không.

Phân biệt lỗi in với SVG trống

Trước hết xác nhận hình xuất hiện trên trang bình thường. Nếu nguồn cũng trống ở đó, bắt đầu bằng chẩn đoán SVG trống. Hướng dẫn đó đề cập thiếu hình học, màu vẽ, clipping và vấn đề khung nhìn.

Với lỗi từ màn hình sang bản in, xác định trang đặt hình thế nào:

Đây là các tuyến kết xuất riêng, không phải loại chất lượng vector khác nhau. Hướng dẫn SVG nội tuyến và img giải thích kiểu trang nào có thể tác động tới hình ở từng dạng.

Minh họa khái niệm

Kiểm tra quy tắc được dùng khi in

Bảng kiểu in hoặc khối @media print có thể đổi trang cho đầu ra giấy hoặc PDF. Hướng dẫn in của MDN mô tả cả hai cách và lưu ý độ ưu tiên bộ chọn CSS vẫn áp dụng.

Trong công cụ phát triển, kiểm tra hình khi giả lập môi trường in nếu trình duyệt có tùy chọn đó. Xem quy tắc khớp và giá trị tính toán của display, visibility, opacity, kích thước và màu vẽ. Kiểm tra cả phần tử chứa: display: none loại phần tử con khỏi kết xuất. Đặt SVG con thành display: block không khôi phục tổ tiên vẫn bị ẩn.

Ghi lại quy tắc đổi đầu ra trước khi sửa. Bảng kiểu in có thể chủ ý bỏ biểu tượng điều hướng nhưng vô tình khớp logo tài liệu. Thu hẹp bộ chọn hoặc đổi quy tắc in của thành phần bị ảnh hưởng. Tránh ghi đè toàn cục làm hiện mọi phần tử ẩn.

Giả lập môi trường in giúp định vị hành vi CSS. Nó không thay việc mở PDF xuất thực tế.

Tái hiện hai nguyên nhân bằng cùng SVG gốc

Ví dụ nhỏ này giữ hình cố định và thay đổi hai điều khiển độc lập: quy tắc hiển thị chỉ khi in và in nền. Lưu dấu gốc này thành 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>

Lưu trang đầy đủ dưới đây thành broken.html trong cùng thư mục. Bản nội tuyến chứa cùng hình tròn và tam giác. Cả ảnh và nền tải 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>

Mở trang qua máy chủ xem trước cục bộ. Nếu đã cài Python 3, chạy lệnh này từ thư mục chứa cả hai tệp với cổng còn trống:

python3 -m http.server 8000 --bind 127.0.0.1

Truy cập http://127.0.0.1:8000/broken.html. Cả ba dấu nên hiện trên màn hình. Mở xem trước khi in của trình duyệt và lưu PDF khi tắt hình nền, rồi một bản khác khi bật. Tên và vị trí thiết lập tùy trình duyệt.

Tiếp theo, sao chép trang thành fixed.html. Chỉ đổi quy tắc này:

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

Tải lại trang đã sửa và lặp cả hai lần xuất PDF. Thay đổi đảo ngược display: none có chủ ý trong ví dụ. Trên trang thực, xóa hoặc thu hẹp quy tắc gây lỗi theo bố cục in dự định của thành phần.

Các bản xuất PDF thực tế cho thấy gì?

Chúng tôi chạy các tệp trong Chromium 141.0.7390.37 không giao diện bằng Playwright 1.56.1. Chúng tôi chờ ảnh cục bộ tải xong, xuất bốn PDF A4 một trang và kết xuất các PDF bằng Poppler để kiểm tra. Cả hai ảnh chụp màn hình đều hiện ba dấu.

Các bản xuất dùng môi trường in, tỷ lệ 1, khổ giấy CSS của trang, không có đầu trang hay chân trang. Chúng tôi đổi printBackground của Playwright giữa false và true; tài liệu PDF mô tả tùy chọn đó và hành vi môi trường in mặc định. Không tệp nào chứa print-color-adjust.

Bật nền khôi phục bản nền nhưng không khôi phục SVG nội tuyến bị ẩn. Sửa quy tắc in khôi phục SVG nội tuyến nhưng không bật in nền. Hình nguồn không hề thay đổi.

Thử nghiệm này xác lập các kết quả đó cho môi trường Chromium đã nêu và hình học gốc đơn giản. Nó không xác lập hành vi giống hệt trong mọi trình duyệt, đầu ra máy in vật lý hoặc khớp màu chính xác.

Sửa nguyên nhân rồi kiểm tra tệp đã lưu

Khi quy tắc in ẩn hình: sửa quy tắc ở phần tử hoặc tổ tiên nơi vấn đề bắt đầu. Thử lại cả chế độ màn hình và in để việc sửa tài liệu không vô tình làm hiện điều khiển giao diện.

Khi chỉ thiếu nền CSS: so sánh đầu ra khi bật in nền. Nếu hình là nội dung thiết yếu, cân nhắc đặt nó thành ảnh có ý nghĩa hoặc SVG nội tuyến trong bố cục in thay vì chỉ phụ thuộc nền trang trí. Trong ví dụ kiểm soát, phần tử ảnh vẫn hiện khi tắt nền; trang của bạn vẫn cần kiểm tra riêng.

Khi chính ảnh không tải được: kiểm tra URL được yêu cầu và lỗi tài nguyên trước khi đổi các đường dẫn của hình. MDN mô tả hạn chế cho SVG dùng làm ảnh, gồm giới hạn tập lệnh và tài nguyên ngoài. Thẻ SVG độc lập và ảnh nhúng trong trang không phải kiểm tra phụ thuộc tương đương. Với đầu ra WeasyPrint tạo phía máy chủ, dùng hướng dẫn phân giải tài nguyên SVG riêng.

Khi kết quả bị cắt hoặc thiếu một phần: rút trang còn hình lỗi và vùng chứa. So sánh hộp in, phần tràn và biên SVG của chúng, rồi quay lại hướng dẫn SVG trống hiện có để kiểm tra hình học. Đừng dùng công tắc nền như cách sửa chung cho clipping.

Sau mỗi thay đổi, mở lại PDF mới lưu và kiểm tra hình ở kích thước dự định. Kiểm tra nội dung gần đó, ngắt trang và nhãn có ý nghĩa. Ghi lại phiên bản trình duyệt và thiết lập xuất liên quan. Tệp PDF tồn tại trên đĩa không chứng minh hình có mặt trong đó.

Chỉ dùng vector hóa cho vấn đề nguồn riêng

SVG hiện có với đường dẫn dùng được nên giữ các đường đó trong khi bạn sửa trang. Nếu nguồn duy nhất là clipart raster và cần hình chỉnh sửa được, đổi clipart sang SVG bằng PerfectVector. Kiểm tra hình xem trước rồi mở khóa kết quả để chỉnh và xuất SVG. So sánh bóng hình, lỗ và chi tiết nhỏ với raster trước khi nhúng.

PerfectVector không sửa bảng kiểu in xung quanh hay chọn thiết lập nền trình duyệt. Sau khi thay bất kỳ tài nguyên hình nào, lặp cùng phép thử trang sang PDF.

Hoàn tất khi hình cần thiết nhìn thấy và không bị cắt trong đầu ra đã lưu theo thiết lập dự định. Nếu cũng cần khôi phục hình chỉnh sửa được từ raster, chuẩn bị SVG bằng PerfectVector, rồi xác minh trong trang cuối. Dùng bản in thử vật lý khi đầu ra giấy là thứ cần giao; ví dụ này chỉ thử PDF số.

Câu hỏi thường gặp

print-color-adjust: exact có bảo đảm nền SVG được in không? Không. Nó yêu cầu trình duyệt giữ hình thức dự định nhưng tùy chọn người dùng có thể ghi đè. Tài liệu print-color-adjust của MDN nêu rõ các giới hạn đó. Nó cũng không đảo quy tắc display ẩn phần tử.

Tôi nên đổi SVG thành PNG để sửa in không? Trước tiên xác định nguyên nhân. Đổi định dạng không bỏ quy tắc môi trường in hay bật in nền. Giữ hình học SVG dùng được khi kiểm tra trang và thiết lập đầu ra.

Vì sao bản ảnh in được còn bản nội tuyến không? Trang có thể áp dụng bộ chọn khác nhau cho chúng. Trong ví dụ kiểm soát, quy tắc chỉ khi in ẩn SVG nội tuyến trong khi phần tử ảnh vẫn hiện. Kiểm tra quy tắc thực tế thay vì cho rằng một cách nhúng luôn in tốt hơn.

Nguồn tham khảo

1. MDN: In — Giải thích bảng kiểu in, môi trường in và thứ tự áp dụng CSS vẫn tiếp diễn.
2. MDN: display — Định nghĩa việc ngăn hiển thị ảnh hưởng phần tử và các phần tử con thế nào.
3. Playwright: page.pdf — Mô tả điều khiển môi trường in và xuất nền trong thử nghiệm thực tế.
4. MDN: SVG dùng làm ảnh — Mô tả hạn chế phân biệt nhúng ảnh với tài liệu SVG độc lập.
5. MDN: print-color-adjust — Giải thích yêu cầu hình thức và ưu tiên của lựa chọn in người dùng.