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 จริงแสดงอะไร

เรารันไฟล์ใน Chromium 141.0.7390.37 แบบไม่มีหน้าต่างด้วย Playwright 1.56.1 รอภาพในเครื่องโหลด ส่งออก PDF A4 หน้าเดียวสี่ไฟล์ แล้วเรนเดอร์ด้วย Poppler เพื่อตรวจ ภาพจับจอทั้งสองแสดงครบสามเครื่องหมาย

การส่งออกใช้สื่อพิมพ์ สเกล 1 ขนาดกระดาษ CSS ของหน้า และไม่มีหัวหรือท้าย เราเปลี่ยน printBackground ของ Playwright ระหว่าง false กับ true เอกสาร PDF อธิบายตัวเลือกนั้นกับพฤติกรรมสื่อพิมพ์เริ่มต้น ไม่มีไฟล์ใดมี print-color-adjust

เปิดพื้นหลังคืนสำเนาพื้นหลัง แต่ไม่คืน SVG อินไลน์ที่ซ่อน แก้กฎพิมพ์คืน SVG อินไลน์ แต่ไม่เปิดพิมพ์พื้นหลัง งานภาพต้นฉบับไม่เคยเปลี่ยน

การทดสอบยืนยันผลในสภาพแวดล้อม Chromium ที่ระบุและรูปทรงต้นฉบับง่าย ไม่ยืนยันพฤติกรรมเหมือนกันทุกเบราว์เซอร์ ผลจากเครื่องพิมพ์จริง หรือสีตรงเป๊ะ

แก้สาเหตุแล้วตรวจไฟล์ที่บันทึก

เมื่อกฎพิมพ์ซ่อนงาน: แก้กฎตรงองค์ประกอบหรือบรรพบุรุษที่ปัญหาเริ่ม ทดสอบทั้งจอกับพิมพ์ใหม่ เพื่อไม่ให้การซ่อมเอกสารเผยตัวควบคุมอินเทอร์เฟซโดยไม่ตั้งใจ

เมื่อหายเฉพาะพื้นหลัง CSS: เปรียบเทียบผลเมื่อเปิดพิมพ์พื้นหลัง หากกราฟิกเป็นเนื้อหาจำเป็น พิจารณาวางเป็นภาพมีความหมายหรือ SVG อินไลน์ในเลย์เอาต์พิมพ์ แทนการพึ่งพื้นหลังตกแต่งอย่างเดียว ในตัวอย่างควบคุม องค์ประกอบภาพยังเห็นเมื่อปิดพื้นหลัง หน้าของคุณยังต้องตรวจเอง

เมื่อภาพเองโหลดไม่ได้: ตรวจ URL ที่ขอและข้อผิดพลาดทรัพยากรก่อนเปลี่ยนพาธ MDN อธิบายข้อจำกัด SVG ที่ใช้เป็นภาพ รวมข้อจำกัดสคริปต์และทรัพยากรภายนอก แท็บ SVG เดี่ยวกับภาพฝังในหน้าไม่ใช่การทดสอบการพึ่งพาเดียวกัน สำหรับผล WeasyPrint สร้างฝั่งเซิร์ฟเวอร์ ใช้คู่มือแก้การอ้างทรัพยากร SVG แยก

เมื่อผลถูกตัดหรือหายบางส่วน: ลดหน้าให้เหลือกราฟิกที่มีปัญหาและคอนเทนเนอร์ เทียบกล่องพิมพ์ overflow และขอบเขต SVG แล้วกลับคู่มือ SVG ว่างเดิมเพื่อตรวจรูปทรง อย่าใช้สวิตช์พื้นหลังเป็นการซ่อมคลิปทั่วไป

หลังแต่ละการเปลี่ยน เปิด PDF ที่เพิ่งบันทึกและตรวจกราฟิกที่ขนาดต้องการ ตรวจเนื้อหาใกล้กัน การแบ่งหน้า และป้ายมีความหมาย บันทึกเวอร์ชันเบราว์เซอร์กับการตั้งค่าส่งออกที่เกี่ยวข้อง การมี PDF บนดิสก์ไม่พิสูจน์ว่ามีงานภาพ

ใช้เวกเตอร์เมื่อเป็นปัญหาต้นฉบับแยกเท่านั้น

SVG ที่มีพาธใช้ได้อยู่แล้วควรเก็บพาธขณะซ่อมหน้า หากต้นฉบับเดียวเป็นคลิปอาร์ตราสเตอร์และต้องการรูปทรงแก้ไขได้ แปลงคลิปอาร์ตเป็น SVG ด้วย PerfectVector ตรวจตัวอย่าง แล้วปลดล็อกเพื่อแก้และส่งออก SVG เทียบเงารูปร่าง รู และรายละเอียดเล็กกับราสเตอร์ก่อนฝัง

PerfectVector ไม่ซ่อมสไตล์ชีตพิมพ์รอบภาพหรือเลือกค่าพื้นหลังเบราว์เซอร์ หลังแทนไฟล์ภาพใด ให้ทดสอบหน้าสู่ PDF เดิมซ้ำ

จบเมื่องานจำเป็นมองเห็นและไม่ถูกตัดในผลบันทึกตามการตั้งค่าที่ตั้งใจ หากต้องคืนรูปทรงแก้ไขได้จากราสเตอร์ด้วย เตรียม SVG ด้วย PerfectVector แล้วตรวจในหน้าสุดท้าย ใช้ปรู๊ฟจริงเมื่องานส่งมอบเป็นกระดาษ ตัวอย่างนี้ทดสอบเพียง PDF ดิจิทัล

คำถามที่พบบ่อย

print-color-adjust: exact รับประกันว่าพื้นหลัง SVG จะพิมพ์หรือไม่? ไม่ เป็นการขอให้เบราว์เซอร์เก็บรูปลักษณ์ที่ตั้งใจ แต่ตัวเลือกผู้ใช้ทับได้ เอกสาร print-color-adjust ของ MDN ระบุขอบเขตชัด และไม่ย้อนกฎ display ที่ซ่อนองค์ประกอบ

ควรแปลง SVG เป็น PNG เพื่อแก้พิมพ์หรือไม่? หาสาเหตุก่อน เปลี่ยนรูปแบบไฟล์ไม่ลบกฎสื่อพิมพ์หรือเปิดพิมพ์พื้นหลัง เก็บรูปทรง SVG ที่ใช้ได้ขณะตรวจหน้าและการตั้งค่าผลลัพธ์

ทำไมแบบภาพพิมพ์ได้แต่แบบอินไลน์ไม่ได้? หน้าอาจใช้ตัวเลือกต่างกัน ในตัวอย่างควบคุม กฎเฉพาะพิมพ์ซ่อน SVG อินไลน์แต่องค์ประกอบภาพยังเห็น ตรวจคำสั่งจริงแทนสมมติว่าวิธีฝังหนึ่งพิมพ์ดีกว่าเสมอ

แหล่งข้อมูล

1. MDN: การพิมพ์ — อธิบายสไตล์ชีตพิมพ์ สื่อพิมพ์ และลำดับ CSS ที่ยังมีผล
2. MDN: display — นิยามว่าการระงับแสดงส่งผลต่อองค์ประกอบและลูกหลานอย่างไร
3. Playwright: page.pdf — อธิบายตัวควบคุมสื่อพิมพ์และส่งออกพื้นหลังของการทดสอบจริง
4. MDN: SVG ในฐานะภาพ — อธิบายข้อจำกัดที่แยกการฝังภาพจากเอกสาร SVG เดี่ยว
5. MDN: print-color-adjust — อธิบายคำขอรูปลักษณ์และลำดับก่อนของค่าพิมพ์ผู้ใช้