L'SVG non si stampa? Controlla il layout di stampa

Se un SVG appare a schermo ma scompare quando stampi una pagina web, controlla prima il CSS di stampa della pagina e se la grafica è uno sfondo CSS. Lo stesso SVG può sopravvivere come elemento immagine mentre una regola di stampa nasconde una copia inline o un'impostazione degli sfondi omette una copia decorativa. Ricostruire la grafica non risolve nessuna delle due cause.

Lavora su una copia della pagina e del suo SVG. Ti serve accesso all'HTML e agli stili, alle impostazioni di stampa del browser previsto e al PDF salvato o all'anteprima di stampa. Se non puoi modificare il sito, le informazioni utili da inviare al proprietario sono URL della pagina, versione del browser, grafica mancante e l'eventuale cambiamento del risultato quando abiliti gli sfondi.

Separa un errore di stampa da un SVG vuoto

Verifica prima che la grafica appaia sulla pagina ordinaria. Se anche lì la sorgente è vuota, parti dalla diagnosi degli SVG vuoti. Quella guida tratta geometria mancante, colorazione, ritaglio e problemi del viewport.

Per un errore tra schermo e stampa, identifica come la pagina inserisce la grafica:

Sono percorsi di rendering separati, non diversi tipi di qualità vettoriale. La guida SVG inline e img spiega quali stili della pagina possono raggiungere la grafica in ogni forma.

Illustrazione concettuale

Esamina la regola usata durante la stampa

Un foglio di stile di stampa o un blocco @media print può modificare la pagina per l'uscita su carta o PDF. La guida MDN alla stampa documenta entrambi gli approcci e ricorda che la specificità CSS continua ad applicarsi.

Negli strumenti di sviluppo, esamina la grafica emulando il supporto di stampa se il browser offre questa opzione. Guarda le regole corrispondenti e i valori calcolati di display, visibility, opacity, dimensioni e colorazione. Esamina anche gli elementi contenitori: display: none rimuove i discendenti dal rendering. Impostare l'SVG figlio su display: block non può ripristinare un antenato che rimane nascosto.

Registra la regola che cambia l'uscita prima di modificarla. Un foglio di stile di stampa può rimuovere intenzionalmente le icone di navigazione ma selezionare per errore il logo di un documento. Restringi quel selettore o cambia la regola di stampa del componente interessato. Evita una sovrascrittura globale che esponga ogni elemento nascosto.

L'emulazione dei media di stampa aiuta a individuare il comportamento CSS. Non sostituisce l'apertura del PDF effettivamente esportato.

Riproduci due cause con lo stesso SVG originale

Questo piccolo esempio mantiene costante la grafica e varia due controlli indipendenti: una regola di visibilità solo per la stampa e la stampa degli sfondi. Salva questo marchio originale come 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>

Salva la seguente pagina completa come broken.html nella stessa cartella. La copia inline contiene lo stesso cerchio e triangolo. L'immagine e lo sfondo caricano entrambi 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>

Apri la pagina tramite un server di anteprima locale. Se hai Python 3 installato, esegui questo comando dalla cartella contenente entrambi i file, usando una porta disponibile:

python3 -m http.server 8000 --bind 127.0.0.1

Visita http://127.0.0.1:8000/broken.html. Tutti e tre i marchi dovrebbero apparire a schermo. Apri l'anteprima di stampa del browser e salva un PDF con la grafica di sfondo disabilitata, poi un altro con essa abilitata. Nome e posizione dell'impostazione dipendono dal browser.

Poi copia la pagina in fixed.html. Cambia soltanto questa regola:

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

Ricarica la pagina corretta e ripeti entrambe le esportazioni PDF. La modifica annulla il display: none deliberato dell'esempio. Su una pagina reale, rimuovi o restringi la regola responsabile in base al layout di stampa previsto per quel componente.

Che cosa hanno mostrato le esportazioni PDF effettive

Abbiamo eseguito questi file in Chromium headless 141.0.7390.37 usando Playwright 1.56.1. Abbiamo atteso il caricamento dell'immagine locale, esportato quattro PDF A4 di una pagina e renderizzato quei PDF con Poppler per esaminarli. Entrambe le schermate mostravano tutti e tre i marchi.

Le esportazioni usavano il supporto di stampa, scala 1, il formato carta CSS della pagina e nessuna intestazione o piè di pagina. Abbiamo cambiato printBackground di Playwright tra false e true; la sua documentazione PDF descrive questa opzione e il comportamento predefinito dei media di stampa. Nessuno dei due file contiene print-color-adjust.

Abilitare gli sfondi ha ripristinato la copia di sfondo, ma non l'SVG inline nascosto. Correggere la regola di stampa ha ripristinato l'SVG inline, ma non ha abilitato la stampa degli sfondi. La grafica sorgente non è mai cambiata.

Questo test stabilisce quei risultati per l'ambiente Chromium indicato e per la semplice geometria originale. Non dimostra un comportamento identico in ogni browser, l'uscita di una stampante fisica o una corrispondenza cromatica esatta.

Correggi la causa, poi controlla il file salvato

Quando una regola di stampa nasconde la grafica: correggi quella regola sull'elemento o sull'antenato in cui inizia il problema. Riprova sia la vista a schermo sia quella di stampa, affinché una riparazione del documento non esponga involontariamente controlli dell'interfaccia.

Quando manca soltanto lo sfondo CSS: confronta l'uscita con la stampa degli sfondi abilitata. Se la grafica è contenuto essenziale, valuta di inserirla come immagine significativa o SVG inline nel layout di stampa, invece di dipendere soltanto da uno sfondo decorativo. Nell'esempio controllato, l'elemento immagine rimaneva visibile con gli sfondi disattivati; la tua pagina richiede comunque un proprio controllo.

Quando l'immagine stessa non si carica: controlla l'URL richiesto e gli errori delle risorse prima di cambiarne i tracciati. MDN documenta le restrizioni degli SVG usati come immagini, comprese le limitazioni a script e risorse esterne. Una scheda SVG autonoma e un'immagine incorporata in una pagina non sono test equivalenti delle dipendenze. Per un'uscita WeasyPrint generata dal server, usa la guida separata alla risoluzione delle risorse SVG.

Quando il risultato è tagliato o parzialmente mancante: riduci la pagina alla grafica problematica e al suo contenitore. Confronta i loro riquadri stampati, l'overflow e i limiti SVG, poi torna alla guida esistente agli SVG vuoti per i controlli geometrici. Non usare l'interruttore degli sfondi come soluzione generale al ritaglio.

Dopo ogni modifica, riapri un PDF appena salvato ed esamina la grafica alle dimensioni previste. Controlla il contenuto vicino, le interruzioni di pagina e le etichette significative. Registra la versione del browser e le impostazioni di esportazione pertinenti. La presenza di un file PDF sul disco non dimostra che la sua grafica sia presente.

Usa la vettorizzazione solo per un problema sorgente separato

Un SVG esistente con tracciati utilizzabili dovrebbe mantenerli mentre correggi la pagina. Se l'unica sorgente è una clipart raster e ti servono forme modificabili, converti la clipart in SVG con PerfectVector. Esamina l'anteprima, poi sblocca il risultato per modificare ed esportare l'SVG. Confronta la sagoma, i fori e i piccoli dettagli con il raster prima di incorporarlo.

PerfectVector non corregge il foglio di stile di stampa circostante e non sceglie l'impostazione degli sfondi del browser. Dopo aver sostituito qualsiasi risorsa grafica, ripeti lo stesso test dalla pagina al PDF.

Concludi quando la grafica necessaria è visibile e non tagliata nell'uscita salvata con le impostazioni previste. Se devi anche recuperare forme modificabili da grafica raster, prepara l'SVG con PerfectVector, poi verificalo nella pagina finale. Usa una prova fisica quando la consegna è su carta; questo esempio ha provato soltanto PDF digitali.

Domande frequenti

print-color-adjust: exact garantisce che il mio sfondo SVG venga stampato? No. Chiede al browser di preservare l'aspetto previsto, ma le opzioni dell'utente possono prevalere. La documentazione MDN di print-color-adjust segnala esplicitamente questi limiti. Inoltre non annulla una regola display che nasconde l'elemento.

Dovrei convertire l'SVG in PNG per risolvere la stampa? Identifica prima la causa. Cambiare formato non rimuove una regola dei media di stampa e non abilita la stampa degli sfondi. Conserva la geometria SVG utilizzabile mentre controlli pagina e impostazioni di uscita.

Perché la versione immagine si stampa mentre quella inline no? La pagina può applicare selettori diversi. Nell'esempio controllato, una regola solo per la stampa nasconde l'SVG inline mentre l'elemento immagine resta visibile. Esamina le regole effettive invece di presumere che un metodo di incorporamento stampi sempre meglio.

Fonti

1. MDN: Stampa — Spiega fogli di stile di stampa, media di stampa e applicazione continua della cascata CSS.
2. MDN: display — Definisce come la soppressione della visualizzazione interessa un elemento e i suoi discendenti.
3. Playwright: page.pdf — Documenta i controlli dei media di stampa e dell'esportazione degli sfondi usati nel test effettivo.
4. MDN: SVG come immagine — Descrive le restrizioni che distinguono l'incorporamento come immagine da un documento SVG autonomo.
5. MDN: print-color-adjust — Spiega le richieste di aspetto e la priorità delle preferenze di stampa dell'utente.