SVG in PptxGenJS: Logos auf Folien scharf halten

Übergib ein echtes SVG an slide.addImage(), gib ihm einen Rahmen mit dem Seitenverhältnis der Grafik und prüfe die exportierte Folie in der App, die sie präsentieren wird. Die Images API von PptxGenJS akzeptiert einen Bildpfad path oder kodierte data; ihre numerischen Werte x, y, w und h sind in Zoll angegeben. Ein SVG innerhalb der PPTX ist nützlich, aber die erfolgreiche Dateierstellung allein verrät nicht, ob ein bestimmter Viewer es korrekt anzeigen wird.

Das folgende Beispiel verwendet ein eigenes zweifarbiges Logo mit einer echten Öffnung. Wir haben mit PptxGenJS 4.0.1 eine Präsentation erzeugt, ihre Medien geprüft und die Folien in LibreOffice gerendert. Diese Präsentation haben wir nicht in Microsoft PowerPoint getestet. Wenn dein Team .pptx-Dateien verteilt, mache die Präsentations-App des Empfängers zum Teil des Tests.

Beginne mit einem Pfad-SVG, nicht mit einem umbenannten Bitmap

Speichere dies als logo.svg. Es enthält eine viewBox im Verhältnis 2:1, zwei farbige Pfade und eine transparente kreisförmige Öffnung, die mit fill-rule="evenodd" gebildet wird. Es gibt keine verknüpften Bilder oder Schriften, die beim Öffnen der Präsentation geladen werden müssten.

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

Ein .svg-Dateiname allein beweist wenig. Eine Datei kann ein eingebettetes Rasterbild enthalten. Prüfe deshalb die Grafik, wenn deine einzige Version aus einem PNG-Export stammt. Der Leitfaden zu Logoformaten hilft dir, ein wiederverwendbares Vektororiginal zu behalten, statt nur für Präsentationen geeignete Kopien weiterzugeben.

Füge das Logo ohne veränderte Proportionen ein

Installiere die für diese Prüfung verwendete Version mit npm install pptxgenjs@4.0.1. Speichere dieses Node-Skript als make-deck.cjs neben logo.svg und führe dann node make-deck.cjs aus.

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" });

Beide Rahmen haben wie das SVG ein Verhältnis von 2:1. Die zweite Platzierung verdoppelt jede Abmessung. In unserer Darstellung blieben Öffnung, Farben und Umriss bei beiden Größen erkennbar. Diese Beobachtung gilt für dieses einfache Testmotiv und diesen Renderer; sie ist keine Garantie für jeden SVG-Effekt oder jede Präsentations-App.

Für einen absichtlichen Fehler platzierten wir dasselbe Logo in einem Rahmen von 3.6 × 1.0 Zoll. Die kreisförmige Öffnung wurde oval. Ein Rahmen von 3.6 × 1.8 Zoll stellte das Verhältnis 2:1 wieder her. Allein die Pixelbreite width des SVGs zu ändern, würde eine Folienplatzierung nicht korrigieren, deren w und h nicht zum Seitenverhältnis der Grafik passen.

Prüfe das PPTX-Paket und die gerenderte Folie

Eine .pptx ist ein ZIP-Paket. Sieh in ppt/media/ nach, um zu bestätigen, dass das SVG in die Datei aufgenommen wurde, und öffne dann die Präsentation im Zielviewer. Das sind separate Tests: Das Archiv kann die Grafik enthalten, während die Präsentations-App etwas anderes anzeigt.

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

Unser Test mit zwei Folien und vier Platzierungen enthielt vier .svg-Medieneinträge. Er enthielt außerdem vier Dateien mit der Endung .png, deren erste Bytes SVG-XML statt PNG-Signaturen waren. Eine .png-Endung in diesem Paket bewies deshalb nicht, dass eine Raster-Ausweichversion vorhanden war. Die Diskussion zum Node-SVG-Problem von PptxGenJS dokumentiert frühere Vorschau- und Viewerprobleme. Prüfe deine eigene installierte Version und die exportierte Datei, statt anzunehmen, dass dieser Thread jeden Build beschreibt.

Die tatsächliche LibreOffice-Darstellung zeigte beide korrekt dimensionierten Logos und die absichtlich gestauchte Version. Wir prüften die sichtbaren Farben, die transparente Öffnung und den Unterschied zwischen Kreis und Oval. Aus dieser Darstellung lässt sich nicht ableiten, wie Microsoft PowerPoint oder ein anderer Viewer dieselbe Präsentation behandelt.

Wenn das SVG fehlt oder falsch aussieht

Bei einer dateispezifischen leeren Darstellung teste eine Kopie mit nur einem einfachen gefüllten Pfad. Wenn das funktioniert, füge die übrigen Pfade und Effekte schrittweise hinzu. Verwende einen Forenbericht nicht als Beweis dafür, dass alle SVGs in einem Viewer scheitern. Wenn die App des Empfängers dein SVG nicht zuverlässig anzeigen kann, ist eine getestete PNG-Kopie möglicherweise eine pragmatische Ausweichlösung für die Darstellung, auch wenn du damit in dieser Präsentation auf skalierbare Pfadmedien verzichtest.

Eine importierte SVG-Grafik unterscheidet sich außerdem von nativen Office-Formen. Microsofts Anleitung zur SVG-Bearbeitung beschreibt In Form konvertieren, um einzelne Teile in unterstützten PowerPoint-Workflows zu ändern. PptxGenJS addImage() führt diese Konvertierung nicht aus. Für manuelle Änderungen nach der Weitergabe nutze den Leitfaden zu SVG-Formen in PowerPoint und prüfe die ausgewählten Teile in der Ziel-App.

So passt PerfectVector in den Ablauf

Wenn das freigegebene Logooriginal bereits SVG ist, verwende es. Wenn du nur ein kleines flaches PNG- oder JPG-Logo hast, kann PerfectVectors Logo-Vektorisierer vor dem PptxGenJS-Schritt Pfadkandidaten rekonstruieren. Prüfe Farben, kleine Schrift, Hintergrund und Öffnungen in der Vorschau. Korrigiere alles, was für die Marke relevant ist, bevor du das heruntergeladene SVG auf Folien platzierst. Die erzeugte Präsentation benötigt weiterhin die oben beschriebenen Paket- und Viewerprüfungen. PerfectVector bereitet Grafiken vor; es erzeugt oder validiert keine Präsentation.

Ein Foto oder ein komplexes schattiertes Bild bleibt möglicherweise besser ein Rasterbild. Bei einem sehr einfachen Zeichen kann das manuelle Nachbauen der freigegebenen Geometrie in einem Vektoreditor schneller und vorhersehbarer sein als das Nachzeichnen. Wenn das Publikum bearbeitbare Office-Objekte statt eines skalierbaren eingefügten Logos benötigt, erstelle diese Objekte im Folienworkflow und teste die Bearbeitungsanforderung direkt.

FAQ

Verwandelt addImage() ein SVG in bearbeitbare PowerPoint-Formen? Nein. Es fügt eine Bildgrafik ein. Wenn du einzelne Teile in PowerPoint umfärben oder verschieben musst, teste den separaten Workflow „In Form konvertieren“ an einer Kopie in einer unterstützten App.

Warum sieht mein SVG auf der erzeugten Folie gestaucht aus? Vergleiche das SVG-viewBox-Verhältnis mit dem Folienverhältnis w:h. Ein Logo von 240 × 120 hat ein Verhältnis von 2:1, daher benötigt eine 3.6 Zoll breite Platzierung eine Höhe von 1.8 Zoll, um die Proportionen zu erhalten.

Reicht ein SVG in ppt/media/ aus, um die Präsentation freizugeben? Nein. Es bestätigt, dass SVG-Medien eingepackt wurden, beweist aber nicht, dass die Ziel-App das Logo korrekt anzeigt. Öffne dort die fertige Präsentation und prüfe Größe, Farben, Öffnungen und Effekte.

Quellen

1. PptxGenJS — Images API — Dokumentiert addImage-Eingaben, Größeneinheiten und SVG-Viewerunterstützung.
2. PptxGenJS — SVG-Problem in Node.js — Dokumentiert früheres SVG-Vorschau- und Viewer-Verhalten, das die Prüfung des tatsächlichen Pakets und der Darstellung begründet.
3. Microsoft — SVG-Bilder in Microsoft 365 bearbeiten — Unterscheidet das Einfügen einer SVG-Grafik von ihrer Konvertierung in bearbeitbare Office-Formen.

Hast du nur ein Rasterlogo? Erstelle einen SVG-Kandidaten, prüfe seine Pfade und Öffnungen, baue dann eine kleine Testpräsentation und kontrolliere das Ergebnis in der App, die dein Publikum verwendet.