Logos SVG React-pdf : afficher des tracés dans le PDF

Pour un petit logo SVG dans @react-pdf/renderer, construis le dessin avec ses composants Svg, Path et les autres composants pris en charge. Donne une taille explicite au Svg extérieur et conserve le viewBox source. La documentation Image du moteur indique des entrées PNG et JPG ; envelopper une URL SVG dans Image ne correspond pas à la méthode vectorielle décrite ici.

Ce guide utilise un exemple Node complet avec un emblème carré traversé par une ouverture centrale. Nous avons généré le PDF avec des dépendances fixées à des versions précises et inspecté le résultat. L’exemple sépare trois éléments faciles à confondre : le dessin source, l’arbre de composants et la taille de placement dans le PDF.

Vérifie quel paquet React PDF tu utilises

Cet article génère des documents avec @react-pdf/renderer. Le paquet distinct nommé react-pdf affiche des PDF existants. Vérifie l’import dans ton fichier avant de copier une solution trouvée dans les résultats de recherche.

Dans un Document du moteur, utilise les composants exportés par ce moteur. Les éléments svg et path en minuscules d’un navigateur appartiennent à un autre environnement de rendu. La référence officielle du composant SVG définit Svg comme conteneur de zone d’affichage et montre des formes React-pdf importées à l’intérieur.

La référence Image décrit les entrées bitmap. Un PNG de remplacement peut être utile lorsqu’une apparence complexe compte davantage que la conservation de géométrie vectorielle. Cela change le livrable : conserve donc l’original vectoriel séparément.

Il existe aussi un paquet officiel @react-pdf/svg. Son README documente parseSvg(), qui renvoie un arbre de nœuds primitifs et convertit les noms d’attributs en camelCase. Il précise que les éléments non pris en charge sont ignorés avec un avertissement. C’est le contrat d’un analyseur, pas la promesse que tout SVG de navigateur sera rendu à l’identique. L’exemple ci-dessous utilise des composants explicites afin de rendre la géométrie et ses règles de peinture faciles à inspecter.

Affiche un logo minimal avant d’importer le tien

Nous avons exécuté cet exemple avec @react-pdf/renderer 4.9.0, React 19.2.4 et Node 22.19.0. Ces versions identifient la configuration testée ; elles ne garantissent pas le comportement d’un autre arbre de dépendances.

Dans un nouveau répertoire, installe les deux paquets nécessaires à l’exécution :

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

Enregistre ceci sous logo.mjs, puis exécute node logo.mjs. Le code utilise React.createElement afin que Node puisse l’exécuter sans étape de compilation JSX.

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)),
);

Les carrés extérieur et intérieur partagent un tracé composé unique. fillRule: 'evenodd' laisse le carré intérieur ouvert et révèle le rectangle pâle situé dessous. Aucune zone blanche ne recouvre le centre. Cette ouverture devient donc un contrôle utile lorsque tu remplaces l’exemple par un logo contenant des contreformes ou des découpes.

Les coordonnées SVG couvrent 100 unités dans chaque direction, tandis que la zone d’affichage placée mesure 144 sur 144. viewBox décrit le système de coordonnées du dessin ; width et height décrivent sa zone d’affichage. Conserve cette distinction lorsque tu ajustes la taille d’un logo. Le tableau officiel des propriétés Svg documente ces réglages et preserveAspectRatio.

Inspecte le PDF enregistré en plus de son aperçu

Notre test a produit une page A4 avec l’anneau carré bleu-vert près du coin supérieur gauche. Nous avons rendu ce fichier avec Poppler et vérifié visuellement que le fond pâle apparaissait dans l’ouverture. La commande Poppler pdfimages -list logo.pdf n’a signalé aucune image intégrée dans ce document isolé.

Ce résultat est volontairement limité. Il décrit cet exemple composé uniquement de tracés. Il ne prouve pas qu’un document avec des photos, des images SVG intégrées ou des effets non pris en charge soit entièrement vectoriel.

Si Poppler est disponible sur ta machine, ces commandes offrent deux vérifications différentes :

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

La seconde commande crée un aperçu matriciel pour l’inspection visuelle ; elle ne transforme pas le PDF original en bitmap. Vérifie l’ouverture, les coins, les couleurs et le placement dans cet aperçu, puis ouvre le PDF enregistré dans la visionneuse utilisée par ton destinataire. Un aperçu net ne suffit pas à prouver que le document original contient des tracés : un grand bitmap peut aussi sembler net.

Pour une inspection plus poussée, examine les instructions de dessin du PDF et les objets référencés autour du logo. Les rapports complexes peuvent contenir des objets imbriqués : commence donc par un document avec un logo isolé avant de diagnostiquer le rapport entier. Le guide SVG PDFKit explique une autre méthode d’import SVG et ses vérifications du PDF enregistré.

Transfère ton dessin une fonctionnalité à la fois

Remplace la valeur d de l’exemple par les données de ton tracé, puis conserve le remplissage, la règle de remplissage, le contour et la transformation associés. Copier uniquement la forme d’un tracé en abandonnant son style peut changer le résultat, même lorsque les données du tracé sont valides.

Pour un petit symbole statique, définis les couleurs directement sur les formes prises en charge. Un logo qui dépend de la feuille de style d’une page web doit voir ces dépendances résolues avant de devenir un composant de document autonome. Conserve le SVG source à côté du code de rendu pour comparer les révisions ultérieures au dessin approuvé.

La présentation officielle de SVG énumère les primitives disponibles. Considère-la comme une liste des fonctionnalités prises en charge, et non comme l’ensemble complet des fonctionnalités SVG du navigateur. Teste le lettrage, le découpage et les dégradés dans ta version installée avant de les ajouter au rapport de production.

Si le SVG contient un PNG intégré, transposer son conteneur ne reconstruit pas la géométrie manquante. Le guide des images matricielles intégrées montre comment distinguer les tracés d’un bitmap enregistré dans un fichier SVG.

Lorsque le logo provient d’un PNG ou JPG

S’il existe un SVG, un AI ou un autre original vectoriel modifiable, demande-le d’abord. S’il ne reste que des pixels, le vectoriseur de logos PerfectVector peut préparer un SVG candidat en amont du travail React-pdf. Compare ses contours, petites ouvertures et zones de couleur distinctes à la source avant d’adapter ses formes prises en charge à ton composant PDF.

La vectorisation ne répare pas l’intégration du moteur, ne crée pas un composant React et ne garantit pas la prise en charge de toutes les fonctionnalités SVG. Soumets le lettrage exigeant une géométrie de marque exacte à une vérification manuelle. Le guide de vectorisation des logos aide à choisir entre traçage, recomposition du texte et redessin.

Pour une source uniquement matricielle, le résultat utile est un candidat vectoriel inspecté, suivi d’un PDF vérifié. Pour une source vectorielle existante, passe directement aux contrôles des composants et du placement. Tu trouveras d’autres conseils de préparation des sources dans le blog.

FAQ

Puis-je transmettre un fichier SVG à React-pdf Image ? Les entrées documentées d’Image sont PNG et JPG. Utilise les primitives Svg du moteur pour la méthode à base de tracés de ce guide, et vérifie ta version installée avant de dépendre d’autres comportements d’entrée.

Dois-je transposer chaque SVG à la main ? Non. Le paquet officiel @react-pdf/svg analyse les chaînes SVG en arbres de nœuds primitifs. Examine les éléments pris en charge et les avertissements, puis connecte et teste cette sortie dans ta chaîne de rendu. L’exemple de composants explicites présenté ici évite une étape d’analyse supplémentaire.

Pourquoi le centre de mon logo se remplit-il ? Vérifie le tracé composé et sa règle de remplissage. L’emblème de test utilise evenodd pour que son carré intérieur reste ouvert. Conserve la géométrie et les règles de peinture originales avant de modifier le dessin.

Un aperçu PDF net prouve-t-il que le logo est vectoriel ? Non. Inspecte le contenu et les objets image du PDF enregistré, ainsi que son apparence. L’exemple isolé de ce guide ne contenait aucune image intégrée ; ce résultat ne s’applique pas automatiquement à un autre logo.

Sources

1. React-pdf — Composant Svg — Définit la zone d’affichage, les dimensions, le viewBox et les réglages de proportions.
2. React-pdf — Composant Image — Documente les formes d’entrée PNG et JPG pour le placement bitmap.
3. React-pdf — Primitives SVG — Énumère les composants SVG pris en charge par le moteur.
4. React-pdf — Analyseur SVG — Documente l’arbre de nœuds primitifs, la conversion des attributs et les avertissements d’éléments non pris en charge.

Tu n’as qu’un logo PNG ou JPG ? Prépare un SVG candidat avec PerfectVector, compare ses contours et ses ouvertures à la source, puis adapte les formes prises en charge et inspecte le PDF enregistré.