SVG не печатается из браузера? Проверьте макет печати

Если SVG виден на экране, но исчезает при печати веб-страницы, сначала проверьте CSS печати страницы и то, является ли графика фоном CSS. Один SVG может сохраниться как элемент изображения, тогда как правило печати скрывает встроенную копию или настройка фона исключает декоративную копию. Пересоздание графики не исправит ни одну причину.

Работайте с копией страницы и её SVG. Нужны доступ к HTML и стилям, настройки печати целевого браузера и сохранённый PDF или предпросмотр печати. Если вы не можете править сайт, полезные сведения для владельца — URL страницы, версия браузера, отсутствующая графика и изменение результата при включении фонов.

Отличайте сбой печати от пустого SVG

Сначала подтвердите, что графика видна на обычной странице. Если источник пуст и там, начните с диагностики пустого SVG. Это руководство рассматривает отсутствие геометрии, краски, проблемы отсечения и области просмотра.

При исчезновении между экраном и печатью определите способ размещения графики:

Это разные пути рендеринга, а не разные уровни качества вектора. Руководство по встроенному SVG и img объясняет, какие стили страницы могут воздействовать на графику в каждом виде.

Концептуальная иллюстрация

Проверьте правило, используемое при печати

Таблица стилей печати или блок @media print могут менять страницу для бумаги или PDF. Руководство MDN по печати описывает оба подхода и отмечает, что специфичность CSS продолжает действовать.

В инструментах разработчика проверьте графику с эмуляцией печатного носителя, если браузер даёт такую возможность. Посмотрите совпавшие правила и вычисленные display, visibility, opacity, размеры и краску. Проверьте и содержащие элементы: display: none убирает потомков из рендеринга. Установка display: block у дочернего SVG не восстановит скрытого предка.

До изменения запишите правило, меняющее результат. Таблица печати может намеренно убирать значки навигации, случайно захватывая логотип документа. Сузьте селектор или измените правило печати затронутого компонента. Избегайте глобального переопределения, показывающего все скрытые элементы.

Эмуляция печатного носителя помогает найти поведение CSS. Она не заменяет открытие реального экспортированного PDF.

Воспроизведите две причины с одним исходным SVG

Небольшой пример сохраняет графику неизменной и меняет два независимых параметра: правило видимости только при печати и печать фона. Сохраните исходный знак как 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>

Сохраните следующую полную страницу как broken.html в той же папке. Встроенная копия содержит те же круг и треугольник. Изображение и фон загружают 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>

Откройте страницу через локальный сервер предпросмотра. Если установлен Python 3, выполните команду из папки с обоими файлами, используя доступный порт:

python3 -m http.server 8000 --bind 127.0.0.1

Перейдите на http://127.0.0.1:8000/broken.html. На экране должны появиться все три знака. Откройте предпросмотр печати браузера и сохраните PDF с отключённой фоновой графикой, затем ещё один с включённой. Название и положение настройки зависят от браузера.

Затем скопируйте страницу в fixed.html. Измените только это правило:

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

Перезагрузите исправленную страницу и повторите оба экспорта PDF. Изменение отменяет намеренное display: none примера. На реальной странице удалите или сузьте ошибочное правило согласно предполагаемому печатному макету компонента.

Что показали реальные экспорты PDF

Мы запустили файлы в headless Chromium 141.0.7390.37 с Playwright 1.56.1. Дождались загрузки локального изображения, экспортировали четыре одностраничных PDF A4 и отрендерили их с Poppler для проверки. Оба снимка экрана показывали все три знака.

Экспорты использовали печатный носитель, масштаб 1, размер бумаги из CSS страницы и отсутствие колонтитулов. Мы меняли printBackground Playwright между false и true; документация PDF описывает этот параметр и стандартное поведение печатного носителя. Ни один файл не содержит print-color-adjust.

Включение фонов вернуло фоновую копию, но не скрытый встроенный SVG. Исправление правила печати вернуло встроенный SVG, но не включило печать фонов. Исходная графика ни разу не менялась.

Тест устанавливает эти результаты для указанной среды Chromium и простой исходной геометрии. Он не устанавливает одинаковое поведение всех браузеров, физический результат принтера или точное совпадение цвета.

Исправьте причину и проверьте сохранённый файл

Когда правило печати скрывает графику: исправьте его у элемента или предка, где начинается проблема. Повторно проверьте экранный и печатный виды, чтобы исправление документа случайно не показало элементы управления интерфейса.

Когда отсутствует только фон CSS: сравните вывод с включённой печатью фонов. Если графика — существенное содержимое, рассмотрите её размещение как смыслового изображения или встроенного SVG в печатном макете вместо зависимости только от декоративного фона. В контролируемом примере элемент изображения оставался видимым без фонов; вашей странице всё равно нужна собственная проверка.

Когда само изображение не загружается: проверьте запрашиваемый URL и ошибки ресурсов до изменения его контуров. MDN описывает ограничения SVG как изображения, включая скрипты и внешние ресурсы. Отдельная вкладка SVG и встроенное в страницу изображение — не равноценные тесты зависимостей. Для серверного вывода WeasyPrint используйте отдельное руководство по разрешению ресурсов SVG.

Когда результат обрезан или частично отсутствует: сократите страницу до проблемной графики и контейнера. Сравните их печатные блоки, переполнение и границы SVG, затем вернитесь к существующему руководству по пустому SVG для проверок геометрии. Не используйте переключатель фона как универсальное исправление отсечения.

После каждого изменения открывайте вновь сохранённый PDF и проверяйте графику в предполагаемом размере. Проверяйте соседнее содержимое, разрывы страниц и значимые подписи. Записывайте версию браузера и соответствующие настройки экспорта. Наличие файла PDF на диске не доказывает наличие в нём графики.

Используйте векторизацию лишь для отдельной проблемы источника

Существующий SVG с пригодными контурами должен сохранить их, пока вы исправляете страницу. Если единственный источник — растровый клипарт и нужны редактируемые фигуры, преобразуйте клипарт в SVG с PerfectVector. Проверьте предпросмотр, затем разблокируйте результат для редактирования и экспорта SVG. Сравните силуэт, отверстия и мелкие детали с растром до встраивания.

PerfectVector не исправляет окружающую таблицу стилей печати и не выбирает настройку фона браузера. После замены любого графического ресурса повторяйте тот же тест страницы в PDF.

Завершайте, когда нужная графика видна и не обрезана в сохранённом результате при предполагаемых настройках. Если также нужно восстановить редактируемые фигуры из растра, подготовьте SVG с PerfectVector, затем проверьте его в конечной странице. Используйте физическую пробу, если передаваемый результат — бумага; пример проверял только цифровые PDF.

Частые вопросы

Гарантирует ли print-color-adjust: exact печать моего фона SVG? Нет. Он просит браузер сохранить предполагаемый вид, но пользовательские параметры могут его переопределить. Справочник MDN по print-color-adjust явно отмечает эти ограничения. Он также не отменяет правило display, скрывающее элемент.

Нужно ли преобразовать SVG в PNG для исправления печати? Сначала определите причину. Смена формата не удаляет правило печатного носителя и не включает печать фонов. Сохраняйте пригодную геометрию SVG при проверке страницы и настроек вывода.

Почему версия изображения печатается, а встроенная — нет? Страница может применять к ним разные селекторы. В контролируемом примере правило только для печати скрывает встроенный SVG, а элемент изображения остаётся видимым. Проверяйте реальные правила, не предполагая, что один способ встраивания всегда печатается лучше.

Источники

1. MDN: Печать — Объясняет таблицы стилей печати, печатный носитель и продолжающий действовать каскад CSS.
2. MDN: display — Определяет влияние подавления отображения на элемент и потомков.
3. Playwright: page.pdf — Описывает управление печатным носителем и экспортом фона реального теста.
4. MDN: SVG как изображение — Описывает ограничения, отличающие встраивание изображения от отдельного документа SVG.
5. MDN: print-color-adjust — Объясняет запросы внешнего вида и приоритет пользовательских настроек печати.