React-pdf-SVG-Logos: Pfade im PDF darstellen

Für ein kleines SVG-Logo in @react-pdf/renderer baust du die Grafik mit dessen Komponenten Svg, Path und anderen unterstützten Komponenten auf. Gib dem äußeren Svg eine explizite Größe und behalte die viewBox der Quelle bei. Die Image-Dokumentation des Renderers führt PNG und JPG als Eingaben auf; eine SVG-URL in Image einzusetzen ist nicht der hier beschriebene Vektorweg.

Dieser Leitfaden verwendet ein vollständiges Node-Beispiel mit einem quadratischen Emblem und einer Öffnung in seiner Mitte. Wir haben das PDF mit festgelegten Abhängigkeiten gerendert und das Ergebnis geprüft. Das Beispiel trennt drei leicht verwechselbare Dinge: die Quellgrafik, den Komponentenbaum und die Platzierungsgröße im PDF.

Prüfe, welches React-PDF-Paket du verwendest

Dieser Artikel erzeugt Dokumente mit @react-pdf/renderer. Das separat benannte Paket react-pdf zeigt vorhandene PDFs an. Prüfe den Import in deiner Datei, bevor du eine Lösung aus einem Suchergebnis kopierst.

Verwende innerhalb eines Document des Renderers Komponenten, die dieser Renderer exportiert. Die kleingeschriebenen Browserelemente svg und path gehören zu einer anderen Rendering-Umgebung. Die offizielle SVG-Komponentenreferenz definiert Svg als Viewport-Container und zeigt importierte React-pdf-Formen darin.

Die Image-Referenz beschreibt Bitmap-Eingaben. Ein PNG als Ausweichlösung kann nützlich sein, wenn eine komplexe Darstellung wichtiger ist als der Erhalt der Vektorgeometrie. Das ändert die Ausgabedatei; bewahre deshalb die Vektor-Masterdatei separat auf.

Es gibt außerdem ein offizielles Paket @react-pdf/svg. Seine README dokumentiert parseSvg(), das einen Baum aus primitiven Knoten zurückgibt und Attributnamen in camelCase umwandelt. Laut Dokumentation werden nicht unterstützte Elemente mit einer Warnung übersprungen. Das beschreibt den Parser-Vertrag und verspricht nicht, dass jedes Browser-SVG identisch gerendert wird. Das folgende Beispiel verwendet explizite Komponenten, damit Geometrie und Farbgebung leicht zu prüfen bleiben.

Rendere ein minimales Logo, bevor du dein eigenes importierst

Wir haben dieses Beispiel mit @react-pdf/renderer 4.9.0, React 19.2.4 und Node 22.19.0 ausgeführt. Diese Versionen kennzeichnen die getestete Konfiguration; sie garantieren nicht das Verhalten eines anderen Abhängigkeitsbaums.

Installiere in einem neuen Verzeichnis die beiden Laufzeitpakete:

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

Speichere dies als logo.mjs und führe dann node logo.mjs aus. Es verwendet React.createElement, damit Node es ohne JSX-Buildschritt ausführen kann.

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

Das äußere und das innere Quadrat teilen sich einen zusammengesetzten Pfad. fillRule: 'evenodd' lässt das innere Quadrat offen, sodass das helle Rechteck darunter sichtbar wird. Keine weiße Fläche verdeckt die Mitte. Diese Öffnung ist eine nützliche Prüfung, wenn du die Testgrafik durch ein Logo mit Binnenräumen oder Aussparungen ersetzt.

Die SVG-Koordinaten erstrecken sich in jede Richtung über 100 Einheiten, während der platzierte Viewport 144 mal 144 misst. viewBox beschreibt das Koordinatensystem der Zeichnung; width und height beschreiben den dargestellten Viewport. Behalte diesen Unterschied im Blick, wenn du die Größe eines Logos anpasst. Die offizielle Svg-Prop-Tabelle dokumentiert diese Einstellungen und preserveAspectRatio.

Prüfe neben der Vorschau auch das gespeicherte PDF

Unser Test erzeugte eine A4-Seite mit dem blaugrünen quadratischen Ring nahe der linken oberen Ecke. Wir renderten die Datei mit Poppler und prüften visuell, ob der helle Hintergrund durch die Öffnung sichtbar war. Popplers pdfimages -list logo.pdf meldete in diesem isolierten Dokument keine eingebetteten Bilder.

Dieses Ergebnis ist bewusst eng begrenzt. Es beschreibt diese ausschließlich aus Pfaden bestehende Testgrafik. Es belegt nicht, dass ein Dokument mit Fotos, eingebetteten SVG-Bildern oder nicht unterstützten Effekten vollständig vektoriell ist.

Wenn Poppler auf deinem Rechner verfügbar ist, ermöglichen diese Befehle zwei unterschiedliche Prüfungen:

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

Der zweite Befehl erzeugt eine Rastervorschau zur visuellen Prüfung; er verwandelt das ursprüngliche PDF nicht in eine Bitmap. Prüfe in dieser Vorschau Öffnung, Ecken, Farben und Platzierung und öffne dann das gespeicherte PDF in dem Betrachter, den dein Empfänger verwendet. Eine scharf aussehende Vorschau allein beweist nicht, dass das Originaldokument Pfade enthält: Auch eine große Bitmap kann scharf aussehen.

Für eine gründlichere Prüfung untersuchst du die Zeichenanweisungen und referenzierten Objekte des PDF im Bereich des Logos. Komplexe Berichte können verschachtelte Objekte enthalten. Beginne deshalb mit einem isolierten Logodokument, bevor du den gesamten Bericht untersuchst. Der PDFKit-SVG-Leitfaden erklärt einen separaten SVG-Importablauf und die Prüfungen seiner gespeicherten PDFs.

Übertrage deine Grafik Funktion für Funktion

Ersetze den d-Wert der Testgrafik durch deine eigenen Pfaddaten und erhalte dabei Füllung, Füllregel, Kontur und Transformation. Wenn du nur die Form eines Pfads kopierst und seine Farbgebung weglässt, kann sich das Ergebnis ändern, obwohl die Pfaddaten selbst gültig sind.

Für eine kleine statische Bildmarke setzt du die Farben direkt auf die unterstützten Formen. Bei einem Logo, das vom Stylesheet einer Webseite abhängt, musst du diese Abhängigkeiten auflösen, bevor daraus eine eigenständige Dokumentkomponente wird. Bewahre das Quell-SVG neben dem Rendering-Code auf, damit sich spätere Änderungen mit der freigegebenen Grafik vergleichen lassen.

Die offizielle SVG-Übersicht listet die verfügbaren Grundelemente auf. Betrachte sie als Unterstützungsliste, nicht als den vollständigen SVG-Funktionsumfang eines Browsers. Teste Schrift, Beschneidungen und Verläufe in deiner installierten Version, bevor du sie in den produktiven Bericht einbaust.

Wenn das SVG ein eingebettetes PNG enthält, rekonstruiert die Übertragung seines Containers keine fehlende Geometrie. Der Leitfaden zu eingebetteten Rasterbildern zeigt, wie du Pfade von einer Bitmap innerhalb einer SVG-Datei unterscheidest.

Wenn das Logo als PNG oder JPG vorliegt

Wenn ein ursprüngliches SVG, AI oder eine andere bearbeitbare Vektor-Masterdatei vorhanden ist, frage zuerst danach. Wenn nur Pixel übrig sind, kann PerfectVectors Logo-Vektorisierer vor der React-pdf-Arbeit einen SVG-Kandidaten vorbereiten. Vergleiche seine Konturen, kleinen Öffnungen und separaten Farbbereiche mit der Quelle, bevor du die unterstützten Formen für deine PDF-Komponente anpasst.

Vektorisierung repariert keine Renderer-Integration, erstellt keine React-Komponente und garantiert nicht die Unterstützung jeder SVG-Funktion. Prüfe Schrift, die exakte Markengeometrie erfordert, weiterhin manuell. Der Leitfaden zur Logo-Vektorisierung hilft bei der Entscheidung zwischen Nachzeichnen, neuem Setzen und Neuzeichnen.

Bei einer reinen Rasterquelle ist das sinnvolle Ergebnis ein geprüfter Vektorkandidat und anschließend ein geprüftes PDF. Bei einer vorhandenen Vektorquelle gehst du direkt zur Prüfung von Komponenten und Platzierung über. Weitere Hinweise zur Quellvorbereitung findest du im Blog.

FAQ

Kann ich eine SVG-Datei an React-pdf Image übergeben? Die dokumentierten Image-Eingaben sind PNG und JPG. Verwende für den pfadbasierten Ablauf in diesem Leitfaden die Svg-Grundelemente des Renderers und prüfe deine installierte Version, bevor du dich auf anderes Eingabeverhalten verlässt.

Muss ich jedes SVG von Hand übertragen? Nein. Das offizielle Paket @react-pdf/svg parst SVG-Zeichenfolgen in Bäume aus primitiven Knoten. Prüfe seine unterstützten Elemente und Warnungen und binde die Ausgabe anschließend in deinen Rendering-Ablauf ein und teste sie. Das explizite Komponentenbeispiel hier vermeidet einen zusätzlichen Parser-Schritt.

Warum wird die Mitte meines Logos ausgefüllt? Prüfe den zusammengesetzten Pfad und seine Füllregel. Das Testemblem verwendet evenodd, damit sein inneres Quadrat offen bleibt. Erhalte die ursprüngliche Geometrie und Farbgebungsregeln, bevor du die Grafik änderst.

Beweist eine scharfe PDF-Vorschau, dass das Logo vektoriell ist? Nein. Prüfe neben der Darstellung auch den Inhalt und die Bildobjekte des gespeicherten PDF. Die isolierte Testgrafik in diesem Leitfaden enthielt keine eingebetteten Bilder; dieses Ergebnis gilt nicht automatisch für ein anderes Logo.

Quellen

1. React-pdf — Svg-Komponente — Definiert Viewport, Abmessungen, viewBox und Einstellungen zum Seitenverhältnis.
2. React-pdf — Image-Komponente — Dokumentiert PNG- und JPG-Eingabeformen zur Bitmap-Platzierung.
3. React-pdf — SVG-Grundelemente — Listet unterstützte SVG-Komponenten des Renderers auf.
4. React-pdf — SVG-Parser — Dokumentiert den primitiven Knotenbaum, Attributumwandlung und Warnungen zu nicht unterstützten Elementen.

Hast du nur ein PNG- oder JPG-Logo? Bereite mit PerfectVector einen SVG-Kandidaten vor, vergleiche Konturen und Öffnungen mit der Quelle, passe dann die unterstützten Formen an und prüfe das gespeicherte PDF.