> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG não imprime? Confira o layout de impressão > Descubra por que um SVG aparece na tela e some ao imprimir no navegador. Teste CSS de impressão, fundos e o PDF real antes de mudar a arte. Source: https://perfectvector.com/pt-BR/blog/svg-not-printing-browser Language: pt-BR Author: Irene Kim Published: 2026-10-15T08:00:00+09:00 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](https://perfectvector.com/pt-BR/blog/svg-opens-blank). 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: | O que você encontra | O que conferir em seguida | | -------------------------------- | ------------------------------------------------------------------------------ | | `` inline na página | Regras de impressão do SVG, de suas formas e de seus ancestrais | | `` | Carregamento da imagem, estilos de impressão do elemento e sua caixa de layout | | `background-image: url(...)` | Ajustes de impressão de fundos e estilos de impressão do elemento | | A arte aparece, mas está cortada | Dimensões impressas, recorte do contêiner e layout da página | São rotas de renderização diferentes, não tipos distintos de qualidade vetorial. O [guia de SVG inline versus img](https://perfectvector.com/pt-BR/blog/inline-svg-vs-img) explica quais estilos da página alcançam a arte em cada forma. **Ilustração conceitual** ![Ilustração comparando três emblemas de folhas na tela com emblemas ausentes ou visíveis em uma página de papel durante a conferência de impressão.](https://perfectvector.com/blog/svg-not-printing-browser/screen-to-print-visibility.webp) *Ilustração: a visibilidade na tela e a saída impressa podem diferir por causa do CSS de impressão e dos ajustes de fundos. O exemplo medido no navegador abaixo usa arquivos originais separados.* ## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display). 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`: ```xml ``` 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`. ```html SVG print check

SVG print check

The same original SVG in three placements.

Inline SVG
Image element
Original geometric mark
CSS background
``` 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: ```bash 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: ```css @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. | Origem | Impressão de fundos | SVG inline | Elemento de imagem | Fundo CSS | | ------------- | ------------------- | ---------- | ------------------ | --------- | | `broken.html` | Desativada | Ausente | Visível | Ausente | | `broken.html` | Ativada | Ausente | Visível | Visível | | `fixed.html` | Desativada | Visível | Visível | Ausente | | `fixed.html` | Ativada | Visível | Visível | Visível | 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](https://playwright.dev/docs/api/class-page#page-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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image), 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](https://perfectvector.com/pt-BR/blog/weasyprint-svg-image-pdf). **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](https://perfectvector.com/pt-BR/clipart-to-svg). 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](https://perfectvector.com/pt-BR/clipart-to-svg) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) — Explica folhas de estilos de impressão, mídia de impressão e a continuidade da cascata CSS. 2. [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Define como a supressão de exibição afeta um elemento e seus descendentes. 3. [Playwright: page.pdf](https://playwright.dev/docs/api/class-page#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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Descreve restrições que distinguem a inserção como imagem de um documento SVG independente. 5. [MDN: print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) — Explica pedidos de aparência e a prioridade das preferências de impressão do usuário. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-not-printing-browser) - [SVG para Canvas: carregue a arte antes de exportar PNG](https://perfectvector.com/pt-BR/blog/svg-canvas-image-export.md) - [SVG.js: importe arte, edite um caminho e exporte SVG](https://perfectvector.com/pt-BR/blog/svgjs-import-export-artwork.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)