SVG tarayıcıda basılmıyor mu? Baskı düzenini kontrol edin

SVG ekranda görünüyor ancak web sayfasını basarken kayboluyorsa önce sayfanın baskı CSS'sini ve grafiğin CSS arka planı olup olmadığını kontrol edin. Aynı SVG görüntü öğesi olarak korunurken baskı kuralı satır içi kopyayı gizleyebilir veya arka plan ayarı dekoratif kopyayı atlayabilir. Çizimi yeniden oluşturmak iki nedeni de düzeltmez.

Sayfanın ve SVG'sinin kopyasında çalışın. HTML ve stillere, amaçlanan tarayıcının baskı ayarlarına ve kaydedilmiş PDF veya baskı önizlemesine erişim gerekir. Siteyi düzenleyemiyorsanız sahibine gönderilecek yararlı kanıtlar sayfa URL'si, tarayıcı sürümü, eksik grafik ve arka planları açmanın sonucu değiştirip değiştirmediğidir.

Baskı hatasını boş SVG'den ayırın

Önce çizimin normal sayfada göründüğünü doğrulayın. Kaynak orada da boşsa boş SVG tanılamasıyla başlayın. Bu kılavuz eksik geometriyi, boyamayı, kesmeyi ve görüntü alanı sorunlarını ele alır.

Ekrandan baskıya geçiş hatasında sayfanın grafiği nasıl yerleştirdiğini belirleyin:

Bunlar farklı vektör kalitesi türleri değil, ayrı render yollarıdır. Satır içi SVG ve img kılavuzu, her biçimde hangi sayfa stillerinin çizime ulaşabileceğini açıklar.

Kavramsal çizim

Baskı sırasında kullanılan kuralı inceleyin

Baskı stil sayfası veya @media print bloğu sayfayı kâğıt veya PDF çıktısı için değiştirebilir. MDN'nin baskı kılavuzu iki yaklaşımı da belgeler ve CSS seçici özgüllüğünün yine geçerli olduğunu belirtir.

Tarayıcınız bu seçeneği sağlıyorsa geliştirici araçlarında baskı medyasını taklit ederek grafiği inceleyin. Eşleşen kurallara ve hesaplanmış display, visibility, opacity, boyutlar ve boyamaya bakın. Kapsayan öğeleri de inceleyin: display: none alt öğeleri renderdan kaldırır. Alt SVG'yi display: block yapmak gizli kalan üst öğeyi geri getirmez.

Değiştirmeden önce çıktıyı değiştiren kuralı kaydedin. Baskı stil sayfası gezinme simgelerini kasıtlı kaldırırken belge logosunu yanlışlıkla eşleştirebilir. Seçiciyi daraltın veya etkilenen bileşenin baskı kuralını değiştirin. Gizli her öğeyi açan genel geçersiz kılmadan kaçının.

Baskı medyası taklidi CSS davranışını bulmaya yardımcı olur. Gerçek dışa aktarılan PDF'yi açmanın yerini tutmaz.

Aynı özgün SVG ile iki nedeni yeniden üretin

Bu küçük örnek çizimi sabit tutup iki bağımsız kontrolü değiştirir: Yalnızca baskıya özgü görünürlük kuralı ve arka plan baskısı. Bu özgün işareti mark.svg olarak kaydedin:

<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>

Aşağıdaki eksiksiz sayfayı aynı klasöre broken.html olarak kaydedin. Satır içi kopya aynı daire ve üçgeni içerir. Görüntü ve arka planın ikisi de mark.svg yükler.

<!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>

Sayfayı yerel önizleme sunucusu üzerinden açın. Python 3 kuruluysa iki dosyayı içeren klasörden, kullanılabilir bağlantı noktasıyla şu komutu çalıştırın:

python3 -m http.server 8000 --bind 127.0.0.1

http://127.0.0.1:8000/broken.html adresini açın. Üç işaret de ekranda görünmelidir. Tarayıcının baskı önizlemesini açıp arka plan grafikleri kapalı PDF, ardından açık PDF kaydedin. Ayarın adı ve yeri tarayıcıya bağlıdır.

Ardından sayfayı fixed.html olarak kopyalayın. Yalnızca şu kuralı değiştirin:

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

Düzeltilmiş sayfayı yeniden yükleyip iki PDF çıktısını tekrarlayın. Değişiklik örnekteki kasıtlı display: none ayarını tersine çevirir. Gerçek sayfada bileşenin amaçlanan baskı yerleşimine göre hatalı kuralı kaldırın veya daraltın.

Gerçek PDF çıktıları ne gösterdi?

Dosyaları Playwright 1.56.1 ile başsız Chromium 141.0.7390.37'de çalıştırdık. Yerel görüntünün yüklenmesini bekledik, dört tek sayfalı A4 PDF dışa aktardık ve incelemek için Poppler ile render ettik. İki ekran görüntüsü de üç işareti gösterdi.

Çıktılar baskı medyası, ölçek 1, sayfanın CSS kâğıt boyutu ve üst/alt bilgi olmadan oluşturuldu. Playwright'ın printBackground ayarını false ile true arasında değiştirdik; PDF belgeleri seçeneği ve varsayılan baskı medyası davranışını açıklar. İki dosyada da print-color-adjust yoktur.

Arka planları açmak arka plan kopyasını geri getirdi, ancak gizli satır içi SVG'yi getirmedi. Baskı kuralını düzeltmek satır içi SVG'yi geri getirdi, ancak arka plan baskısını açmadı. Kaynak çizim hiç değişmedi.

Bu test, belirtilen Chromium ortamı ve basit özgün geometri için bu sonuçları kanıtlar. Her tarayıcıda aynı davranışı, fiziksel yazıcı çıktısını veya kesin renk eşleşmesini kanıtlamaz.

Nedeni düzeltip kaydedilmiş dosyayı kontrol edin

Baskı kuralı çizimi gizliyorsa: Sorunun başladığı öğe veya üst öğedeki kuralı düzeltin. Belge onarımının arayüz kontrollerini yanlışlıkla açmaması için hem ekran hem baskı görünümünü yeniden test edin.

Yalnızca CSS arka planı eksikse: Arka plan baskısı açık çıktıyla karşılaştırın. Grafik temel içerikse yalnızca dekoratif arka plana güvenmek yerine baskı düzeninde anlamlı görüntü veya satır içi SVG olarak yerleştirmeyi düşünün. Kontrollü örnekte görüntü öğesi arka planlar kapalıyken görünür kaldı; sayfanız yine kendi kontrolünü gerektirir.

Görüntünün kendisi yüklenmiyorsa: Yollarını değiştirmeden önce istenen URL'yi ve kaynak hatalarını kontrol edin. MDN, görüntü olarak kullanılan SVG'nin kısıtlamalarını belgeler; betik ve dış kaynak sınırlamaları da buna dâhildir. Bağımsız SVG sekmesi ile sayfaya gömülmüş görüntü eşdeğer bağımlılık testleri değildir. Sunucuda oluşturulan WeasyPrint çıktısı için ayrı SVG kaynak çözümleme kılavuzunu kullanın.

Sonuç kesiliyor veya kısmen eksikse: Sayfayı hatalı grafik ve kapsayıcısına indirin. Basılı kutularını, taşmayı ve SVG sınırlarını karşılaştırın, ardından geometri kontrolleri için mevcut boş SVG kılavuzuna dönün. Arka plan anahtarını kesme için genel onarım olarak kullanmayın.

Her değişiklikten sonra yeni kaydedilmiş PDF'yi yeniden açıp grafiği amaçlanan boyutta inceleyin. Yakın içeriği, sayfa sonlarını ve anlamlı etiketleri kontrol edin. Tarayıcı sürümünü ve ilgili dışa aktarma ayarlarını kaydedin. PDF dosyasının diskte bulunması, çizimin içinde olduğunun kanıtı değildir.

Vektörleştirmeyi yalnızca ayrı kaynak sorunu için kullanın

Kullanılabilir yollu mevcut SVG, sayfayı düzeltirken yollarını korumalıdır. Tek kaynak raster küçük resimse ve düzenlenebilir şekiller gerekiyorsa PerfectVector ile küçük resmi SVG'ye dönüştürün. Önizlemeyi inceleyin, ardından SVG düzenleme ve dışa aktarma için sonucun kilidini açın. Gömmeden önce silueti, delikleri ve küçük ayrıntıları rasterla karşılaştırın.

PerfectVector çevredeki baskı stil sayfasını onarmaz veya tarayıcının arka plan ayarını seçmez. Herhangi bir çizim varlığını değiştirdikten sonra aynı sayfadan PDF'ye testi tekrarlayın.

Amaçlanan ayarlarda gerekli çizim kaydedilmiş çıktıda görünür ve kesilmemiş olduğunda bitirin. Raster çizimden düzenlenebilir şekiller de kurtarmanız gerekiyorsa PerfectVector ile SVG'yi hazırlayın, ardından son sayfada doğrulayın. Teslim edilecek şey kâğıt çıktıysa fiziksel prova kullanın; bu örnek yalnızca dijital PDF'leri test etti.

Sık sorulan sorular

print-color-adjust: exact SVG arka planımın basılmasını garanti eder mi? Hayır. Tarayıcıdan amaçlanan görünümü korumasını ister, ancak kullanıcı seçenekleri bunu geçersiz kılabilir. MDN'nin print-color-adjust başvurusu bu sınırları açıkça belirtir. Öğeyi gizleyen display kuralını da geri almaz.

Baskıyı düzeltmek için SVG'yi PNG'ye dönüştürmeli miyim? Önce nedeni belirleyin. Dosya biçimini değiştirmek baskı medyası kuralını kaldırmaz veya arka plan baskısını açmaz. Sayfa ve çıktı ayarlarını kontrol ederken kullanılabilir SVG geometrisini koruyun.

Satır içi sürüm basılmazken görüntü sürümü neden basılıyor? Sayfa farklı seçiciler uyguluyor olabilir. Kontrollü örnekte yalnızca baskıya özgü kural satır içi SVG'yi gizlerken görüntü öğesi görünür kalır. Tek gömme yönteminin her zaman daha iyi basıldığını varsaymak yerine gerçek kuralları inceleyin.

Kaynaklar

1. MDN: Baskı — Baskı stil sayfalarını, baskı medyasını ve devam eden CSS kaskadını açıklar.
2. MDN: display — Görünüm baskılanmasının öğe ve alt öğelerine etkisini tanımlar.
3. Playwright: page.pdf — Gerçek testin baskı medyası ve arka plan dışa aktarma kontrollerini belgeler.
4. MDN: Görüntü olarak SVG — Görüntü gömmeyi bağımsız SVG belgesinden ayıran kısıtlamaları anlatır.
5. MDN: print-color-adjust — Görünüm taleplerini ve kullanıcı baskı tercihlerinin önceliğini açıklar.