SVG in PptxGenJS: un logo nitido nelle slide

Passa un vero SVG a slide.addImage(), assegnagli un riquadro con le proporzioni della grafica e controlla la slide esportata nell'app che la presenterà. L'API Images di PptxGenJS accetta un path immagine o data codificati; i valori numerici x, y, w e h sono in pollici. Un SVG nel PPTX è utile, ma la sola creazione riuscita del file non dice se un particolare visualizzatore lo mostrerà correttamente.

L'esempio qui sotto usa un logo originale bicolore con una vera apertura. Abbiamo generato una presentazione con PptxGenJS 4.0.1, esaminato i suoi media e renderizzato le slide in LibreOffice. Non abbiamo provato questa presentazione in Microsoft PowerPoint. Se il tuo team distribuisce file .pptx, includi nel test l'app di presentazione del destinatario.

Parti da un SVG a tracciati, non da una bitmap rinominata

Salva questo come logo.svg. Ha un viewBox 2:1, due tracciati colorati e un'apertura circolare trasparente formata con fill-rule="evenodd". Non ci sono immagini o font collegati da recuperare quando si apre la presentazione.

<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 nome di file .svg da solo dimostra poco. Un file può contenere un'immagine raster incorporata, quindi esamina la grafica se l'unica versione che hai proviene da un'esportazione PNG. La guida ai formati dei loghi aiuta a mantenere un originale vettoriale riutilizzabile anziché far circolare copie destinate soltanto alle presentazioni.

Aggiungi il logo senza cambiarne le proporzioni

Installa la versione usata per questo controllo con npm install pptxgenjs@4.0.1. Salva questo script Node come make-deck.cjs accanto a logo.svg, poi esegui 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" });

Entrambi i riquadri sono 2:1, come l'SVG. Il secondo posizionamento raddoppia ogni dimensione. Nel nostro rendering, foro, colori e contorno sono rimasti riconoscibili a entrambe le dimensioni. Questa osservazione si applica a questo campione semplice e a questo renderer; non è una garanzia per ogni effetto SVG o app di presentazione.

Per un errore intenzionale, abbiamo posizionato lo stesso logo in un riquadro di 3.6 × 1.0 pollici. Il foro circolare è diventato un ovale. Un riquadro di 3.6 × 1.8 pollici ha ripristinato la proporzione 2:1. Cambiare soltanto la width in pixel dell'SVG non correggerebbe un posizionamento nella slide i cui w e h non corrispondono al rapporto della grafica.

Controlla il pacchetto PPTX e la slide renderizzata

Un .pptx è un pacchetto ZIP. Guarda in ppt/media/ per confermare che l'SVG sia entrato nel file, poi apri la presentazione nel visualizzatore di destinazione. Sono test separati: l'archivio può contenere la grafica mentre l'app di presentazione mostra qualcos'altro.

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

Il nostro test con due slide e quattro posizionamenti conteneva quattro voci media .svg. Conteneva anche quattro file con nome .png i cui primi byte erano XML SVG, anziché firme PNG. Un suffisso .png in questo pacchetto quindi non dimostrava la presenza di una copia raster di riserva. La discussione del problema SVG in Node di PptxGenJS documenta precedenti problemi di anteprima e visualizzazione; controlla la tua versione installata e il file esportato anziché presumere che quella discussione descriva ogni build.

Il rendering effettivo in LibreOffice ha mostrato sia i loghi dimensionati correttamente sia quello compresso intenzionalmente. Abbiamo controllato i colori visibili, l'apertura trasparente e la differenza tra cerchio e ovale. Da questo rendering non possiamo dedurre come Microsoft PowerPoint o un altro visualizzatore gestirà la stessa presentazione.

Se l'SVG manca o appare errato

Per un rendering vuoto specifico di un file, prova una copia che contiene soltanto un tracciato semplice riempito. Se funziona, aggiungi gradualmente i tracciati e gli effetti rimanenti. Non usare una segnalazione in un forum come prova che tutti gli SVG non funzionino in un visualizzatore. Se l'app del destinatario non visualizza il tuo SVG in modo affidabile, una copia PNG verificata può essere una soluzione pratica di riserva per l'aspetto, anche se rinuncia ai media a tracciati scalabili in quella presentazione.

Una grafica SVG importata è anche diversa dalle forme Office native. Le istruzioni Microsoft per modificare SVG descrivono Convert to Shape per cambiare singole parti nei flussi PowerPoint supportati. addImage() di PptxGenJS non esegue quella conversione. Per modifiche manuali dopo la consegna, usa la guida alle forme SVG in PowerPoint e verifica le parti selezionate nell'app di destinazione.

Come funziona con PerfectVector

Se l'originale approvato del logo è già SVG, usalo. Se hai soltanto un piccolo logo piatto PNG o JPG, il vettorializzatore di loghi di PerfectVector può ricostruire tracciati candidati prima del passaggio PptxGenJS. Esamina colori, scritte piccole, sfondo e aperture nell'anteprima; correggi tutto ciò che conta per il marchio prima di posizionare l'SVG scaricato sulle slide. La presentazione generata richiede comunque i controlli del pacchetto e del visualizzatore descritti sopra. PerfectVector prepara la grafica; non genera né convalida la presentazione.

Una fotografia o un'immagine complessa con sfumature può essere meglio lasciata raster. Per un simbolo molto semplice, ridisegnare manualmente la geometria approvata in un editor vettoriale può essere più veloce e prevedibile del ricalco. Quando il pubblico richiede oggetti Office modificabili anziché un logo inserito scalabile, crea quegli oggetti nel flusso delle slide e prova direttamente il requisito di modifica.

FAQ

addImage() trasforma un SVG in forme PowerPoint modificabili? No. Inserisce una grafica immagine. Se devi ricolorare o spostare singole parti in PowerPoint, prova il flusso separato Convert to Shape su una copia in un'app supportata.

Perché il mio SVG sembra schiacciato nella slide generata? Confronta il rapporto del viewBox SVG con il rapporto w:h della slide. Un logo di 240 × 120 è 2:1, quindi un posizionamento largo 3.6 pollici richiede un'altezza di 1.8 pollici per mantenerne le proporzioni.

Trovare un SVG in ppt/media/ basta per approvare la presentazione? No. Conferma che i media SVG sono stati confezionati, ma non dimostra che l'app di presentazione di destinazione visualizzi correttamente il logo. Apri lì la presentazione finita ed esamina dimensioni, colori, aperture ed eventuali effetti.

Fonti

1. PptxGenJS — API Images — Documenta gli input di addImage, le unità di dimensionamento e il supporto SVG dei visualizzatori.
2. PptxGenJS — Problema SVG in Node.js — Documenta comportamenti storici di anteprima e visualizzazione SVG che motivano il controllo del pacchetto e del rendering effettivi.
3. Microsoft — Modificare immagini SVG in Microsoft 365 — Distingue l'inserimento di una grafica SVG dalla sua conversione in forme Office modificabili.

Hai soltanto un logo raster? Crea un candidato SVG, esamina tracciati e aperture, poi costruisci una piccola presentazione di test e verifica il risultato nell'app usata dal tuo pubblico.