SVG en PptxGenJS: un logotipo nítido en tus diapositivas

Pasa un SVG auténtico a slide.addImage(), asígnale un recuadro con la relación de aspecto del diseño y comprueba la diapositiva exportada en la aplicación donde se presentará. La API de imágenes de PptxGenJS acepta una imagen mediante una ruta path o datos codificados en data; sus valores numéricos x, y, w y h están en pulgadas. Un SVG dentro del PPTX es útil, pero crear el archivo correctamente no basta para saber si un visor concreto lo mostrará bien.

El siguiente ejemplo utiliza un logotipo original de dos colores con una abertura real. Generamos una presentación con PptxGenJS 4.0.1, inspeccionamos sus recursos y renderizamos las diapositivas en LibreOffice. No probamos esta presentación en Microsoft PowerPoint. Si tu equipo distribuye archivos .pptx, incluye la aplicación de presentaciones del destinatario en la prueba.

Empieza por un SVG con trazados, no por un mapa de bits renombrado

Guarda esto como logo.svg. Tiene un viewBox de 2:1, dos trazados de colores y una abertura circular transparente creada con fill-rule="evenodd". No hay imágenes vinculadas ni fuentes que deban descargarse al abrir la presentación.

<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 nombre de archivo .svg demuestra poco por sí solo. Un archivo puede contener una imagen rasterizada incrustada, así que inspecciona el diseño si la única versión que tienes procede de una exportación PNG. La guía de formatos de logotipo te ayuda a conservar un original vectorial reutilizable en lugar de distribuir copias hechas solo para presentaciones.

Añade el logotipo sin cambiar sus proporciones

Instala la versión utilizada para esta comprobación con npm install pptxgenjs@4.0.1. Guarda este script de Node como make-deck.cjs junto a logo.svg y después ejecuta 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" });

Ambos recuadros son de 2:1, como el SVG. La segunda colocación duplica cada dimensión. En nuestro renderizado, el hueco, los colores y el contorno siguieron siendo reconocibles en ambos tamaños. Esa observación se aplica a este ejemplo sencillo y a este renderizador; no garantiza el comportamiento de todos los efectos SVG ni de todas las aplicaciones de presentaciones.

Para provocar un fallo deliberado, colocamos el mismo logotipo en un recuadro de 3.6 × 1.0 pulgadas. Su hueco circular se convirtió en un óvalo. Un recuadro de 3.6 × 1.8 pulgadas recuperó la proporción 2:1. Cambiar únicamente el width en píxeles del SVG no corregiría una colocación en la diapositiva cuyos w y h no coinciden con la proporción del diseño.

Comprueba el paquete PPTX y la diapositiva renderizada

Un .pptx es un paquete ZIP. Busca en ppt/media/ para confirmar que el SVG entró en el archivo y después abre la presentación en el visor de destino. Son pruebas diferentes: el archivo puede contener el diseño mientras la aplicación de presentaciones muestra otra cosa.

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

Nuestra prueba de dos diapositivas y cuatro colocaciones contenía cuatro recursos .svg. También contenía cuatro archivos con nombre .png cuyos primeros bytes eran XML SVG, en lugar de firmas PNG. Por tanto, un sufijo .png en este paquete no demostraba que hubiera una alternativa rasterizada. La conversación sobre el problema de SVG en Node de PptxGenJS registra problemas anteriores de vistas previas y visores; comprueba tu versión instalada y tu archivo exportado en lugar de suponer que ese hilo describe todas las compilaciones.

El renderizado real de LibreOffice mostró tanto los logotipos con tamaños correctos como el comprimido deliberadamente. Comprobamos los colores visibles, la abertura transparente y la diferencia entre círculo y óvalo. No podemos deducir de ese renderizado cómo tratará la misma presentación Microsoft PowerPoint u otro visor.

Si el SVG falta o se ve mal

Para un renderizado en blanco específico de un archivo, prueba una copia que contenga solo un trazado sencillo con relleno. Si funciona, añade los trazados y efectos restantes por etapas. No uses un informe de un foro como prueba de que todos los SVG fallan en un visor. Si la aplicación del destinatario no puede mostrar tu SVG de forma fiable, una copia PNG probada puede ser una alternativa práctica de apariencia, aunque renuncia a los recursos de trazados escalables en esa presentación.

Un gráfico SVG importado también es diferente de las formas nativas de Office. Las instrucciones de edición de SVG de Microsoft describen Convertir en forma para modificar partes individuales en los procesos compatibles de PowerPoint. addImage() de PptxGenJS no realiza esa conversión. Para editar manualmente después de la entrega, utiliza la guía de formas SVG en PowerPoint y comprueba las partes seleccionadas en la aplicación de destino.

Cómo encaja PerfectVector en este proceso

Si el original aprobado del logotipo ya es SVG, úsalo. Si solo tienes un pequeño logotipo plano PNG o JPG, el vectorizador de logotipos de PerfectVector puede reconstruir trazados candidatos antes del paso de PptxGenJS. Inspecciona los colores, las letras pequeñas, el fondo y las aberturas en la vista previa; corrige cualquier detalle importante para la marca antes de colocar el SVG descargado en las diapositivas. La presentación generada sigue necesitando las comprobaciones del paquete y del visor descritas arriba. PerfectVector prepara la ilustración; no genera ni valida la presentación.

Puede ser mejor conservar como imagen rasterizada una fotografía o una imagen con sombreado complejo. Para una marca muy sencilla, redibujar manualmente la geometría aprobada en un editor vectorial puede ser más rápido y previsible que trazarla. Cuando el público necesite objetos de Office editables en lugar de un logotipo insertado escalable, crea esos objetos dentro del proceso de diapositivas y comprueba directamente el requisito de edición.

Preguntas frecuentes

¿Convierte addImage() un SVG en formas editables de PowerPoint? No. Inserta un gráfico de imagen. Si necesitas recolorear o mover partes individuales en PowerPoint, prueba el proceso independiente de Convertir en forma sobre una copia en una aplicación compatible.

¿Por qué mi SVG parece comprimido en la diapositiva generada? Compara la proporción del viewBox del SVG con la proporción w:h de la diapositiva. Un logotipo de 240 × 120 es de 2:1, así que una colocación de 3.6 pulgadas de ancho necesita 1.8 pulgadas de alto para conservar sus proporciones.

¿Basta con encontrar un SVG en ppt/media/ para aprobar la presentación? No. Confirma que se incluyó un recurso SVG en el paquete, pero no demuestra que la aplicación de presentaciones de destino muestre correctamente el logotipo. Abre allí la presentación terminada e inspecciona su tamaño, colores, aberturas y efectos.

Fuentes

1. PptxGenJS — API de imágenes — documenta las entradas de addImage, las unidades de tamaño y la compatibilidad de los visores con SVG.
2. PptxGenJS — Problema de SVG en Node.js — registra el comportamiento histórico de las vistas previas y los visores de SVG que motiva comprobar el paquete y el renderizado reales.
3. Microsoft — Editar imágenes SVG en Microsoft 365 — distingue entre insertar un gráfico SVG y convertirlo en formas editables de Office.

¿Solo tienes un logotipo rasterizado? Crea una alternativa SVG, inspecciona sus trazados y aberturas y después crea una pequeña presentación de prueba y verifica el resultado en la aplicación que usa tu público.