SVG PDFKit : placer un logo vectoriel sans l’aplatir

Pour placer un logo SVG complet dans un PDF généré avec Node, utilise svg-to-pdfkit avec PDFKit et transmets le balisage SVG à SVGtoPDF(doc, svg, x, y, options). La méthode intégrée doc.path() de PDFKit accepte des données de tracé SVG, comme la valeur de l’attribut d d’un tracé. Elle n’importe pas le document SVG qui l’entoure, ses autres formes ou ses styles.

Cette distinction compte pour un logo à plusieurs couleurs et avec une ouverture centrale. Copier un seul tracé peut laisser une partie du dessin de côté. Transformer le logo entier en PNG conserve un rendu matriciel, mais abandonne la sortie PDF à tracés que tu recherchais.

Ce guide utilise un emblème original, un script Node complet et l’inspection du PDF enregistré. Si tu as déjà un logo vectoriel éditable, garde-le comme source. La reconstruction depuis du matriciel se fait avant cette étape d’import.

Choisir l’insertion SVG complète ou un tracé unique

La documentation vectorielle de PDFKit décrit l’analyseur de tracés et les méthodes de dessin qui l’entourent. La bibliothèque distincte SVG-to-PDFKit gère le balisage SVG complet.

La documentation des images PDFKit indique PNG et JPEG pour doc.image(). Ne traite pas cet appel comme un importateur SVG complet.

Par exemple, voici un usage valide de l’API de tracés :

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

Il dessine le triangle de notre emblème aux coordonnées de son tracé. Il ne retrouve pas l’anneau ni la barre bleu-vert d’une autre partie du fichier source. Utilise la méthode de document complet ci-dessous lorsque ces éléments vont ensemble.

Si ton PDF est assemblé dans un navigateur avec jsPDF, suis la procédure SVG jsPDF distincte. Pour un document à composants React, utilise la procédure de logo SVG React-pdf. Pour des documents Python, compare les vérifications d’import et de dimensions ReportLab au placement SVG direct fpdf2.

Exécuter un petit exemple avec des paquets à version fixée

Nous avons exécuté cet exemple avec PDFKit 0.20.2 et SVG-to-PDFKit 0.1.8. Ces versions identifient la paire de dépendances testée ; vérifie ta sortie après toute mise à niveau de l’un des paquets.

Dans un nouveau projet Node, installe :

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

Enregistre ceci sous logo.svg. L’anneau et son ouverture partagent un tracé avec fill-rule="evenodd" ; le triangle doré et la barre bleu-vert sont des formes séparées. Le fichier ne contient aucune police, image ni aucun effet.

<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>

Enregistre ce qui suit sous place-logo.cjs dans le même répertoire, puis lance node place-logo.cjs :

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 produit un flux. L’appel à doc.end() finalise le document ; le script attend ensuite la fin du flux de sortie avant de se terminer. La documentation de démarrage explique ce modèle de flux et les dimensions de page en points PDF, avec 72 points par pouce.

Ici, les deux fenêtres de placement mesurent 180 × 90 pt et 90 × 45 pt, soit 2.5 × 1.25 pouces et 1.25 × 0.625 pouces. Toutes deux correspondent au rapport 2:1 du viewBox source. Les formes dessinées ont des marges dans ce viewBox ; leurs limites visibles sont donc plus petites que la fenêtre. Mesure séparément le canevas et le dessin peint lorsque tu alignes un logo avec du texte voisin.

L’importateur décrit width et height comme la fenêtre initiale. Son option preserveAspectRatio contrôle l’ajustement à l’intérieur. Cet exemple utilise des proportions correspondantes et des dimensions explicites pour éviter de dépendre d’une valeur par défaut à la taille de la page. N’utilise pas assumePt comme correction générale d’un logo étonnamment petit ; vérifie d’abord les dimensions source, le viewBox et la fenêtre cible.

Examiner le PDF, puis son apparence

Notre logo.pdf minimal avait une page de 800 × 450 pt. Avec pypdf 6.10.0, nous avons trouvé 24 opérations de courbe cubique, deux opérations de remplissage pair-impair et zéro image de page. Ses ressources de page ne contenaient aucune police ni aucun XObject. L’importateur n’a émis aucun avertissement pour cet exemple.

Ces résultats étayent une conclusion limitée : cet emblème original sans image a été dessiné avec une géométrie PDF dans les versions testées. Ils n’établissent pas que tout SVG devient un PDF entièrement vectoriel. Un logo contenant une photographie intégrée nécessite toujours une inspection distincte.

Nous avons aussi utilisé Poppler pour rendre une version avec libellés. Elle utilise le même SVG et les deux tailles de fenêtre, avec les placements déplacés dans des panneaux comparatifs. Le fond pâle des panneaux reste visible à travers les deux anneaux, et le triangle et la barre étroite restent séparés de l’anneau.

Un zoom net seul est une preuve faible : une image matricielle suffisamment grande peut aussi sembler nette. À l’inverse, trouver une opération de courbe quelque part dans un rapport ne dit rien sur la pixellisation éventuelle du logo. Isole le dessin dans un petit PDF de test avant d’inspecter un document qui contient aussi des photos et des graphiques.

Pour ton propre logo, vérifie les deux aspects :

1. Examine le contenu de page et les objets référencés du PDF avec un outil d’inspection PDF. Cherche les instructions de dessin à l’endroit où le logo est peint et prends en compte tous les objets image. Les PDF plus complexes peuvent placer du contenu dans des Form XObjects ; un comptage au niveau supérieur ne suffit donc pas toujours.
2. Ouvre le PDF enregistré dans sa visionneuse prévue et compare-le à la source. Vérifie le trou, les couleurs distinctes, le rognage, les marges et les détails fins à la taille réelle de livraison.

Garde le SVG original à côté du code de génération PDF. Si la source n’est qu’une enveloppe autour de pixels, utilise le diagnostic des images intégrées avant de supposer que l’extension SVG prouve quelque chose sur sa géométrie.

Garder polices et effets dans la procédure testée

SVG-to-PDFKit cite les filtres et foreignObject parmi ses fonctionnalités non prises en charge. Il décrit aussi les exigences d’enregistrement des polices et de fonctions de rappel. Utilise des attributs de présentation SVG explicites pour un petit logo côté serveur et examine les avertissements avec le résultat rendu. Le CSS calculé du navigateur est une option distincte pour un élément SVG fourni ; ce n’est pas la même chose que transmettre du balisage à ce script Node. Consulte la documentation des fonctionnalités et polices de la bibliothèque.

Notre emblème évite volontairement le texte. Pour un vrai lettrage, fournis et teste les polices prévues ou conserve un lettrage approuvé converti en tracés dans l’original vectoriel. La documentation des polices PDFKit décrit l’intégration et l’enregistrement des polices. Le texte du document et les contours de logo ont des besoins d’édition différents ; vectoriser une capture de lettrage n’identifiera pas la police originale.

Si un symbole de marque dépend d’un effet que cet importateur ne reproduit pas, reconstruis cet effet en géométrie adaptée ou choisis une autre méthode d’export et vérifie-la. Une insertion matricielle est aussi valable lorsque l’apparence compte davantage que les tracés. Ne décris pas ce choix comme un export qui préserve les vecteurs.

L’exemple utilise des couleurs RGB. La conservation des tracés ne garantit pas à elle seule les exigences couleur, PDF/X ou prépresse d’un imprimeur. Confirme-les avec le destinataire ; le guide des formats de logo aide à distinguer l’original éditable du fichier livré.

Reconstruire un logo uniquement matriciel avant l’insertion

Si le logo original n’existe qu’en PNG ou JPG, le vectoriseur de logos de PerfectVector peut préparer un SVG candidat avant l’étape PDFKit. Compare les contours, les petites ouvertures et les zones colorées séparées à la source, puis soumets ce candidat aux mêmes vérifications de placement et de PDF.

Utilise le vectoriel original chaque fois qu’il est disponible. Pour un lettrage abîmé ou une géométrie de marque exacte, ressaisis ou redessine la partie concernée dans un éditeur. Le guide de vectorisation de logos explique ce choix de source. PerfectVector prépare les tracés du dessin ; PDFKit et son importateur gèrent le placement dans le document. L’emblème de test de cet article est un dessin vectoriel écrit à la main, pas un résultat de conversion mesuré.

FAQ

PDFKit peut-il importer un SVG complet avec doc.path() ? Non. La méthode path lit les données de tracé SVG. Utilise SVG-to-PDFKit pour le document complet dans cette procédure, ou dessine chaque forme et applique-lui les styles toi-même.

SVG-to-PDFKit garantit-il un PDF sans images matricielles ? Non. L’emblème sans image testé a produit des opérations de dessin et zéro image de page. Examine ton entrée et ton PDF exporté, surtout si le SVG contient des images intégrées ou des fonctionnalités hors du jeu accepté par l’importateur.

Pourquoi le logo visible est-il plus petit que mes width et height ? Ces options définissent la fenêtre d’import. L’espace vide du viewBox source reste dans la mise en page et le maintien des proportions peut ajouter de l’espace. Vérifie les limites du dessin avant de changer la taille PDF demandée.

Sources

1. PDFKit — Graphismes vectoriels — Décrit l’analyse des données de tracé SVG, les opérations de rendu et l’état graphique.
2. SVG-to-PDFKit — Utilisation et limites — Définit l’insertion SVG complète, options de fenêtre, avertissements, polices et fonctionnalités prises en charge.
3. PDFKit — Images — Présente les formats matriciels acceptés par l’API image.
4. PDFKit — Démarrage — Explique les flux de document, la finalisation et les dimensions de page en points PDF.
5. PDFKit — Polices — Décrit l’intégration et l’enregistrement de polices nommées.

Si le logo de ton document part d’une image matricielle, prépare un SVG candidat avec PerfectVector, examine ses ouvertures et ses contours, puis place-le à la taille PDF requise et vérifie le fichier enregistré.