¿El SVG no se imprime? Revisa el diseño de impresión

Si un SVG aparece en pantalla pero desaparece al imprimir una página web, revisa primero el CSS de impresión y si el gráfico es un fondo CSS. El mismo SVG puede sobrevivir como elemento de imagen mientras una regla de impresión oculta la copia en línea o un ajuste de fondos omite una copia decorativa. Reconstruir la ilustración no corrige ninguna de esas causas.

Trabaja sobre una copia de la página y su SVG. Necesitas acceso al HTML y los estilos, los ajustes de impresión del navegador previsto y el PDF guardado o la vista previa de impresión. Si no puedes editar el sitio, envía a su responsable la URL, la versión del navegador, el gráfico faltante y si activar los fondos cambia el resultado.

Distingue un fallo de impresión de un SVG vacío

Primero confirma que la ilustración aparece en la página normal. Si también está vacía allí, empieza por el diagnóstico de SVG vacío. Esa guía trata problemas de geometría ausente, pintado, recorte y área de visualización.

Para un fallo entre pantalla e impresión, identifica cómo coloca la página el gráfico:

Son rutas de renderizado diferentes, no tipos distintos de calidad vectorial. La guía de SVG en línea frente a img explica qué estilos de página alcanzan la ilustración en cada formato.

Ilustración conceptual

Inspecciona la regla usada al imprimir

Una hoja de estilos de impresión o un bloque @media print pueden cambiar la página para papel o PDF. La guía de impresión de MDN documenta ambos enfoques y señala que la especificidad CSS sigue aplicándose.

En las herramientas de desarrollo, inspecciona el gráfico mientras emulas medios de impresión si tu navegador lo permite. Mira las reglas coincidentes y los valores calculados de display, visibility, opacity, dimensiones y pintado. Inspecciona también los contenedores: display: none excluye del renderizado a los descendientes. Poner el SVG hijo en display: block no puede restaurar un antecesor que sigue oculto.

Registra la regla que cambia la salida antes de modificarla. Una hoja de impresión puede quitar intencionalmente iconos de navegación y afectar por accidente al logo de un documento. Haz más específico ese selector o cambia la regla de impresión del componente afectado. Evita una anulación global que muestre todos los elementos ocultos.

Emular medios de impresión ayuda a localizar el comportamiento CSS. No sustituye abrir el PDF realmente exportado.

Reproduce dos causas con el mismo SVG original

Este pequeño ejemplo mantiene constante la ilustración y cambia dos controles independientes: una regla de visibilidad solo para impresión y la impresión de fondos. Guarda esta marca original como 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>

Guarda la página completa siguiente como broken.html en la misma carpeta. La copia en línea contiene el mismo círculo y triángulo. Tanto la imagen como el fondo cargan 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>

Abre la página mediante un servidor local de vista previa. Si tienes Python 3 instalado, ejecuta este comando desde la carpeta de ambos archivos, usando un puerto disponible:

python3 -m http.server 8000 --bind 127.0.0.1

Visita http://127.0.0.1:8000/broken.html. Las tres marcas deben aparecer en pantalla. Abre la vista previa de impresión del navegador y guarda un PDF con los gráficos de fondo desactivados y otro con ellos activados. El nombre y la ubicación del ajuste dependen del navegador.

Después copia la página a fixed.html. Cambia solo esta regla:

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

Recarga la página corregida y repite ambas exportaciones PDF. El cambio revierte el display: none deliberado del ejemplo. En una página real, elimina o acota la regla causante según el diseño de impresión previsto para ese componente.

Qué mostraron las exportaciones PDF reales

Ejecutamos estos archivos en Chromium 141.0.7390.37 sin interfaz mediante Playwright 1.56.1. Esperamos a que cargara la imagen local, exportamos cuatro PDF A4 de una página y los renderizamos con Poppler para inspeccionarlos. Ambas capturas de pantalla mostraron las tres marcas.

Las exportaciones usaron medios de impresión, escala 1, el tamaño de papel CSS de la página y ningún encabezado ni pie. Cambiamos printBackground de Playwright entre false y true; su documentación PDF describe esa opción y el comportamiento predeterminado de medios de impresión. Ningún archivo contiene print-color-adjust.

Activar fondos restauró la copia de fondo, pero no el SVG en línea oculto. Corregir la regla de impresión restauró el SVG en línea, pero no activó la impresión de fondos. La ilustración original nunca cambió.

Esta prueba demuestra esos resultados en el entorno Chromium indicado y con geometría original sencilla. No demuestra comportamiento idéntico en todos los navegadores, salida de impresora física ni correspondencia exacta del color.

Corrige la causa y revisa el archivo guardado

Si una regla de impresión oculta la ilustración: corrígela en el elemento o antecesor donde empieza el problema. Vuelve a probar las vistas de pantalla e impresión para que reparar el documento no muestre accidentalmente controles de interfaz.

Si solo falta el fondo CSS: compara la salida con la impresión de fondos activada. Si el gráfico es contenido esencial, considera colocarlo como imagen significativa o SVG en línea en el diseño de impresión en lugar de depender únicamente de un fondo decorativo. En el ejemplo controlado, el elemento de imagen siguió visible con los fondos desactivados; tu página todavía necesita su propia comprobación.

Si la propia imagen no carga: revisa la URL solicitada y los errores de recursos antes de modificar sus trazados. MDN documenta restricciones del SVG usado como imagen, incluidas limitaciones de scripts y recursos externos. Una pestaña SVG independiente y una imagen incrustada en una página no son pruebas equivalentes de dependencias. Para salida WeasyPrint generada en servidor, usa la guía independiente de resolución de recursos SVG.

Si el resultado está recortado o falta una parte: reduce la página al gráfico que falla y su contenedor. Compara sus cajas impresas, desbordamiento y límites SVG y después vuelve a la guía de SVG vacío para revisar la geometría. No uses el interruptor de fondos como arreglo general del recorte.

Después de cada cambio, reabre un PDF recién guardado y revisa el gráfico al tamaño previsto. Comprueba el contenido cercano, los saltos de página y las etiquetas significativas. Registra la versión del navegador y los ajustes de exportación relevantes. Que exista un PDF en disco no demuestra que contenga la ilustración.

Usa la vectorización solo para otro problema del original

Un SVG existente con trazados utilizables debe conservarlos mientras arreglas la página. Si solo tienes clipart ráster y necesitas formas editables, convierte el clipart a SVG con PerfectVector. Revisa la vista previa y desbloquea el resultado para editar y exportar el SVG. Compara silueta, huecos y detalles pequeños con el ráster antes de incrustarlo.

PerfectVector no repara la hoja de estilos de impresión circundante ni elige los ajustes de fondos del navegador. Después de sustituir cualquier recurso gráfico, repite la misma prueba de página a PDF.

Termina cuando la ilustración necesaria quede visible y sin recortes en la salida guardada con los ajustes previstos. Si además necesitas recuperar formas editables de una imagen ráster, prepara el SVG con PerfectVector y verifícalo en la página final. Usa una prueba física cuando entregues papel; este ejemplo solo probó PDF digitales.

Preguntas frecuentes

¿print-color-adjust: exact garantiza que se imprima mi fondo SVG? No. Pide al navegador conservar la apariencia prevista, pero las opciones del usuario pueden prevalecer. La referencia print-color-adjust de MDN señala expresamente esos límites. Tampoco deshace una regla de display que oculta el elemento.

¿Debo convertir el SVG a PNG para arreglar la impresión? Identifica primero la causa. Cambiar el formato no elimina una regla de medios de impresión ni activa la impresión de fondos. Conserva la geometría SVG utilizable mientras revisas la página y los ajustes de salida.

¿Por qué se imprime la versión de imagen y no la versión en línea? La página puede aplicarles selectores distintos. En el ejemplo controlado, una regla exclusiva de impresión oculta el SVG en línea mientras el elemento de imagen permanece visible. Inspecciona las reglas reales en lugar de asumir que un método de incrustación siempre imprime mejor.

Fuentes

1. MDN: Impresión — Explica las hojas de estilos de impresión, los medios de impresión y la continuidad de la cascada CSS.
2. MDN: display — Define cómo la supresión de display afecta a un elemento y sus descendientes.
3. Playwright: page.pdf — Documenta los controles de medios de impresión y exportación de fondos usados en la prueba real.
4. MDN: SVG como imagen — Describe restricciones que distinguen la incrustación como imagen de un documento SVG independiente.
5. MDN: print-color-adjust — Explica las solicitudes de apariencia y la prioridad de las preferencias de impresión del usuario.