SVG absent à l'impression ? Vérifie la mise en page

Si un SVG apparaît à l'écran mais disparaît quand tu imprimes une page web, vérifie d'abord le CSS d'impression de la page et si le visuel est un fond CSS. Le même SVG peut subsister comme élément image alors qu'une règle d'impression masque une copie en ligne ou qu'un réglage de fond omet une copie décorative. Reconstruire le visuel ne corrige aucune de ces causes.

Travaille sur une copie de la page et de son SVG. Il te faut l'accès au HTML et aux styles, les réglages d'impression du navigateur prévu et le PDF enregistré ou l'aperçu avant impression. Si tu ne peux pas modifier le site, les éléments utiles à transmettre à son propriétaire sont l'URL de la page, la version du navigateur, le visuel manquant et l'effet de l'activation des arrière-plans sur le résultat.

Distinguer un échec d'impression d'un SVG vide

Confirme d'abord que le visuel apparaît sur la page ordinaire. Si la source est aussi vide à cet endroit, commence par le diagnostic du SVG vide. Ce guide traite de la géométrie absente, de la peinture, de l'écrêtage et des problèmes de fenêtre d'affichage.

Pour un échec entre écran et impression, identifie la façon dont la page place le visuel :

Ce sont des voies de rendu distinctes, pas des qualités vectorielles différentes. Le guide SVG en ligne ou img explique quels styles de page peuvent atteindre le visuel dans chaque forme.

Illustration de principe

Inspecter la règle utilisée à l'impression

Une feuille de style d'impression ou un bloc @media print peut modifier la page pour une sortie papier ou PDF. Le guide d'impression MDN documente les deux approches et précise que la spécificité CSS continue de s'appliquer.

Dans les outils de développement, inspecte le visuel en émulant le média d'impression si ton navigateur propose cette option. Regarde les règles correspondantes et les valeurs calculées de display, visibility, opacity, des dimensions et de la peinture. Inspecte aussi les éléments conteneurs : display: none retire les descendants du rendu. Passer le SVG enfant à display: block ne peut pas rétablir un ancêtre qui reste masqué.

Note la règle qui change la sortie avant de la modifier. Une feuille d'impression peut supprimer volontairement les icônes de navigation tout en ciblant accidentellement un logo de document. Restreins ce sélecteur ou modifie la règle d'impression du composant concerné. Évite une surcharge globale qui révélerait tous les éléments masqués.

L'émulation du média d'impression aide à localiser le comportement CSS. Elle ne remplace pas l'ouverture du véritable PDF exporté.

Reproduire deux causes avec le même SVG original

Ce petit exemple garde le visuel constant et fait varier deux commandes indépendantes : une règle de visibilité propre à l'impression et l'impression des arrière-plans. Enregistre cette marque originale sous 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>

Enregistre la page complète suivante sous broken.html dans le même dossier. La copie en ligne contient le même cercle et le même triangle. L'image et le fond chargent tous deux 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>

Ouvre la page via un serveur d'aperçu local. Si Python 3 est installé, exécute cette commande depuis le dossier contenant les deux fichiers, en utilisant un port disponible :

python3 -m http.server 8000 --bind 127.0.0.1

Va sur http://127.0.0.1:8000/broken.html. Les trois marques doivent apparaître à l'écran. Ouvre l'aperçu avant impression du navigateur et enregistre un PDF avec les arrière-plans désactivés, puis un autre avec les arrière-plans activés. Le nom et l'emplacement du réglage dépendent du navigateur.

Copie ensuite la page sous fixed.html. Modifie uniquement cette règle :

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

Recharge la page corrigée et répète les deux exports PDF. Le changement inverse le display: none délibéré de l'exemple. Sur une véritable page, retire ou restreins la règle fautive selon la mise en page imprimée prévue pour ce composant.

Ce qu'ont montré les véritables exports PDF

Nous avons exécuté ces fichiers dans Chromium 141.0.7390.37 sans interface avec Playwright 1.56.1. Nous avons attendu le chargement de l'image locale, exporté quatre PDF A4 d'une page et rendu ces PDF avec Poppler pour les inspecter. Les deux captures d'écran montraient les trois marques.

Les exports utilisaient le média d'impression, une échelle de 1, le format papier CSS de la page, sans en-tête ni pied de page. Nous avons alterné printBackground de Playwright entre false et true ; sa documentation PDF décrit cette option et le comportement par défaut du média d'impression. Aucun fichier ne contient print-color-adjust.

Activer les arrière-plans a rétabli la copie de fond, mais pas le SVG en ligne masqué. Corriger la règle d'impression a rétabli le SVG en ligne sans activer l'impression des arrière-plans. Le visuel source n'a jamais changé.

Ce test établit ces résultats pour l'environnement Chromium indiqué et la géométrie originale simple. Il n'établit ni un comportement identique dans tous les navigateurs, ni une sortie d'imprimante physique, ni une correspondance exacte des couleurs.

Corriger la cause, puis vérifier le fichier enregistré

Lorsqu'une règle d'impression masque le visuel : corrige cette règle sur l'élément ou l'ancêtre où le problème commence. Reteste les vues écran et impression afin que la réparation du document n'expose pas involontairement des commandes d'interface.

Lorsque seul le fond CSS manque : compare la sortie avec les arrière-plans activés. Si le visuel est un contenu essentiel, envisage de le placer comme image porteuse de sens ou comme SVG en ligne dans la mise en page imprimée plutôt que de dépendre uniquement d'un fond décoratif. Dans l'exemple contrôlé, l'élément image restait visible avec les arrière-plans désactivés ; ta page demande toujours son propre contrôle.

Lorsque l'image elle-même ne charge pas : vérifie l'URL demandée et les erreurs de ressources avant de modifier ses tracés. MDN documente les restrictions des SVG utilisés comme images, notamment les limites de scripts et de ressources externes. Un onglet SVG autonome et une image intégrée à une page ne sont pas des tests de dépendances équivalents. Pour une sortie WeasyPrint générée côté serveur, utilise le guide distinct de résolution des ressources SVG.

Lorsque le résultat est coupé ou partiellement absent : réduis la page au visuel défaillant et à son conteneur. Compare leurs boîtes imprimées, leur débordement et les limites SVG, puis reviens au guide existant du SVG vide pour les contrôles géométriques. N'utilise pas l'option d'arrière-plan comme réparation générale de l'écrêtage.

Après chaque changement, rouvre un PDF nouvellement enregistré et inspecte le visuel à sa taille prévue. Vérifie le contenu voisin, les sauts de page et les libellés significatifs. Garde une trace de la version du navigateur et des réglages d'export pertinents. La présence d'un PDF sur le disque ne prouve pas que son visuel s'y trouve.

Utiliser la vectorisation seulement pour un problème de source distinct

Un SVG existant avec des tracés exploitables doit conserver ces tracés pendant que tu corriges la page. Si la seule source est un clipart matriciel et qu'il te faut des formes modifiables, convertis le clipart en SVG avec PerfectVector. Inspecte l'aperçu, puis déverrouille le résultat pour l'édition SVG et l'export. Compare la silhouette, les trous et les petits détails au matriciel avant de l'intégrer.

PerfectVector ne répare pas la feuille de style d'impression environnante et ne choisit pas le réglage d'arrière-plan du navigateur. Après le remplacement d'une ressource graphique, répète le même test de page vers PDF.

Termine lorsque le visuel nécessaire est visible et non coupé dans la sortie enregistrée avec les réglages prévus. Si tu dois aussi récupérer des formes modifiables à partir d'un visuel matriciel, prépare le SVG avec PerfectVector, puis vérifie-le dans la page finale. Utilise une épreuve physique si le papier est le livrable ; cet exemple n'a testé que des PDF numériques.

FAQ

print-color-adjust: exact garantit-il l'impression de mon fond SVG ? Non. Il demande au navigateur de préserver l'apparence voulue, mais les options utilisateur peuvent le remplacer. La référence MDN de print-color-adjust précise explicitement ces limites. Il n'annule pas non plus une règle display qui masque l'élément.

Dois-je convertir le SVG en PNG pour corriger l'impression ? Identifie d'abord la cause. Changer de format ne retire pas une règle de média d'impression et n'active pas l'impression des arrière-plans. Préserve la géométrie SVG exploitable tout en vérifiant la page et les réglages de sortie.

Pourquoi la version image s'imprime-t-elle et pas la version en ligne ? La page peut leur appliquer des sélecteurs différents. Dans l'exemple contrôlé, une règle propre à l'impression masque le SVG en ligne tandis que l'élément image reste visible. Inspecte les règles réelles plutôt que de supposer qu'un mode d'intégration s'imprime toujours mieux.

Sources

1. MDN : impression — Explique les feuilles de style d'impression, les médias d'impression et la cascade CSS qui reste applicable.
2. MDN : display — Définit l'effet de la suppression de l'affichage sur un élément et ses descendants.
3. Playwright : page.pdf — Documente les commandes de média d'impression et d'export des arrière-plans du test réel.
4. MDN : SVG comme image — Décrit les restrictions qui distinguent l'intégration d'image d'un document SVG autonome.
5. MDN : print-color-adjust — Explique les demandes d'apparence et la priorité des préférences d'impression de l'utilisateur.