> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG ไม่พิมพ์ในเบราว์เซอร์? ตรวจเลย์เอาต์พิมพ์

> หาสาเหตุ SVG แสดงบนจอแต่หายจากผลพิมพ์เบราว์เซอร์ ทดสอบ CSS พิมพ์ การตั้งค่าพื้นหลัง และ PDF จริงก่อนเปลี่ยนงานภาพ

Source: https://perfectvector.com/th/blog/svg-not-printing-browser

Language: th
Author: Irene Kim
Published: 2026-10-15T08:00:00+09:00

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

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

## แยกการพิมพ์ล้มเหลวจาก SVG ว่าง

ยืนยันก่อนว่างานแสดงบนหน้าปกติ หากต้นฉบับว่างที่นั่นด้วย เริ่มจาก[การวินิจฉัย SVG ว่าง](https://perfectvector.com/th/blog/svg-opens-blank) คู่มือนั้นครอบคลุมรูปทรง สี คลิป และวิวพอร์ตที่มีปัญหา

สำหรับปัญหาจากจอสู่พิมพ์ ระบุว่าหน้าวางกราฟิกอย่างไร:

| สิ่งที่พบ                    | ตรวจต่อ                                                 |
| ---------------------------- | ------------------------------------------------------- |
| `<svg>` อินไลน์ในหน้า        | กฎพิมพ์ของ SVG รูปทรง และองค์ประกอบบรรพบุรุษ            |
| `<img src="artwork.svg">`    | การโหลดภาพ สไตล์พิมพ์ขององค์ประกอบภาพ และกล่องเลย์เอาต์ |
| `background-image: url(...)` | การตั้งค่าพิมพ์พื้นหลังรวมถึงสไตล์พิมพ์ขององค์ประกอบ    |
| งานอยู่แต่ถูกตัด             | ขนาดพิมพ์ การคลิปของคอนเทนเนอร์ และเลย์เอาต์หน้า        |

นี่เป็นเส้นทางเรนเดอร์ต่างกัน ไม่ใช่คุณภาพเวกเตอร์คนละชนิด [คู่มือ SVG อินไลน์เทียบกับ img](https://perfectvector.com/th/blog/inline-svg-vs-img) อธิบายว่าสไตล์หน้าใดเข้าถึงภาพแต่ละรูปแบบได้

**ภาพอธิบายแนวคิด**

![ภาพประกอบเปรียบเทียบสัญลักษณ์ใบไม้สามอันบนจอกับสัญลักษณ์ที่หายหรือยังเห็นบนหน้ากระดาษระหว่างตรวจพิมพ์](https://perfectvector.com/blog/svg-not-printing-browser/screen-to-print-visibility.webp)

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

## ตรวจคำสั่งที่ใช้ระหว่างพิมพ์

สไตล์ชีตพิมพ์หรือบล็อก `@media print` เปลี่ยนหน้าสำหรับกระดาษหรือ PDF ได้ [คู่มือพิมพ์ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) อธิบายทั้งสองวิธีและระบุว่าลำดับความจำเพาะ CSS ยังมีผล

ในเครื่องมือนักพัฒนา ตรวจกราฟิกขณะจำลองสื่อพิมพ์หากเบราว์เซอร์มีตัวเลือก ดูกฎที่จับคู่และค่า `display`, `visibility`, `opacity` ที่คำนวณ ขนาด และการระบาย ตรวจองค์ประกอบที่ครอบด้วย [display: none เอาลูกหลานออกจากการเรนเดอร์](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) การตั้ง SVG ลูกเป็น `display: block` ไม่คืนบรรพบุรุษที่ยังซ่อน

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

การจำลองสื่อพิมพ์ช่วยหาพฤติกรรม CSS ไม่แทนการเปิด PDF ที่ส่งออกจริง

## ทำซ้ำสองสาเหตุด้วย SVG ต้นฉบับเดียว

ตัวอย่างเล็กนี้คงภาพไว้และเปลี่ยนสองตัวควบคุมอิสระ คือกฎมองเห็นเฉพาะพิมพ์กับการพิมพ์พื้นหลัง บันทึกเครื่องหมายต้นฉบับเป็น `mark.svg`:

```xml
<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` ทั้งคู่

```html
<!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 แล้ว รันคำสั่งจากโฟลเดอร์ที่มีสองไฟล์โดยใช้พอร์ตว่าง:

```bash
python3 -m http.server 8000 --bind 127.0.0.1
```

ไปที่ `http://127.0.0.1:8000/broken.html` ทั้งสามเครื่องหมายควรแสดงบนจอ เปิดตัวอย่างพิมพ์ของเบราว์เซอร์แล้วบันทึก PDF เมื่อปิดกราฟิกพื้นหลัง จากนั้นอีกไฟล์เมื่อเปิด ชื่อและตำแหน่งการตั้งค่าขึ้นกับเบราว์เซอร์

จากนั้นคัดลอกหน้าเป็น `fixed.html` เปลี่ยนเฉพาะกฎนี้:

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

โหลดหน้าที่แก้ใหม่และส่งออก PDF ทั้งสองซ้ำ การเปลี่ยนย้อน `display: none` ที่ตั้งใจใส่ในตัวอย่าง บนหน้าจริง ให้ลบหรือจำกัดกฎต้นเหตุโดยอิงเลย์เอาต์พิมพ์ที่ตั้งใจของคอมโพเนนต์

### การส่งออก PDF จริงแสดงอะไร

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

| ต้นฉบับ       | พิมพ์พื้นหลัง | SVG อินไลน์ | องค์ประกอบภาพ | พื้นหลัง CSS |
| ------------- | ------------- | ----------- | ------------- | ------------ |
| `broken.html` | ปิด           | หาย         | มองเห็น       | หาย          |
| `broken.html` | เปิด          | หาย         | มองเห็น       | มองเห็น      |
| `fixed.html`  | ปิด           | มองเห็น     | มองเห็น       | หาย          |
| `fixed.html`  | เปิด          | มองเห็น     | มองเห็น       | มองเห็น      |

การส่งออกใช้สื่อพิมพ์ สเกล 1 ขนาดกระดาษ CSS ของหน้า และไม่มีหัวหรือท้าย เราเปลี่ยน `printBackground` ของ Playwright ระหว่าง `false` กับ `true` [เอกสาร PDF](https://playwright.dev/docs/api/class-page#page-pdf) อธิบายตัวเลือกนั้นกับพฤติกรรมสื่อพิมพ์เริ่มต้น ไม่มีไฟล์ใดมี `print-color-adjust`

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

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

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

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

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

**เมื่อภาพเองโหลดไม่ได้:** ตรวจ URL ที่ขอและข้อผิดพลาดทรัพยากรก่อนเปลี่ยนพาธ [MDN อธิบายข้อจำกัด SVG ที่ใช้เป็นภาพ](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) รวมข้อจำกัดสคริปต์และทรัพยากรภายนอก แท็บ SVG เดี่ยวกับภาพฝังในหน้าไม่ใช่การทดสอบการพึ่งพาเดียวกัน สำหรับผล WeasyPrint สร้างฝั่งเซิร์ฟเวอร์ ใช้[คู่มือแก้การอ้างทรัพยากร SVG](https://perfectvector.com/th/blog/weasyprint-svg-image-pdf) แยก

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

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

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

SVG ที่มีพาธใช้ได้อยู่แล้วควรเก็บพาธขณะซ่อมหน้า หากต้นฉบับเดียวเป็นคลิปอาร์ตราสเตอร์และต้องการรูปทรงแก้ไขได้ [แปลงคลิปอาร์ตเป็น SVG ด้วย PerfectVector](https://perfectvector.com/th/clipart-to-svg) ตรวจตัวอย่าง แล้วปลดล็อกเพื่อแก้และส่งออก SVG เทียบเงารูปร่าง รู และรายละเอียดเล็กกับราสเตอร์ก่อนฝัง

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

จบเมื่องานจำเป็นมองเห็นและไม่ถูกตัดในผลบันทึกตามการตั้งค่าที่ตั้งใจ หากต้องคืนรูปทรงแก้ไขได้จากราสเตอร์ด้วย [เตรียม SVG ด้วย PerfectVector](https://perfectvector.com/th/clipart-to-svg) แล้วตรวจในหน้าสุดท้าย ใช้ปรู๊ฟจริงเมื่องานส่งมอบเป็นกระดาษ ตัวอย่างนี้ทดสอบเพียง PDF ดิจิทัล

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

**print-color-adjust: exact รับประกันว่าพื้นหลัง SVG จะพิมพ์หรือไม่?**
ไม่ เป็นการขอให้เบราว์เซอร์เก็บรูปลักษณ์ที่ตั้งใจ แต่ตัวเลือกผู้ใช้ทับได้ [เอกสาร print-color-adjust ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) ระบุขอบเขตชัด และไม่ย้อนกฎ display ที่ซ่อนองค์ประกอบ

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

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

## แหล่งข้อมูล

1. [MDN: การพิมพ์](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) — อธิบายสไตล์ชีตพิมพ์ สื่อพิมพ์ และลำดับ CSS ที่ยังมีผล
2. [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — นิยามว่าการระงับแสดงส่งผลต่อองค์ประกอบและลูกหลานอย่างไร
3. [Playwright: page.pdf](https://playwright.dev/docs/api/class-page#page-pdf) — อธิบายตัวควบคุมสื่อพิมพ์และส่งออกพื้นหลังของการทดสอบจริง
4. [MDN: SVG ในฐานะภาพ](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — อธิบายข้อจำกัดที่แยกการฝังภาพจากเอกสาร SVG เดี่ยว
5. [MDN: print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) — อธิบายคำขอรูปลักษณ์และลำดับก่อนของค่าพิมพ์ผู้ใช้

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svg-not-printing-browser)
- [SVG เป็น Canvas: โหลดภาพก่อนส่งออก PNG](https://perfectvector.com/th/blog/svg-canvas-image-export.md)
- [SVG.js: นำเข้างาน แก้พาธ และส่งออก SVG](https://perfectvector.com/th/blog/svgjs-import-export-artwork.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)