SVG não imprime? Confira o layout de impressão

Se um SVG aparece na tela, mas desaparece quando você imprime uma página web, confira primeiro o CSS de impressão e se o gráfico é um fundo CSS. O mesmo SVG pode permanecer como elemento de imagem enquanto uma regra de impressão esconde a cópia inline ou um ajuste de fundos omite a cópia decorativa. Refazer a arte não corrige nenhuma dessas causas.

Trabalhe em uma cópia da página e do SVG. Você precisa de acesso ao HTML e aos estilos, aos ajustes de impressão do navegador pretendido e ao PDF salvo ou à prévia de impressão. Se não puder editar o site, as evidências úteis para seu responsável são a URL, a versão do navegador, o gráfico ausente e se ativar fundos muda o resultado.

Diferencie falha de impressão de SVG vazio

Primeiro confirme que a arte aparece na página comum. Se a origem também estiver vazia ali, comece pelo diagnóstico de SVG vazio. Esse guia trata de geometria ausente, pintura, recorte e problemas na área de visualização.

Para uma falha entre tela e impressão, identifique como a página coloca o gráfico:

São rotas de renderização diferentes, não tipos distintos de qualidade vetorial. O guia de SVG inline versus img explica quais estilos da página alcançam a arte em cada forma.

Ilustração conceitual

Inspecione a regra usada durante a impressão

Uma folha de estilos de impressão ou um bloco @media print pode mudar a página para papel ou PDF. O guia de impressão da MDN documenta as duas abordagens e observa que a especificidade CSS continua valendo.

Nas ferramentas de desenvolvimento, inspecione o gráfico emulando mídia de impressão se o navegador oferecer essa opção. Veja as regras correspondentes e os valores calculados de display, visibility, opacity, dimensões e pintura. Inspecione também os elementos contêineres: display: none remove descendentes da renderização. Definir o SVG filho como display: block não restaura um ancestral que continua oculto.

Registre a regra que altera a saída antes de modificá-la. Uma folha de impressão pode remover intencionalmente ícones de navegação e atingir sem querer o logo de um documento. Restrinja esse seletor ou mude a regra de impressão do componente afetado. Evite uma sobreposição global que exponha todo elemento oculto.

A emulação de mídia de impressão ajuda a localizar o comportamento CSS. Ela não substitui abrir o PDF realmente exportado.

Reproduza duas causas com o mesmo SVG original

Este pequeno exemplo mantém a arte constante e varia dois controles independentes: uma regra de visibilidade exclusiva de impressão e a impressão de fundos. Salve 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>

Salve a página completa abaixo como broken.html na mesma pasta. A cópia inline contém o mesmo círculo e triângulo. A imagem e o fundo carregam 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>

Abra a página por um servidor local de prévia. Se tiver Python 3 instalado, execute este comando na pasta dos dois arquivos usando uma porta disponível:

python3 -m http.server 8000 --bind 127.0.0.1

Acesse http://127.0.0.1:8000/broken.html. As três marcas devem aparecer na tela. Abra a prévia de impressão do navegador e salve um PDF com gráficos de fundo desativados e outro com eles ativados. O nome e o local do ajuste dependem do navegador.

Depois copie a página para fixed.html. Mude apenas esta regra:

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

Recarregue a página corrigida e repita as duas exportações PDF. A mudança reverte o display: none deliberado do exemplo. Em uma página real, remova ou restrinja a regra problemática conforme o layout de impressão pretendido para o componente.

O que as exportações PDF reais mostraram

Executamos esses arquivos no Chromium 141.0.7390.37 sem interface usando Playwright 1.56.1. Esperamos a imagem local carregar, exportamos quatro PDFs A4 de uma página e renderizamos esses PDFs com Poppler para inspeção. As duas capturas de tela mostraram as três marcas.

As exportações usaram mídia de impressão, escala 1, o tamanho de papel CSS da página e nenhum cabeçalho ou rodapé. Alternamos printBackground do Playwright entre false e true; sua documentação de PDF descreve essa opção e o comportamento padrão de mídia de impressão. Nenhum arquivo contém print-color-adjust.

Ativar fundos restaurou a cópia de fundo, mas não restaurou o SVG inline oculto. Corrigir a regra de impressão restaurou o SVG inline, mas não ativou a impressão de fundos. A arte de origem nunca mudou.

Este teste comprova esses resultados no ambiente Chromium declarado e com geometria original simples. Ele não comprova comportamento idêntico em todo navegador, saída de impressora física ou correspondência exata de cores.

Corrija a causa e confira o arquivo salvo

Quando uma regra de impressão esconde a arte: corrija essa regra no elemento ou ancestral onde o problema começa. Teste novamente as vistas de tela e impressão para que reparar o documento não exponha controles de interface sem querer.

Quando apenas o fundo CSS está ausente: compare a saída com impressão de fundos ativada. Se o gráfico for conteúdo essencial, considere colocá-lo como imagem significativa ou SVG inline no layout de impressão em vez de depender apenas de um fundo decorativo. No exemplo controlado, o elemento de imagem continuou visível com os fundos desativados; sua página ainda precisa da própria conferência.

Quando a imagem em si não carrega: confira a URL solicitada e os erros de recursos antes de mudar seus caminhos. A MDN documenta restrições de SVG usado como imagem, incluindo limitações de scripts e recursos externos. Uma aba SVG independente e uma imagem inserida em uma página não são testes equivalentes de dependências. Para saída WeasyPrint gerada no servidor, use o guia separado de resolução de recursos SVG.

Quando o resultado está cortado ou parcialmente ausente: reduza a página ao gráfico que falha e seu contêiner. Compare suas caixas impressas, transbordamento e limites SVG e depois volte ao guia de SVG vazio para conferir a geometria. Não use o botão de fundos como correção geral para recorte.

Após cada mudança, reabra um PDF recém-salvo e inspecione o gráfico no tamanho pretendido. Confira conteúdo próximo, quebras de página e rótulos relevantes. Registre a versão do navegador e os ajustes de exportação importantes. Um PDF existir no disco não prova que sua arte está presente.

Use vetorização apenas para um problema separado de origem

Um SVG existente com caminhos utilizáveis deve manter esses caminhos enquanto você corrige a página. Se a única origem for clipart raster e você precisar de formas editáveis, converta o clipart em SVG com o PerfectVector. Confira a prévia e desbloqueie o resultado para editar e exportar o SVG. Compare silhueta, furos e pequenos detalhes com o raster antes de inseri-lo.

O PerfectVector não repara a folha de estilos de impressão ao redor nem escolhe o ajuste de fundos do navegador. Após substituir qualquer recurso gráfico, repita o mesmo teste de página para PDF.

Termine quando a arte necessária estiver visível e sem cortes na saída salva sob os ajustes pretendidos. Se também precisar recuperar formas editáveis de arte raster, prepare o SVG com o PerfectVector e confira na página final. Use uma prova física quando a entrega for em papel; este exemplo testou apenas PDFs digitais.

Perguntas frequentes

print-color-adjust: exact garante que meu fundo SVG será impresso? Não. Ele pede ao navegador que preserve a aparência pretendida, mas opções do usuário podem prevalecer. A referência de print-color-adjust da MDN aponta explicitamente esses limites. Ele também não desfaz uma regra de display que esconde o elemento.

Devo converter o SVG em PNG para corrigir a impressão? Identifique primeiro a causa. Mudar o formato não remove uma regra de mídia de impressão nem ativa a impressão de fundos. Preserve a geometria SVG utilizável enquanto confere a página e os ajustes de saída.

Por que a versão de imagem imprime quando a inline não imprime? A página pode aplicar seletores diferentes a elas. No exemplo controlado, uma regra exclusiva de impressão esconde o SVG inline enquanto o elemento de imagem continua visível. Inspecione as regras reais em vez de presumir que um método de inserção sempre imprime melhor.

Fontes

1. MDN: Impressão — Explica folhas de estilos de impressão, mídia de impressão e a continuidade da cascata CSS.
2. MDN: display — Define como a supressão de exibição afeta um elemento e seus descendentes.
3. Playwright: page.pdf — Documenta os controles de mídia de impressão e exportação de fundos usados no teste real.
4. MDN: SVG como imagem — Descreve restrições que distinguem a inserção como imagem de um documento SVG independente.
5. MDN: print-color-adjust — Explica pedidos de aparência e a prioridade das preferências de impressão do usuário.