PDFKit-SVG: Ein Vektorlogo ohne Rasterisierung platzieren

Um ein vollständiges SVG-Logo in einer mit Node erzeugten PDF zu platzieren, verwende svg-to-pdfkit mit PDFKit und übergib das SVG-Markup an SVGtoPDF(doc, svg, x, y, options). Das eingebaute doc.path() von PDFKit akzeptiert SVG-Pfaddaten, beispielsweise den Wert des d-Attributs eines Pfads. Es importiert nicht das umgebende SVG-Dokument, dessen andere Formen oder Stile.

Dieser Unterschied ist bei einem Logo mit mehreren Farben und einer Aussparung in seiner Mitte wichtig. Wenn du nur einen Pfad kopierst, kann ein Teil der Grafik fehlen. Das gesamte Logo in ein PNG umzuwandeln erhält eine Rasterdarstellung, gibt aber die pfadbasierte PDF-Ausgabe auf, die du eigentlich wolltest.

Dieser Leitfaden verwendet ein eigenes Emblem, ein vollständiges Node-Skript und eine Prüfung der gespeicherten PDF. Wenn du bereits ein bearbeitbares Vektorlogo hast, behalte es als Quelle. Die Rekonstruktion aus Rasterdaten gehört vor diesen Importschritt.

Zwischen vollständigem SVG-Import und einzelnem Pfad wählen

PDFKits Vektordokumentation beschreibt den Pfadparser und die zugehörigen Zeichenmethoden. Die separate SVG-to-PDFKit-Bibliothek verarbeitet vollständiges SVG-Markup.

Die PDFKit-Bilddokumentation nennt PNG und JPEG für doc.image(). Behandle diesen Aufruf nicht als vollständigen SVG-Importer.

Dies ist beispielsweise eine gültige Verwendung der Pfad-API:

doc.save();
doc.fillColor('#eeaa42');
doc.path('M125 100L175 20L225 100Z').fill();
doc.restore();

Sie zeichnet das Dreieck unseres Emblems an seinen Pfadkoordinaten. Sie rekonstruiert nicht den petrolfarbenen Ring oder Balken aus einem anderen Teil der Quelldatei. Verwende den folgenden Weg für vollständige Dokumente, wenn diese Teile zusammengehören.

Wenn deine PDF im Browser mit jsPDF zusammengestellt wird, folge dem separaten jsPDF-SVG-Ablauf. Verwende für ein Dokument aus React-Komponenten den React-pdf-Ablauf für SVG-Logos. Vergleiche für Python-Dokumente die Import- und Größenprüfungen von ReportLab mit der direkten SVG-Platzierung in fpdf2.

Ein kleines Beispiel mit festgelegten Paketversionen ausführen

Wir haben dieses Beispiel mit PDFKit 0.20.2 und SVG-to-PDFKit 0.1.8 ausgeführt. Diese Angaben kennzeichnen das getestete Paar von Abhängigkeiten; prüfe deine eigene Ausgabe nach einem Upgrade eines der Pakete.

Installiere in einem neuen Node-Projekt:

npm install --save-exact pdfkit@0.20.2 svg-to-pdfkit@0.1.8

Speichere dies als logo.svg. Der Ring und seine Aussparung teilen sich einen Pfad mit fill-rule="evenodd"; das goldene Dreieck und der petrolfarbene Balken sind separate Formen. Die Datei enthält weder Schriften noch Bilder noch Effekte.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <path fill="#147d78" fill-rule="evenodd"
    d="M110 60A50 50 0 1 1 10 60A50 50 0 1 1 110 60Z
       M85 60A25 25 0 1 1 35 60A25 25 0 1 1 85 60Z"/>
  <path fill="#eeaa42" d="M125 100L175 20L225 100Z"/>
  <rect x="227" y="20" width="8" height="80" fill="#147d78"/>
</svg>

Speichere Folgendes als place-logo.cjs im selben Verzeichnis und führe dann node place-logo.cjs aus:

const fs = require('node:fs');
const { finished } = require('node:stream/promises');
const PDFDocument = require('pdfkit');
const SVGtoPDF = require('svg-to-pdfkit');
 
async function main() {
  const svg = fs.readFileSync('logo.svg', 'utf8');
  const doc = new PDFDocument({ size: [800, 450], margin: 0 });
  const output = fs.createWriteStream('logo.pdf');
  doc.pipe(output);
  const warnings = [];
  SVGtoPDF(doc, svg, 72, 150, {
    width: 180, height: 90,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  SVGtoPDF(doc, svg, 432, 150, {
    width: 90, height: 45,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  doc.end();
  await finished(output);
  fs.writeFileSync('warnings.json', JSON.stringify(warnings, null, 2));
  if (warnings.length) process.stderr.write(warnings.join('\n') + '\n');
}
main().catch(error => {
  process.stderr.write(error.stack + '\n');
  process.exitCode = 1;
});

PDFKit erzeugt einen Stream. Der Aufruf doc.end() schließt das Dokument ab; das Skript wartet anschließend auf den Abschluss des Ausgabestreams, bevor es zurückkehrt. Die Einstiegsdokumentation erklärt das Stream-Modell und die Seitenabmessungen in PDF-Punkten, mit 72 Punkten pro Zoll.

Hier sind die zwei Platzierungsbereiche 180 × 90 pt und 90 × 45 pt groß, also 2.5 × 1.25 Zoll und 1.25 × 0.625 Zoll. Beide entsprechen dem Verhältnis 2:1 der Quell-viewBox. Die gezeichneten Formen haben Ränder innerhalb dieser viewBox, weshalb ihre sichtbaren Begrenzungen kleiner als der Platzierungsbereich sind. Miss Zeichenfläche und gezeichnete Grafik getrennt, wenn du ein Logo an benachbartem Text ausrichtest.

Der Importer dokumentiert width und height als anfänglichen Darstellungsbereich. Seine Option preserveAspectRatio steuert das Einpassen darin. Dieses Beispiel verwendet passende Proportionen und ausdrückliche Abmessungen, um nicht von einem seitengroßen Standardwert abzuhängen. Verwende assumePt nicht als allgemeine Lösung für ein unerwartet kleines Logo; prüfe zuerst Quellabmessungen, viewBox und Zielbereich.

Die PDF-Struktur und dann ihr Erscheinungsbild prüfen

Unsere minimale logo.pdf hatte eine 800 × 450 pt große Seite. Mit pypdf 6.10.0 fanden wir 24 kubische Kurvenoperationen, zwei Even-odd-Fülloperationen und null Seitenbilder. Ihre Seitenressourcen enthielten weder Schriften noch XObjects. Der Importer gab für dieses Testbeispiel keine Warnung aus.

Diese Ergebnisse stützen eine begrenzte Schlussfolgerung: Dieses eigene, bildfreie Emblem wurde in den getesteten Versionen mit PDF-Geometrie gezeichnet. Sie belegen nicht, dass beliebige SVGs zu vollständig vektorbasierten PDFs werden. Ein Logo mit einem eingebetteten Foto benötigt weiterhin eine eigene Prüfung.

Wir haben außerdem eine beschriftete Version mit Poppler gerendert. Sie verwendet dasselbe SVG und zwei Darstellungsgrößen, wobei die Platzierungen in Vergleichsfelder verschoben wurden. Der helle Feldhintergrund bleibt durch beide Ringe sichtbar, und Dreieck sowie schmaler Balken bleiben vom Ring getrennt.

Eine scharfe Vergrößerung allein ist ein schwacher Beleg: Auch eine ausreichend große Bitmap kann scharf aussehen. Umgekehrt sagt eine irgendwo im Bericht gefundene Kurvenoperation nichts darüber aus, ob dessen Logo gerastert wurde. Isoliere die Grafik in einer kleinen Test-PDF, bevor du ein Dokument untersuchst, das außerdem Fotos und Diagramme enthält.

Prüfe bei deinem eigenen Logo beides:

1. Untersuche den Seiteninhalt und referenzierte Objekte der PDF mit einem PDF-Prüfwerkzeug. Suche dort nach Zeichenanweisungen, wo das Logo gezeichnet wird, und berücksichtige sämtliche Bildobjekte. Komplexere PDFs können Inhalte in Form-XObjects ablegen, weshalb eine Zählung auf oberster Ebene nicht immer genügt.
2. Öffne die gespeicherte PDF im vorgesehenen Betrachter und vergleiche sie mit der Quelle. Prüfe Aussparung, getrennte Farben, Beschneidung, Ränder und feine Details in der tatsächlichen Übergabegröße.

Behalte das originale SVG neben dem Code zur PDF-Erzeugung. Wenn die Quelle lediglich Pixel verpackt, verwende die Diagnose eingebetteter Bilder, bevor du annimmst, die SVG-Endung beweise etwas über ihre Geometrie.

Schriften und Effekte innerhalb des getesteten Ablaufs halten

SVG-to-PDFKit führt Filter und foreignObject als nicht unterstützte Funktionen auf. Es dokumentiert außerdem Anforderungen zur Schriftregistrierung und zu Rückruffunktionen. Verwende für ein kleines serverseitiges Logo ausdrückliche SVG-Präsentationsattribute und prüfe Warnungen zusammen mit dem gerenderten Ergebnis. Vom Browser berechnetes CSS ist eine separate Option für ein bereitgestelltes SVG-Element; es ist nicht dasselbe wie die Übergabe von Markup an dieses Node-Skript. Siehe die Funktions- und Schriftdokumentation der Bibliothek.

Unser Emblem vermeidet Text bewusst. Stelle bei echten Schriftzügen entweder die vorgesehenen Schriften bereit und teste sie oder behalte freigegebene Schriftzüge in Pfaden in der Vektorvorlage. PDFKits Schriftdokumentation beschreibt das Einbetten und Registrieren von Schriften. Dokumenttext und Logokonturen haben unterschiedliche Bearbeitungsanforderungen; das Nachzeichnen eines Schrift-Screenshots identifiziert nicht die ursprüngliche Schrift.

Wenn ein Markenzeichen von einem Effekt abhängt, den dieser Importer nicht nachbilden kann, baue den Effekt als geeignete Geometrie neu auf oder wähle einen anderen Exportablauf und prüfe ihn. Auch das Einfügen als Rasterbild ist eine gültige Wahl, wenn das Erscheinungsbild wichtiger ist als der Erhalt von Pfaden. Beschreibe diese Wahl nicht als vektorerhaltenden Export.

Das Beispiel verwendet RGB-Farben. Erhaltene Pfade allein belegen nicht, dass Farb-, PDF/X- oder Druckvorstufenanforderungen einer Druckerei erfüllt sind. Kläre diese mit dem Empfänger; der Leitfaden zu Logoformaten hilft, eine bearbeitbare Vorlage von einer Übergabedatei zu unterscheiden.

Ein reines Rasterlogo vor dem Einfügen rekonstruieren

Wenn das ursprüngliche Logo nur als PNG oder JPG existiert, kann PerfectVectors Logo-Vektorisierer vor dem PDFKit-Schritt einen SVG-Kandidaten erstellen. Vergleiche Konturen, kleine Aussparungen und getrennte Farbbereiche mit der Quelle und führe diesen Kandidaten dann durch dieselben Platzierungs- und PDF-Prüfungen.

Verwende den Originalvektor, wann immer er verfügbar ist. Setze bei beschädigter Schrift oder exakter Markengeometrie den betroffenen Teil in einem Editor neu oder zeichne ihn neu. Der Leitfaden zur Logo-Vektorisierung erklärt diese Quellenentscheidung. PerfectVector bereitet Grafikpfade vor; PDFKit und sein Importer übernehmen die Platzierung im Dokument. Das Testemblem dieses Artikels ist von Hand erstellte Vektorgrafik, kein gemessenes Konvertierungsergebnis.

FAQ

Kann PDFKit ein vollständiges SVG mit doc.path() importieren? Nein. Die path-Methode liest SVG-Pfaddaten. Verwende in diesem Ablauf SVG-to-PDFKit für das vollständige Dokument oder zeichne und gestalte jede Form selbst.

Garantiert SVG-to-PDFKit eine PDF ohne Rasterbilder? Nein. Das getestete bildfreie Emblem erzeugte Zeichenoperationen und null Seitenbilder. Prüfe deine eigene Eingabe und exportierte PDF, besonders wenn das SVG eingebettete Bilder oder Funktionen außerhalb der unterstützten Auswahl des Importers enthält.

Warum ist das sichtbare Logo kleiner als meine width und height? Diese Optionen definieren den Importbereich. Leerraum innerhalb der Quell-viewBox bleibt Teil des Layouts, und das Einpassen unter Erhalt des Seitenverhältnisses kann weiteren Leerraum erzeugen. Prüfe die Grafikbegrenzungen, bevor du die angeforderte PDF-Größe änderst.

Quellen

1. PDFKit — Vektorgrafik — Dokumentiert das Parsen von SVG-Pfaddaten, Füll- und Konturoperationen sowie den Grafikzustand.
2. SVG-to-PDFKit — Verwendung und Einschränkungen — Definiert das Einfügen vollständiger SVGs, Darstellungsbereichsoptionen, Warnungen, Schriften und unterstützte Funktionen.
3. PDFKit — Bilder — Führt die von der Bild-API akzeptierten Bitmapformate auf.
4. PDFKit — Einstieg — Erklärt Dokumentstreams, Abschluss und Seitengröße in PDF-Punkten.
5. PDFKit — Schriften — Beschreibt Schrifteinbettung und Registrierung benannter Schriften.

Wenn das Logo deines Dokuments als Rasterbild beginnt, erstelle einen SVG-Kandidaten mit PerfectVector, prüfe seine Aussparungen und Konturen, platziere ihn dann in der erforderlichen PDF-Größe und prüfe die gespeicherte Datei.