jsPDF SVG : garder les tracés du logo dans le PDF

Pour insérer les tracés d’un logo SVG dans un PDF généré dans le navigateur avec jsPDF, charge svg2pdf.js, transmets un élément SVG à await doc.svg(...), puis enregistre le document. Choisis addSvgAsImage uniquement lorsqu’une image matricielle est acceptable. Son entrée SVG ne signifie pas que le PDF résultant contient des tracés SVG.

L’exemple d’utilisation de svg2pdf.js documente cet appel asynchrone fondé sur un élément. L’implémentation du module SVG de jsPDF montre l’autre voie : rendu dans un canevas, encodage JPEG et ajout de cette image au PDF.

Pour le logo d’une facture, d’un billet ou d’un rapport, garde le SVG original comme fichier maître modifiable. Ce guide teste un emblème bicolore simple, définit son placement en points PDF et vérifie les objets enregistrés. Il ne suppose pas que toutes les fonctionnalités SVG survivent à la conversion.

Choisis la sortie nécessaire

La troisième méthode est utile si tu veux un PDF de logo préparé plutôt qu’un document assemblé en JavaScript. Pour les documents hors navigateur, le guide SVG dans LaTeX explique un processus distinct d’export et d’inclusion. Pour une chaîne documentaire Node, l’exemple SVG PDFKit distingue l’insertion d’un document complet de l’analyse d’un seul tracé.

Lorsque le livrable est une présentation, utilise le guide des images SVG PptxGenJS. Il vérifie les proportions du logo, les médias PPTX exportés et son apparence dans l’application de présentation, plutôt que d’appliquer les réglages PDF à un autre format de document.

Exécute d’abord un petit exemple à versions fixées

L’exemple a été exécuté dans un navigateur avec jsPDF 4.2.1 et svg2pdf.js 2.8.1. Ce sont les versions testées, et non une promesse concernant les futures versions. Le paquet se nomme svg2pdf.js, suffixe compris ; des paquets aux noms similaires peuvent répondre à d’autres usages.

Dans un petit projet de navigateur avec un outil de regroupement JavaScript, installe :

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Utilise cet emblème original comme entrée. Son anneau possède une véritable ouverture grâce à la règle de remplissage pair-impair. Le second tracé est un sommet arrondi. Il n’y a ni polices, ni fichiers liés, ni filtres, ni images matricielles intégrées.

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

Exécute ce code dans le navigateur, pas directement dans un script Node.js. Les notes d’utilisation et de portée de la bibliothèque exigent un DOM de navigateur fonctionnel et décrivent une prise en charge SVG limitée. Dans une application rendue côté serveur, place ce travail dans le gestionnaire d’exportation côté client.

La chaîne représente ici un dessin fixe et fiable. Si ton application accepte des SVG arbitraires téléversés, l’analyse XML seule ne constitue pas un assainissement. Suis les conseils de la bibliothèque pour assainir les SVG fournis par les utilisateurs et isoler leur exécution avant de créer une méthode de téléversement.

Règle le placement séparément du viewBox

Dans cet exemple, unit: 'pt' définit les mesures PDF en points. La page mesure 300 sur 220 points ; la zone d’affichage du dessin commence à 30 points des bords gauche et supérieur et occupe 240 sur 160 points. La documentation du constructeur jsPDF décrit les options d’unité, de format et d’orientation du document.

Le viewBox="0 0 240 160" du SVG décrit ses coordonnées internes. Ce n’est pas une taille de page PDF. Garder la largeur et la hauteur de destination au même rapport 3:2 facilite la vérification de l’ajustement voulu. Pour réduire de moitié le dessin placé, utilise width: 120, height: 80 ; les coordonnées du tracé source peuvent rester inchangées.

Donne au SVG exporté des dimensions explicites et un viewBox cohérent avant de diagnostiquer sa position PDF. Une bordure vide étonnamment grande peut appartenir au canevas SVG. Modifier x et y déplace toute la zone d’affichage SVG, y compris cet espace vide.

Inspecte les deux PDF enregistrés

Pour comparaison, la même exécution dans le navigateur a aussi créé cette version volontairement rastérisée :

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

Le test utilisait la dépendance canvg installée avec jsPDF, 3.0.11, pour cette méthode. Les deux PDF ont été enregistrés, rouverts et rendus à la même échelle. L’inspection des dessins et images de PyMuPDF a indiqué :

Le flux de contenu du fichier vectoriel contenait des commandes de courbe et un remplissage pair-impair pour l’anneau. Le fichier matriciel plaçait un objet image. Ces nombres décrivent ce petit exemple ; un SVG plus complexe peut produire d’autres objets ou contenir son propre contenu matriciel.

Le rectangle noir est un résultat observé de cet export matriciel, y compris dans l’ouverture auparavant transparente de l’anneau. JPEG ne préserve pas la transparence alpha ; ne suppose pas que les régions transparentes d’un SVG survivront à cette méthode. Vérifie le fond réellement nécessaire, particulièrement si le logo sera placé sur un panneau coloré du document.

Le zoom seul n’est pas une preuve suffisante. Toute visionneuse PDF finit par dessiner des pixels à l’écran. Inspecte les objets du PDF et compare l’apparence enregistrée à l’original SVG. Une commande comme pdfimages -list logo-raster.pdf, de Poppler, peut lister les images intégrées. Une liste vide ne prouve pas à elle seule que les formes voulues ont été correctement exportées : la page pourrait être vide. Vérifie aussi son contenu de dessin et son apparence.

Corrige la partie défaillante de l’export

Un SVG peut déjà envelopper un bitmap. Transmettre ce fichier à un exporteur capable de traiter des vecteurs ne transforme pas ses pixels en contours modifiables. Utilise le guide d’inspection des images matricielles intégrées avant de modifier les réglages PDF.

Ce test ne couvre pas la disposition du texte, les filtres, les images externes ou le CSS arbitraire. svg2pdf.js limite explicitement sa portée à un sous-ensemble de SVG. Pour le lettrage, suis ses instructions de configuration des polices avant la conversion ou prépare des contours dans la source de dessin lorsque ce compromis convient. Conserve un original dont le texte reste modifiable si des changements de formulation futurs comptent.

Prépare le logo source avec PerfectVector

Si le logo est déjà un dessin vectoriel propre, utilise cette source. S’il ne reste qu’un PNG ou JPG, PerfectVector peut aider à reconstruire des formes modifiables avant l’étape PDF. Vectorise le logo, puis inspecte son contour extérieur, ses petites ouvertures et ses couleurs distinctes dans un éditeur SVG. Le guide de préparation des logos détaille cette inspection.

PerfectVector prépare le dessin matriciel pour cette méthode ; il n’ajoute pas la prise en charge SVG à jsPDF et ne répare pas les fonctionnalités non prises en charge par un exporteur. Compare les tracés reconstruits à l’image originale, simplifie ou redessine les détails nécessaires, puis répète la vérification PDF. Conserve une photographie comme image lorsque le traçage supprimerait des détails nécessaires. Le guide général de vectorisation d’images explique ce choix de source.

FAQ

addSvgAsImage conserve-t-il mon SVG sous forme de tracés vectoriels ? Non. L’implémentation jsPDF 4.2.1 testée rend le SVG via un canevas et intègre un JPEG. Utilise svg2pdf.js avec doc.svg lorsque tu veux convertir sa géométrie prise en charge en contenu de dessin PDF.

doc.svg accepte-t-il un nom de fichier SVG ? L’API présentée prend un élément SVG du DOM. Charge et analyse d’abord un fichier fiable ou sélectionne un élément SVG existant, puis transmets cet élément à doc.svg et attends le résultat.

Tous les SVG auront-ils la même apparence dans le PDF ? Non. svg2pdf.js prend en charge une partie limitée de SVG. Teste ton dessin réel, y compris ses polices, images, effets, dimensions et fonds, et rouvre le PDF enregistré avant de l’utiliser.

Sources

1. yWorks — Utilisation et portée de svg2pdf.js — API à élément SVG, conversion asynchrone, configuration des polices, exigences du navigateur et limites de prise en charge.
2. jsPDF — Module SVG version 4.2.1 — Implémentation avec canevas et JPEG utilisée par addSvgAsImage.
3. jsPDF — Référence du constructeur — Unités du document PDF, format de page et options d’orientation.
4. PyMuPDF — Inspection des pages — Méthodes d’inspection des dessins et images utilisées pour examiner les fichiers de test enregistrés.

Tu n’as qu’un logo matriciel ? Prépare un SVG modifiable à partir de ton logo, vérifie ses contours et ses ouvertures, puis exporte-le avec la méthode PDF choisie et inspecte les objets enregistrés et le fond.