SVG Tidak Tercetak? Periksa Tata Letak Cetak Browser

Jika SVG terlihat di layar tetapi hilang saat halaman web dicetak, periksa CSS cetak halaman dan apakah grafis berupa latar CSS terlebih dahulu. SVG yang sama dapat tetap muncul sebagai elemen gambar, sementara aturan cetak menyembunyikan salinan inline atau pengaturan latar menghilangkan salinan dekoratif. Membuat ulang ilustrasi tidak memperbaiki kedua penyebab tersebut.

Kerjakan salinan halaman dan SVG-nya. Anda membutuhkan akses ke HTML dan gaya, pengaturan cetak browser yang dituju, serta PDF tersimpan atau pratinjau cetak. Jika situs tidak dapat Anda edit, bukti berguna untuk pemiliknya adalah URL halaman, versi browser, grafis yang hilang, dan apakah mengaktifkan latar mengubah hasil.

Bedakan kegagalan cetak dari SVG kosong

Pertama, pastikan ilustrasi muncul pada halaman biasa. Jika sumber juga kosong di sana, mulai dari diagnosis SVG kosong. Panduan tersebut mencakup geometri yang hilang, pengecatan, clipping, dan masalah viewport.

Untuk kegagalan dari layar ke cetak, identifikasi cara halaman menempatkan grafis:

Ini merupakan jalur render berbeda, bukan jenis kualitas vektor berbeda. Panduan SVG inline versus img menjelaskan gaya halaman yang dapat menjangkau ilustrasi dalam setiap bentuk.

Ilustrasi konsep

Periksa aturan yang digunakan saat mencetak

Stylesheet cetak atau blok @media print dapat mengubah halaman untuk keluaran kertas atau PDF. Panduan pencetakan MDN mendokumentasikan kedua pendekatan dan menyebutkan bahwa spesifisitas CSS tetap berlaku.

Dalam alat pengembang, periksa grafis sambil mengemulasikan media cetak jika browser menyediakan opsi tersebut. Lihat aturan yang cocok serta nilai terhitung display, visibility, opacity, dimensi, dan pengecatan. Periksa juga elemen kontainernya: display: none menghapus turunan dari render. Menetapkan SVG anak ke display: block tidak dapat memulihkan leluhur yang tetap tersembunyi.

Catat aturan yang mengubah keluaran sebelum memodifikasinya. Stylesheet cetak mungkin sengaja menghapus ikon navigasi, tetapi tidak sengaja juga cocok dengan logo dokumen. Persempit selektor atau ubah aturan cetak komponen terdampak. Hindari pengesampingan global yang menampilkan semua elemen tersembunyi.

Emulasi media cetak membantu menemukan perilaku CSS. Itu tidak menggantikan pembukaan PDF hasil ekspor sebenarnya.

Reproduksi dua penyebab dengan SVG asli yang sama

Contoh kecil ini menjaga ilustrasi tetap sama dan mengubah dua kontrol independen: aturan visibilitas khusus cetak dan pencetakan latar. Simpan tanda asli ini sebagai 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>

Simpan halaman lengkap berikut sebagai broken.html dalam folder yang sama. Salinan inline berisi lingkaran dan segitiga yang sama. Gambar dan latar sama-sama memuat 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>

Buka halaman melalui server pratinjau lokal. Jika Python 3 terpasang, jalankan perintah ini dari folder yang memuat kedua berkas, menggunakan port yang tersedia:

python3 -m http.server 8000 --bind 127.0.0.1

Kunjungi http://127.0.0.1:8000/broken.html. Ketiga tanda seharusnya muncul di layar. Buka pratinjau cetak browser dan simpan PDF dengan grafis latar dinonaktifkan, lalu PDF lain dengan latar diaktifkan. Nama dan lokasi pengaturan bergantung pada browser.

Berikutnya, salin halaman menjadi fixed.html. Ubah hanya aturan ini:

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

Muat ulang halaman yang diperbaiki dan ulangi kedua ekspor PDF. Perubahan ini membalik display: none yang sengaja ditetapkan dalam contoh. Pada halaman nyata, hapus atau persempit aturan bermasalah berdasarkan tata letak cetak yang dituju untuk komponen itu.

Hasil ekspor PDF sebenarnya

Kami menjalankan berkas ini dalam Chromium 141.0.7390.37 tanpa antarmuka menggunakan Playwright 1.56.1. Kami menunggu gambar lokal dimuat, mengekspor empat PDF A4 satu halaman, lalu merender PDF dengan Poppler untuk diperiksa. Kedua tangkapan layar menunjukkan ketiga tanda.

Ekspor menggunakan media cetak, skala 1, ukuran kertas CSS halaman, tanpa header atau footer. Kami mengubah printBackground Playwright antara false dan true; dokumentasi PDF-nya menjelaskan opsi itu serta perilaku media cetak bawaan. Kedua berkas tidak memuat print-color-adjust.

Mengaktifkan latar memulihkan salinan latar tetapi tidak memulihkan SVG inline yang tersembunyi. Memperbaiki aturan cetak memulihkan SVG inline tetapi tidak mengaktifkan pencetakan latar. Ilustrasi sumber tidak pernah berubah.

Uji ini membuktikan hasil tersebut untuk lingkungan Chromium yang disebutkan dan geometri asli sederhana. Uji tidak membuktikan perilaku identik di setiap browser, hasil printer fisik, atau kecocokan warna yang tepat.

Perbaiki penyebabnya, lalu periksa berkas tersimpan

Ketika aturan cetak menyembunyikan ilustrasi: perbaiki aturan pada elemen atau leluhur tempat masalah dimulai. Uji ulang tampilan layar dan cetak agar perbaikan dokumen tidak secara tidak sengaja menampilkan kontrol antarmuka.

Ketika hanya latar CSS yang hilang: bandingkan keluaran dengan pencetakan latar diaktifkan. Jika grafis merupakan konten penting, pertimbangkan menempatkannya sebagai gambar bermakna atau SVG inline pada tata letak cetak alih-alih hanya bergantung pada latar dekoratif. Dalam contoh terkontrol, elemen gambar tetap terlihat saat latar nonaktif; halaman Anda tetap perlu pemeriksaannya sendiri.

Ketika gambar itu sendiri gagal dimuat: periksa URL yang diminta dan kesalahan sumber daya sebelum mengubah jalurnya. MDN mendokumentasikan batasan SVG sebagai gambar, termasuk batasan skrip dan sumber daya eksternal. Tab SVG mandiri dan gambar yang ditanamkan di halaman bukan pengujian dependensi yang setara. Untuk keluaran WeasyPrint yang dihasilkan server, gunakan panduan resolusi sumber daya SVG terpisah.

Ketika hasil terpotong atau sebagian hilang: sederhanakan halaman hingga hanya tersisa grafis bermasalah dan kontainernya. Bandingkan kotak cetak, overflow, serta batas SVG, lalu kembali ke panduan SVG kosong untuk pemeriksaan geometri. Jangan memakai pengaturan latar sebagai perbaikan umum untuk clipping.

Setelah setiap perubahan, buka kembali PDF yang baru disimpan dan periksa grafis pada ukuran yang dituju. Periksa konten sekitarnya, pemisah halaman, dan label bermakna. Catat versi browser serta pengaturan ekspor yang relevan. Keberadaan berkas PDF di disk bukan bukti bahwa ilustrasinya tersedia.

Gunakan vektorisasi hanya untuk masalah sumber yang terpisah

SVG yang sudah memiliki jalur layak seharusnya mempertahankan jalur tersebut saat Anda memperbaiki halaman. Jika satu-satunya sumber berupa clipart raster dan Anda memerlukan bentuk yang dapat diedit, konversikan clipart ke SVG dengan PerfectVector. Periksa pratinjau, lalu buka kunci hasil untuk pengeditan serta ekspor SVG. Bandingkan siluet, lubang, dan detail kecil dengan raster sebelum menanamkannya.

PerfectVector tidak memperbaiki stylesheet cetak halaman atau memilih pengaturan latar browser. Setelah mengganti aset ilustrasi apa pun, ulangi pengujian halaman-ke-PDF yang sama.

Selesaikan ketika ilustrasi yang diperlukan terlihat tanpa terpotong dalam keluaran tersimpan dengan pengaturan yang dituju. Jika Anda juga perlu memulihkan bentuk yang dapat diedit dari ilustrasi raster, siapkan SVG dengan PerfectVector, lalu verifikasi di halaman akhir. Gunakan pruf fisik ketika keluaran kertas menjadi hasil penyerahan; contoh ini hanya menguji PDF digital.

Pertanyaan umum

Apakah print-color-adjust: exact menjamin latar SVG saya tercetak? Tidak. Itu meminta browser mempertahankan tampilan yang dituju, tetapi opsi pengguna dapat mengesampingkannya. Referensi print-color-adjust MDN secara jelas menyebutkan batas tersebut. Itu juga tidak membatalkan aturan display yang menyembunyikan elemen.

Haruskah saya mengonversi SVG ke PNG untuk memperbaiki pencetakan? Identifikasi penyebabnya terlebih dahulu. Mengubah format berkas tidak menghapus aturan media cetak atau mengaktifkan pencetakan latar. Pertahankan geometri SVG yang layak sambil memeriksa halaman dan pengaturan keluaran.

Mengapa versi gambar tercetak sedangkan versi inline tidak? Halaman mungkin menerapkan selektor berbeda pada keduanya. Dalam contoh terkontrol, aturan khusus cetak menyembunyikan SVG inline sementara elemen gambar tetap terlihat. Periksa aturan sebenarnya, jangan menganggap satu metode penanaman selalu tercetak lebih baik.

Sumber

1. MDN: Pencetakan — Menjelaskan stylesheet cetak, media cetak, dan cascade CSS yang tetap berlaku.
2. MDN: display — Mendefinisikan pengaruh penonaktifan tampilan terhadap elemen dan turunannya.
3. Playwright: page.pdf — Mendokumentasikan kontrol media cetak serta ekspor latar pada pengujian sebenarnya.
4. MDN: SVG sebagai gambar — Menjelaskan batasan yang membedakan penanaman gambar dari dokumen SVG mandiri.
5. MDN: print-color-adjust — Menjelaskan permintaan tampilan dan prioritas preferensi cetak pengguna.