SVG nie drukuje się w przeglądarce? Sprawdź układ

Jeśli SVG widać na ekranie, lecz znika przy drukowaniu strony, najpierw sprawdź CSS druku i to, czy grafika jest tłem CSS. Ten sam SVG może pozostać jako element obrazu, podczas gdy reguła druku ukrywa kopię osadzoną bezpośrednio lub ustawienie tła pomija kopię dekoracyjną. Odtworzenie grafiki nie naprawi żadnej z tych przyczyn.

Pracuj na kopii strony i SVG. Potrzebujesz dostępu do HTML i stylów, ustawień druku docelowej przeglądarki oraz zapisanego PDF lub podglądu druku. Jeśli nie możesz edytować witryny, przydatne dowody dla właściciela to URL strony, wersja przeglądarki, brakująca grafika i informacja, czy włączenie teł zmienia wynik.

Oddziel błąd drukowania od pustego SVG

Najpierw potwierdź widoczność grafiki na zwykłej stronie. Jeśli źródło też jest tam puste, zacznij od diagnozy pustego SVG. Omawia brakującą geometrię, malowanie, klipy i obszar widoku.

Przy błędzie między ekranem a drukiem ustal sposób osadzenia grafiki:

To oddzielne ścieżki renderingu, nie odmienne rodzaje jakości wektorów. Poradnik SVG bezpośrednio a img wyjaśnia, które style strony mogą dotrzeć do grafiki w każdej postaci.

Ilustracja koncepcji

Sprawdź regułę używaną podczas druku

Arkusz druku lub blok @media print może zmieniać stronę dla papieru lub PDF. Poradnik drukowania MDN dokumentuje oba podejścia i przypomina, że specyficzność CSS nadal obowiązuje.

W narzędziach deweloperskich sprawdź grafikę podczas emulacji mediów druku, jeśli przeglądarka daje taką opcję. Przejrzyj dopasowane reguły i obliczone display, visibility, opacity, wymiary oraz malowanie. Sprawdź też kontenery: display: none usuwa potomków z renderingu. Ustawienie dziecku SVG display: block nie przywróci ukrytego przodka.

Zapisz regułę zmieniającą wynik przed jej modyfikacją. Arkusz druku może celowo usuwać ikony nawigacji, a przypadkiem obejmować logo dokumentu. Zawęź selektor lub zmień regułę druku danego komponentu. Unikaj globalnej poprawki odsłaniającej każdy ukryty element.

Emulacja mediów druku pomaga znaleźć zachowanie CSS. Nie zastępuje otwarcia rzeczywistego eksportowanego PDF.

Odtwórz dwie przyczyny tym samym oryginalnym SVG

Mały przykład zachowuje grafikę i zmienia dwa niezależne mechanizmy: regułę widoczności tylko dla druku i drukowanie tła. Zapisz oryginalny znak jako 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>

Zapisz kompletną stronę poniżej jako broken.html w tym samym folderze. Kopia bezpośrednia zawiera to samo koło i trójkąt. Obraz i tło wczytują 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>

Otwórz stronę przez lokalny serwer podglądu. Jeśli masz Python 3, uruchom polecenie z folderu obu plików, używając wolnego portu:

python3 -m http.server 8000 --bind 127.0.0.1

Odwiedź http://127.0.0.1:8000/broken.html. Wszystkie trzy znaki powinny być na ekranie. Otwórz podgląd druku przeglądarki i zapisz PDF z wyłączoną grafiką tła, a potem drugi z włączoną. Nazwa i położenie ustawienia zależą od przeglądarki.

Następnie skopiuj stronę do fixed.html. Zmień tylko tę regułę:

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

Odśwież poprawioną stronę i powtórz oba eksporty PDF. Zmiana odwraca celowe display: none przykładu. Na rzeczywistej stronie usuń lub zawęź błędną regułę według docelowego układu druku komponentu.

Co pokazały rzeczywiste eksporty PDF

Uruchomiliśmy pliki w bezokienkowym Chromium 141.0.7390.37 przez Playwright 1.56.1. Zaczekaliśmy na lokalny obraz, wyeksportowaliśmy cztery jednostronicowe PDF A4 i wyrenderowaliśmy je Popplerem do kontroli. Oba zrzuty ekranowe pokazywały wszystkie trzy znaki.

Eksporty używały mediów druku, skali 1, rozmiaru papieru z CSS strony, bez nagłówków i stopek. Zmienialiśmy printBackground Playwright między false i true; dokumentacja PDF opisuje tę opcję i domyślne zachowanie mediów druku. Żaden plik nie zawiera print-color-adjust.

Włączenie teł przywróciło kopię tła, ale nie ukryty bezpośredni SVG. Naprawa reguły druku przywróciła bezpośredni SVG, ale nie włączyła drukowania tła. Grafika źródłowa się nie zmieniała.

Test potwierdza te wyniki w podanym środowisku Chromium i prostej oryginalnej geometrii. Nie potwierdza identycznego zachowania każdej przeglądarki, fizycznego wydruku ani dokładnej zgodności kolorów.

Napraw przyczynę, potem sprawdź zapisany plik

Gdy reguła druku ukrywa grafikę: popraw regułę elementu lub przodka, od którego zaczyna się problem. Powtórz widok ekranu i druku, aby naprawa dokumentu nie odsłoniła przypadkiem kontrolek interfejsu.

Gdy brakuje tylko tła CSS: porównaj wynik z włączonym drukowaniem tła. Jeśli grafika jest istotną treścią, rozważ umieszczenie jej jako znaczącego obrazu lub bezpośredniego SVG w układzie druku, zamiast polegać wyłącznie na dekoracyjnym tle. W kontrolowanym przykładzie obraz był widoczny przy wyłączonych tłach; Twoja strona nadal wymaga własnej kontroli.

Gdy sam obraz się nie ładuje: sprawdź żądany URL i błędy zasobów przed zmianą ścieżek grafiki. MDN dokumentuje ograniczenia SVG używanego jako obraz, w tym skryptów i zewnętrznych zasobów. Oddzielna karta SVG i obraz osadzony na stronie nie są równoważnymi testami zależności. Dla serwerowego wyjścia WeasyPrint użyj oddzielnego poradnika rozwiązywania zasobów SVG.

Gdy wynik jest przycięty lub częściowo brakujący: ogranicz stronę do wadliwej grafiki i kontenera. Porównaj ich pola druku, przepełnienie i granice SVG, potem wróć do istniejącego poradnika pustego SVG po kontrole geometrii. Nie używaj przełącznika tła jako ogólnej naprawy przycinania.

Po każdej zmianie otwórz nowo zapisany PDF i sprawdź grafikę w docelowym rozmiarze. Sprawdź sąsiednią treść, podziały stron i znaczące etykiety. Zapisz wersję przeglądarki i istotne ustawienia eksportu. Istnienie PDF na dysku nie dowodzi obecności grafiki.

Używaj wektoryzacji tylko dla osobnego problemu źródła

Istniejący SVG z użytecznymi ścieżkami powinien je zachować podczas naprawy strony. Jeśli jedynym źródłem jest rastrowy clipart i potrzebujesz edytowalnych kształtów, przekonwertuj clipart na SVG w PerfectVector. Sprawdź podgląd, potem odblokuj wynik do edycji i eksportu SVG. Porównaj sylwetkę, otwory i małe detale z rastrem przed osadzeniem.

PerfectVector nie naprawia otaczającego arkusza druku ani nie wybiera ustawienia tła przeglądarki. Po zastąpieniu zasobu graficznego powtórz ten sam test strony do PDF.

Zakończ, gdy niezbędna grafika jest widoczna i nieprzycięta w zapisanym wyjściu przy docelowych ustawieniach. Jeśli potrzebujesz również odzyskać edytowalne kształty z rastra, przygotuj SVG w PerfectVector, a potem zweryfikuj go na końcowej stronie. Użyj fizycznego proofa przy dostawie papierowej; przykład testował tylko cyfrowe PDF.

Częste pytania

Czy print-color-adjust: exact gwarantuje wydruk tła SVG? Nie. Prosi przeglądarkę o zachowanie zamierzonego wyglądu, ale opcje użytkownika mogą to nadpisać. Opis print-color-adjust MDN wyraźnie wskazuje te ograniczenia. Nie cofa też reguły display ukrywającej element.

Czy przekonwertować SVG na PNG, by naprawić drukowanie? Najpierw ustal przyczynę. Zmiana formatu nie usuwa reguły mediów druku ani nie włącza drukowania tła. Zachowaj użyteczną geometrię SVG, sprawdzając stronę i ustawienia wyjściowe.

Dlaczego obraz drukuje się, a wersja bezpośrednia nie? Strona może stosować do nich inne selektory. W kontrolowanym przykładzie reguła tylko dla druku ukrywa bezpośredni SVG, a element obrazu pozostaje widoczny. Sprawdź rzeczywiste reguły, zamiast zakładać, że jeden sposób osadzania zawsze drukuje lepiej.

Źródła

1. MDN: Drukowanie — Wyjaśnia arkusze druku, media druku i nadal obowiązującą kaskadę CSS.
2. MDN: display — Definiuje wpływ ukrywania na element i jego potomków.
3. Playwright: page.pdf — Dokumentuje kontrolki mediów druku i eksportu tła rzeczywistego testu.
4. MDN: SVG jako obraz — Opisuje ograniczenia odróżniające osadzanie obrazu od samodzielnego dokumentu SVG.
5. MDN: print-color-adjust — Wyjaśnia prośby o wygląd i pierwszeństwo preferencji druku użytkownika.