SVG no PptxGenJS: mantenha o logo nítido nos slides

Passe um SVG verdadeiro para slide.addImage(), dê a ele uma caixa com a proporção da arte e confira o slide exportado no aplicativo que o apresentará. A API de imagens do PptxGenJS aceita um path de imagem ou data codificado; seus valores numéricos x, y, w e h estão em polegadas. Um SVG dentro do PPTX é útil, mas apenas criar o arquivo com sucesso não informa se um visualizador específico o mostrará corretamente.

O exemplo abaixo usa um logo original de duas cores com uma abertura real. Geramos uma apresentação com PptxGenJS 4.0.1, inspecionamos suas mídias e renderizamos os slides no LibreOffice. Não testamos essa apresentação no Microsoft PowerPoint. Se sua equipe distribui arquivos .pptx, inclua o aplicativo de apresentação do destinatário no teste.

Comece com um SVG de traçados, não um bitmap renomeado

Salve isto como logo.svg. Ele tem um viewBox 2:1, dois traçados coloridos e uma abertura circular transparente formada com fill-rule="evenodd". Não há imagens vinculadas nem fontes para buscar quando a apresentação abrir.

<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>

Um nome de arquivo .svg sozinho comprova pouco. Um arquivo pode conter uma imagem raster incorporada, portanto inspecione a arte se sua única versão veio de uma exportação PNG. O guia de formatos de logo ajuda a manter um original vetorial reutilizável em vez de circular apenas cópias para apresentação.

Adicione o logo sem mudar suas proporções

Instale a versão usada nesta verificação com npm install pptxgenjs@4.0.1. Salve este script Node como make-deck.cjs ao lado de logo.svg e execute 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" });

As duas caixas são 2:1, como o SVG. A segunda inserção dobra cada dimensão. Em nossa renderização, a abertura, as cores e o contorno permaneceram reconhecíveis nos dois tamanhos. Essa observação se aplica a este exemplo simples e a este renderizador; não é uma garantia para todos os efeitos SVG ou aplicativos de apresentação.

Para provocar uma falha deliberada, colocamos o mesmo logo em uma caixa de 3.6 × 1.0 polegadas. Sua abertura circular virou uma oval. Uma caixa de 3.6 × 1.8 polegadas restaurou a proporção 2:1. Mudar apenas o width em pixels do SVG não corrigiria uma inserção no slide cujos w e h divergem da proporção da arte.

Confira o pacote PPTX e o slide renderizado

Um .pptx é um pacote ZIP. Procure em ppt/media/ para confirmar que o SVG entrou no arquivo e abra a apresentação no visualizador de destino. São testes separados: o arquivo compactado pode conter a arte enquanto o aplicativo de apresentação exibe outra coisa.

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

Nosso teste de dois slides e quatro inserções continha quatro entradas de mídia .svg. Também continha quatro arquivos chamados .png cujos primeiros bytes eram XML SVG, em vez de assinaturas PNG. Um sufixo .png nesse pacote, portanto, não comprovava uma alternativa raster. A discussão de problema SVG no Node do PptxGenJS registra problemas anteriores de prévia e visualizadores; confira sua própria versão instalada e arquivo exportado em vez de presumir que a discussão descreve todas as compilações.

A renderização real no LibreOffice mostrou os dois logos com tamanho correto e o deliberadamente comprimido. Conferimos as cores visíveis, a abertura transparente e a diferença entre círculo e oval. Não podemos inferir dessa renderização como o Microsoft PowerPoint ou outro visualizador tratará a mesma apresentação.

Se o SVG estiver ausente ou parecer errado

Para uma renderização vazia específica de um arquivo, teste uma cópia contendo apenas um traçado simples preenchido. Se funcionar, adicione os traçados e efeitos restantes em etapas. Não use um relato de fórum como prova de que todos os SVGs falham em um visualizador. Se o aplicativo do destinatário não exibir seu SVG de forma confiável, uma cópia PNG testada pode ser uma alternativa prática de aparência, embora abra mão de mídia de traçados escaláveis nessa apresentação.

Um gráfico SVG importado também é diferente de formas Office nativas. As instruções de edição SVG da Microsoft descrevem Convert to Shape (converter em forma) para mudar partes individuais em fluxos PowerPoint compatíveis. addImage() do PptxGenJS não realiza essa conversão. Para edições manuais após a entrega, use o guia de formas SVG no PowerPoint e verifique as partes selecionadas no aplicativo de destino.

Como isso funciona com o PerfectVector

Se o original aprovado do logo já é SVG, use-o. Se você só tem um pequeno logo PNG ou JPG plano, o vetorizador de logos do PerfectVector pode reconstruir traçados candidatos antes da etapa PptxGenJS. Inspecione as cores, as letras pequenas, o fundo e as aberturas na prévia; corrija tudo que importar para a marca antes de inserir o SVG baixado nos slides. A apresentação gerada ainda precisa das verificações de pacote e visualizador acima. O PerfectVector prepara a arte; não gera nem valida a apresentação.

Uma fotografia ou imagem complexa com sombreamento pode ficar melhor como raster. Para uma marca muito simples, redesenhar manualmente a geometria aprovada em um editor vetorial pode ser mais rápido e previsível do que traçar. Quando o público precisar de objetos Office editáveis em vez de um logo inserido escalável, crie esses objetos no fluxo dos slides e teste diretamente o requisito de edição.

Perguntas frequentes

addImage() transforma um SVG em formas PowerPoint editáveis? Não. Ele insere um gráfico de imagem. Se você precisar recolorir ou mover partes individuais no PowerPoint, teste o fluxo separado Convert to Shape em uma cópia, em um aplicativo compatível.

Por que meu SVG parece comprimido no slide gerado? Compare a proporção do viewBox SVG com a proporção w:h do slide. Um logo de 240 × 120 é 2:1, portanto uma inserção de 3.6 polegadas de largura precisa de 1.8 polegadas de altura para manter as proporções.

Encontrar um SVG em ppt/media/ basta para aprovar a apresentação? Não. Isso confirma que a mídia SVG foi empacotada, mas não prova que o aplicativo de apresentação de destino exibe o logo corretamente. Abra a apresentação final nele e inspecione tamanho, cores, aberturas e efeitos.

Fontes

1. PptxGenJS — API de imagens — Documenta entradas de addImage, unidades de tamanho e suporte SVG nos visualizadores.
2. PptxGenJS — Problema de SVG no Node.js — Registra comportamentos históricos de prévia e visualizadores SVG que motivam verificar o pacote e a renderização reais.
3. Microsoft — Edite imagens SVG no Microsoft 365 — Diferencia inserir um gráfico SVG de convertê-lo em formas Office editáveis.

Só tem um logo raster? Crie um candidato SVG, inspecione seus traçados e aberturas, monte uma pequena apresentação de teste e verifique o resultado no aplicativo usado pelo seu público.