SVG wird nicht gedruckt? Browser-Drucklayout prüfen

Wenn eine SVG am Bildschirm erscheint, aber beim Drucken einer Webseite verschwindet, prüfe zuerst das Druck-CSS der Seite und ob die Grafik ein CSS-Hintergrund ist. Dieselbe SVG kann als Bildelement erhalten bleiben, während eine Druckregel eine Inlinekopie ausblendet oder eine Hintergrundeinstellung eine dekorative Kopie weglässt. Das Motiv neu zu erstellen, behebt keine dieser Ursachen.

Arbeite an einer Kopie der Seite und ihrer SVG. Du brauchst Zugriff auf HTML und Stile, die Druckeinstellungen des vorgesehenen Browsers und die gespeicherte PDF oder Druckvorschau. Kannst du die Website nicht bearbeiten, sende dem Verantwortlichen als nützliche Hinweise Seiten-URL, Browserversion, fehlende Grafik und die Information, ob aktivierte Hintergründe das Ergebnis ändern.

Unterscheide einen Druckfehler von einer leeren SVG

Bestätige zuerst, dass das Motiv auf der normalen Seite erscheint. Ist die Quelle auch dort leer, beginne mit der Diagnose leerer SVGs. Sie behandelt fehlende Geometrie, Farbe, Beschneidung und Viewportprobleme.

Ermittle bei einem Fehler zwischen Bildschirm und Druck, wie die Seite die Grafik einbindet:

Das sind getrennte Darstellungswege, keine unterschiedlichen Stufen der Vektorqualität. Der Leitfaden zu Inline-SVG und img erklärt, welche Seitenstile das Motiv in welcher Form erreichen können.

Konzeptillustration

Prüfe die beim Drucken verwendete Regel

Ein Druckstylesheet oder ein @media print-Block kann die Seite für Papier- oder PDF-Ausgabe verändern. MDNs Druckleitfaden dokumentiert beide Ansätze und weist darauf hin, dass die CSS-Spezifität weiterhin gilt.

Prüfe die Grafik in den Entwicklertools mit emuliertem Druckmedium, sofern dein Browser diese Option bietet. Betrachte die zutreffenden Regeln und berechneten Werte für display, visibility, opacity, Abmessungen und Farbauftrag. Prüfe auch die umgebenden Elemente: display: none entfernt Nachfahren aus der Darstellung. Der Wert display: block an der untergeordneten SVG kann einen weiterhin versteckten Vorfahren nicht wiederherstellen.

Notiere vor der Änderung die Regel, die die Ausgabe verändert. Ein Druckstylesheet kann Navigationssymbole absichtlich entfernen und dabei versehentlich ein Dokumentlogo erfassen. Grenze den Selektor ein oder ändere die Druckregel der betroffenen Komponente. Vermeide eine globale Überschreibung, die jedes verborgene Element sichtbar macht.

Die Druckmedienemulation hilft, CSS-Verhalten zu finden. Sie ersetzt nicht das Öffnen der tatsächlich exportierten PDF.

Reproduziere zwei Ursachen mit derselben eigenen SVG

Dieses kleine Beispiel hält das Motiv konstant und verändert zwei unabhängige Steuerungen: eine nur beim Drucken gültige Sichtbarkeitsregel und den Hintergrunddruck. Speichere dieses eigene Zeichen als 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>

Speichere die folgende vollständige Seite als broken.html im selben Ordner. Die Inlinekopie enthält denselben Kreis und dasselbe Dreieck. Bild und Hintergrund laden beide 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>

Öffne die Seite über einen lokalen Vorschau-Server. Ist Python 3 installiert, führe diesen Befehl im Ordner mit beiden Dateien aus und nutze einen verfügbaren Port:

python3 -m http.server 8000 --bind 127.0.0.1

Rufe http://127.0.0.1:8000/broken.html auf. Alle drei Zeichen sollten am Bildschirm erscheinen. Öffne die Druckvorschau des Browsers und speichere eine PDF mit deaktivierten Hintergrundgrafiken und eine weitere mit aktivierten. Name und Ort der Einstellung hängen vom Browser ab.

Kopiere die Seite anschließend nach fixed.html. Ändere nur diese Regel:

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

Lade die korrigierte Seite neu und wiederhole beide PDF-Exporte. Die Änderung kehrt das bewusst gesetzte display: none im Beispiel um. Entferne oder begrenze auf einer echten Seite die verursachende Regel entsprechend dem vorgesehenen Drucklayout der Komponente.

Was die tatsächlichen PDF-Exporte zeigten

Wir führten diese Dateien in Headless Chromium 141.0.7390.37 mit Playwright 1.56.1 aus. Wir warteten auf das Laden des lokalen Bilds, exportierten vier einseitige A4-PDFs und renderten diese mit Poppler zur Prüfung. Beide Bildschirmaufnahmen zeigten alle drei Zeichen.

Die Exporte nutzten das Druckmedium, Maßstab 1, die CSS-Papiergröße der Seite und keine Kopf- oder Fußzeilen. Wir änderten Playwrights printBackground zwischen false und true; seine PDF-Dokumentation beschreibt diese Option und das standardmäßige Druckmedienverhalten. Keine Datei enthält print-color-adjust.

Das Aktivieren der Hintergründe stellte die Hintergrundkopie wieder her, aber nicht die ausgeblendete Inline-SVG. Die Korrektur der Druckregel stellte die Inline-SVG wieder her, aktivierte jedoch keinen Hintergrunddruck. Das Quellmotiv blieb unverändert.

Dieser Test belegt diese Ergebnisse für die genannte Chromium-Umgebung und einfache eigene Geometrie. Er belegt weder identisches Verhalten in jedem Browser noch physische Druckerausgabe oder genaue Farbübereinstimmung.

Behebe die Ursache und prüfe die gespeicherte Datei

Wenn eine Druckregel das Motiv versteckt: Korrigiere diese Regel am Element oder Vorfahren, wo das Problem beginnt. Prüfe Bildschirm- und Druckansicht erneut, damit die Dokumentkorrektur nicht unbeabsichtigt Bedienelemente sichtbar macht.

Wenn nur der CSS-Hintergrund fehlt: Vergleiche die Ausgabe mit aktiviertem Hintergrunddruck. Ist die Grafik wesentlicher Inhalt, erwäge im Drucklayout ein inhaltlich aussagekräftiges Bild oder eine Inline-SVG, statt dich allein auf einen dekorativen Hintergrund zu verlassen. Im kontrollierten Beispiel blieb das Bildelement bei deaktivierten Hintergründen sichtbar; deine Seite benötigt trotzdem eine eigene Prüfung.

Wenn das Bild selbst nicht lädt: Prüfe die angeforderte URL und Ressourcenfehler, bevor du seine Pfade änderst. MDN dokumentiert Einschränkungen für als Bild verwendete SVGs, darunter Grenzen für Skripte und externe Ressourcen. Ein eigenständiger SVG-Tab und ein in eine Seite eingebettetes Bild sind keine gleichwertigen Abhängigkeitstests. Nutze für serverseitige WeasyPrint-Ausgabe den separaten Leitfaden zur SVG-Ressourcenauflösung.

Wenn das Ergebnis beschnitten ist oder teilweise fehlt: Reduziere die Seite auf die fehlerhafte Grafik und ihren Container. Vergleiche gedruckte Boxen, Überlauf und SVG-Grenzen und kehre dann zur bestehenden Diagnose leerer SVGs für Geometrieprüfungen zurück. Nutze den Hintergrundschalter nicht als allgemeine Korrektur für Beschneidung.

Öffne nach jeder Änderung eine neu gespeicherte PDF und prüfe die Grafik in ihrer vorgesehenen Größe. Prüfe benachbarte Inhalte, Seitenumbrüche und aussagekräftige Beschriftungen. Halte Browserversion und relevante Exporteinstellungen fest. Eine PDF auf der Festplatte beweist nicht, dass ihr Motiv vorhanden ist.

Nutze Vektorisierung nur bei einem separaten Quellproblem

Eine vorhandene SVG mit nutzbaren Pfaden sollte diese Pfade behalten, während du die Seite korrigierst. Ist die einzige Quelle ein Raster-Clipart und brauchst du bearbeitbare Formen, wandle das Clipart mit PerfectVector in SVG um. Prüfe die Vorschau und schalte das Ergebnis dann für SVG-Bearbeitung und Export frei. Vergleiche Silhouette, Löcher und kleine Details vor dem Einbetten mit dem Rasterbild.

PerfectVector repariert weder das umgebende Druckstylesheet noch wählt es die Hintergrundeinstellung des Browsers. Wiederhole nach dem Austausch eines Motivassets denselben Seite-zu-PDF-Test.

Schließe ab, wenn das notwendige Motiv in der gespeicherten Ausgabe unter den vorgesehenen Einstellungen sichtbar und unbeschnitten ist. Musst du zusätzlich bearbeitbare Formen aus einem Rastermotiv wiederherstellen, bereite die SVG mit PerfectVector vor und prüfe sie anschließend auf der endgültigen Seite. Nutze einen physischen Proof, wenn Papierausgabe geliefert werden soll; dieses Beispiel testete nur digitale PDFs.

Häufige Fragen

Garantiert print-color-adjust: exact, dass mein SVG-Hintergrund gedruckt wird? Nein. Es bittet den Browser, das gewünschte Erscheinungsbild zu erhalten, doch Benutzeroptionen können dies überschreiben. MDNs Referenz zu print-color-adjust nennt diese Grenzen ausdrücklich. Es hebt außerdem keine display-Regel auf, die das Element versteckt.

Sollte ich die SVG in PNG umwandeln, um den Druck zu reparieren? Ermittle zuerst die Ursache. Ein Formatwechsel entfernt weder eine Druckmedienregel noch aktiviert er Hintergrunddruck. Bewahre nutzbare SVG-Geometrie beim Prüfen der Seite und Ausgabeeinstellungen.

Warum wird die Bildversion gedruckt, die Inlineversion aber nicht? Die Seite kann unterschiedliche Selektoren auf sie anwenden. Im kontrollierten Beispiel versteckt eine nur beim Drucken gültige Regel die Inline-SVG, während das Bildelement sichtbar bleibt. Prüfe die tatsächlichen Regeln, statt anzunehmen, eine Einbettungsart drucke immer besser.

Quellen

1. MDN: Drucken — Erklärt Druckstylesheets, Druckmedien und die weiterhin geltende CSS-Kaskade.
2. MDN: display — Definiert die Wirkung der Darstellungsunterdrückung auf ein Element und seine Nachfahren.
3. Playwright: page.pdf — Dokumentiert die im tatsächlichen Test verwendeten Steuerungen für Druckmedium und Hintergrundexport.
4. MDN: SVG als Bild — Beschreibt Einschränkungen, die eine Bildeinbettung von einem eigenständigen SVG-Dokument unterscheiden.
5. MDN: print-color-adjust — Erklärt Darstellungswünsche und den Vorrang der Druckeinstellungen des Benutzers.