SVG dans PptxGenJS : un logo net sur tes diapositives

Transmets un véritable SVG à slide.addImage(), donne-lui une boîte respectant les proportions de l’illustration et vérifie la diapositive exportée dans l’application qui la présentera. L’API Images de PptxGenJS accepte un path d’image ou des data encodées ; ses valeurs numériques x, y, w et h sont en pouces. La présence d’un SVG dans le PPTX est utile, mais la création réussie du fichier ne suffit pas à déterminer si un logiciel particulier l’affichera correctement.

L’exemple ci-dessous utilise un logo bicolore original comportant une véritable ouverture. Nous avons généré une présentation avec PptxGenJS 4.0.1, examiné ses médias et affiché les diapositives dans LibreOffice. Nous n’avons pas testé cette présentation dans Microsoft PowerPoint. Si ton équipe distribue des fichiers .pptx, inclus l’application de présentation du destinataire dans les tests.

Pars d’un SVG à tracés, pas d’une image matricielle renommée

Enregistre ceci sous logo.svg. Il possède un viewBox au rapport 2:1, deux tracés colorés et une ouverture circulaire transparente créée avec fill-rule="evenodd". Aucune image ni police liée n’est à récupérer lors de l’ouverture de la présentation.

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120">
  <path fill="#176B68" fill-rule="evenodd" d="M24 10h104a14 14 0 0 1 14 14v72a14 14 0 0 1-14 14H24a14 14 0 0 1-14-14V24a14 14 0 0 1 14-14zm52 25a25 25 0 1 0 0 50 25 25 0 0 0 0-50z"/>
  <path fill="#E5A83D" d="M157 10h17l55 100h-21l-42-77-42 77h-19z"/>
</svg>

Un nom de fichier .svg ne prouve pas grand-chose. Un fichier peut contenir une image matricielle intégrée ; examine donc l’illustration si ta seule version provient d’un export PNG. Le guide des formats de logo t’aide à conserver un original vectoriel réutilisable plutôt qu’à faire circuler des copies destinées uniquement aux présentations.

Ajoute le logo sans modifier ses proportions

Installe la version utilisée pour cette vérification avec npm install pptxgenjs@4.0.1. Enregistre ce script Node sous make-deck.cjs à côté de logo.svg, puis exécute node make-deck.cjs.

const pptxgen = require("pptxgenjs");
const path = require("node:path");
 
const pptx = new pptxgen();
pptx.layout = "LAYOUT_WIDE";
const slide = pptx.addSlide();
const logo = path.join(__dirname, "logo.svg");
 
slide.addImage({ path: logo, x: 1.1, y: 1.3, w: 2.4, h: 1.2 });
slide.addImage({ path: logo, x: 6.3, y: 1.1, w: 4.8, h: 2.4 });
 
pptx.writeFile({ fileName: "logo-demo.pptx" });

Les deux boîtes sont au rapport 2:1, comme le SVG. Le second placement double chaque dimension. Dans notre rendu, le trou, les couleurs et le contour restaient reconnaissables aux deux tailles. Cette observation concerne cet exemple simple et ce moteur de rendu ; elle ne garantit pas tous les effets SVG ni toutes les applications de présentation.

Pour provoquer volontairement un défaut, nous avons placé le même logo dans une boîte de 3.6 × 1.0 pouce. Son trou circulaire est devenu ovale. Une boîte de 3.6 × 1.8 pouces a rétabli le rapport 2:1. Modifier uniquement la valeur width en pixels du SVG ne corrigerait pas un placement sur la diapositive dont les valeurs w et h ne respectent pas les proportions de l’illustration.

Vérifie le paquet PPTX et la diapositive affichée

Un .pptx est un paquet ZIP. Examine ppt/media/ pour confirmer que le SVG a été inclus dans le fichier, puis ouvre la présentation dans le logiciel cible. Ce sont deux tests distincts : l’archive peut contenir l’illustration alors que l’application de présentation affiche autre chose.

unzip -l logo-demo.pptx | grep 'ppt/media/'

Notre test de deux diapositives et quatre placements contenait quatre entrées média .svg. Il contenait aussi quatre fichiers nommés .png dont les premiers octets étaient du XML SVG, et non des signatures PNG. Un suffixe .png dans ce paquet ne prouvait donc pas l’existence d’une solution de repli matricielle. La discussion du problème SVG dans Node de PptxGenJS consigne d’anciens problèmes d’aperçu et d’affichage ; vérifie ta propre version installée et ton fichier exporté au lieu de supposer que cette discussion décrit toutes les versions.

Le rendu réel dans LibreOffice montrait les deux logos correctement dimensionnés et celui volontairement comprimé. Nous avons vérifié les couleurs visibles, l’ouverture transparente et la différence entre cercle et ovale. Ce rendu ne permet pas de déduire comment Microsoft PowerPoint ou un autre logiciel traitera la même présentation.

Si le SVG est absent ou semble incorrect

Pour un rendu vide propre à un fichier, teste une copie contenant uniquement un tracé uni simple. Si cela fonctionne, ajoute progressivement les autres tracés et effets. N’utilise pas un témoignage de forum pour affirmer que tous les SVG échouent dans un logiciel. Si l’application du destinataire ne peut pas afficher ton SVG de manière fiable, une copie PNG testée peut être une solution pragmatique pour l’apparence, même si elle renonce aux médias à tracés redimensionnables dans cette présentation.

Une illustration SVG importée diffère aussi des formes Office natives. Les instructions Microsoft sur la modification des SVG décrivent Convert to Shape pour modifier les parties individuelles dans les processus PowerPoint pris en charge. addImage() de PptxGenJS n’effectue pas cette conversion. Pour des modifications manuelles après livraison, consulte le guide des formes SVG dans PowerPoint et vérifie les parties sélectionnées dans l’application de destination.

Comment cela se présente avec PerfectVector

Si l’original approuvé du logo est déjà en SVG, utilise-le. Si tu possèdes uniquement un petit logo plat PNG ou JPG, le vectoriseur de logos PerfectVector peut reconstruire des tracés candidats avant l’étape PptxGenJS. Examine les couleurs, les petites lettres, le fond et les ouvertures dans l’aperçu ; corrige tout ce qui compte pour la marque avant de placer le SVG téléchargé sur les diapositives. La présentation générée nécessite toujours les vérifications du paquet et de l’affichage décrites plus haut. PerfectVector prépare l’illustration ; il ne génère ni ne valide la présentation.

Une photographie ou une image complexe avec des ombrages peut être mieux conservée sous forme matricielle. Pour un symbole très simple, redessiner manuellement la géométrie approuvée dans un éditeur vectoriel peut être plus rapide et plus prévisible que la vectorisation. Si le public a besoin d’objets Office modifiables plutôt que d’un logo inséré redimensionnable, crée ces objets dans le processus des diapositives et teste directement ce besoin d’édition.

FAQ

addImage() transforme-t-il un SVG en formes PowerPoint modifiables ? Non. Il insère une image. Si tu dois recolorer ou déplacer les parties individuelles dans PowerPoint, teste le processus distinct Convert to Shape sur une copie dans une application compatible.

Pourquoi mon SVG semble-t-il comprimé dans la diapositive générée ? Compare le rapport du viewBox SVG au rapport w:h de la diapositive. Un logo de 240 × 120 est au rapport 2:1 : un placement de 3.6 pouces de large nécessite donc une hauteur de 1.8 pouce pour conserver ses proportions.

Trouver un SVG dans ppt/media/ suffit-il pour approuver la présentation ? Non. Cela confirme que le média SVG a été inclus, mais ne prouve pas que l’application de présentation cible affiche correctement le logo. Ouvre-y la présentation terminée et examine sa taille, ses couleurs, ses ouvertures et ses éventuels effets.

Sources

1. PptxGenJS — API Images — Décrit les entrées de addImage, les unités de dimensionnement et la prise en charge SVG par les logiciels de présentation.
2. PptxGenJS — problème SVG dans Node.js — Consigne des comportements historiques d’aperçu et d’affichage SVG qui motivent la vérification du paquet et du rendu réels.
3. Microsoft — modifier des images SVG dans Microsoft 365 — Distingue l’insertion d’une illustration SVG de sa conversion en formes Office modifiables.

Tu possèdes uniquement un logo matriciel ? Crée un candidat SVG, examine ses tracés et ses ouvertures, puis construis une petite présentation de test et vérifie le résultat dans l’application utilisée par ton public.