> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG nie drukuje się w przeglądarce? Sprawdź układ > Ustal, czemu SVG jest na ekranie, lecz znika z wydruku przeglądarki. Sprawdź CSS druku, ustawienia tła i rzeczywisty PDF przed zmianą grafiki. Source: https://perfectvector.com/pl/blog/svg-not-printing-browser Language: pl Author: Irene Kim Published: 2026-10-15T08:00:00+09:00 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](https://perfectvector.com/pl/blog/svg-opens-blank). Omawia brakującą geometrię, malowanie, klipy i obszar widoku. Przy błędzie między ekranem a drukiem ustal sposób osadzenia grafiki: | Co znajdujesz | Co sprawdzić dalej | | --------------------------------- | --------------------------------------------------------- | | Bezpośredni `` na stronie | Reguły druku SVG, jego kształtów i przodków | | `` | Ładowanie obrazu, style druku elementu i jego pole układu | | `background-image: url(...)` | Ustawienia drukowania tła oraz style druku elementu | | Grafika jest, ale zostaje obcięta | Wymiary wydruku, przycinanie kontenera i układ strony | To oddzielne ścieżki renderingu, nie odmienne rodzaje jakości wektorów. [Poradnik SVG bezpośrednio a img](https://perfectvector.com/pl/blog/inline-svg-vs-img) wyjaśnia, które style strony mogą dotrzeć do grafiki w każdej postaci. **Ilustracja koncepcji** ![Ilustracja porównująca trzy emblematy liścia na ekranie z brakującymi lub widocznymi emblematami na papierowej stronie podczas kontroli druku.](https://perfectvector.com/blog/svg-not-printing-browser/screen-to-print-visibility.webp) *Ilustracja: widoczność ekranowa i wynik druku mogą się różnić przez CSS druku i ustawienia tła. Poniższy zmierzony przykład przeglądarkowy używa oddzielnych oryginalnych plików.* ## Sprawdź regułę używaną podczas druku Arkusz druku lub blok `@media print` może zmieniać stronę dla papieru lub PDF. [Poradnik drukowania MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display). 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`: ```xml ``` 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`. ```html SVG print check

SVG print check

The same original SVG in three placements.

Inline SVG
Image element
Original geometric mark
CSS background
``` 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: ```bash 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łę: ```css @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. | Źródło | Drukowanie tła | SVG bezpośrednie | Element obrazu | Tło CSS | | ------------- | -------------- | ---------------- | -------------- | -------- | | `broken.html` | Wyłączone | Brak | Widoczny | Brak | | `broken.html` | Włączone | Brak | Widoczny | Widoczne | | `fixed.html` | Wyłączone | Widoczne | Widoczny | Brak | | `fixed.html` | Włączone | Widoczne | Widoczny | Widoczne | 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](https://playwright.dev/docs/api/class-page#page-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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image), 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](https://perfectvector.com/pl/blog/weasyprint-svg-image-pdf). **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](https://perfectvector.com/pl/clipart-to-svg). 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](https://perfectvector.com/pl/clipart-to-svg), 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing) — Wyjaśnia arkusze druku, media druku i nadal obowiązującą kaskadę CSS. 2. [MDN: display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Definiuje wpływ ukrywania na element i jego potomków. 3. [Playwright: page.pdf](https://playwright.dev/docs/api/class-page#page-pdf) — Dokumentuje kontrolki mediów druku i eksportu tła rzeczywistego testu. 4. [MDN: SVG jako obraz](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Opisuje ograniczenia odróżniające osadzanie obrazu od samodzielnego dokumentu SVG. 5. [MDN: print-color-adjust](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/print-color-adjust) — Wyjaśnia prośby o wygląd i pierwszeństwo preferencji druku użytkownika. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-not-printing-browser) - [SVG na Canvas: wczytaj grafikę przed eksportem PNG](https://perfectvector.com/pl/blog/svg-canvas-image-export.md) - [SVG.js: import grafiki, edycja ścieżki i eksport SVG](https://perfectvector.com/pl/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)