PptxGenJS ile SVG: Slaytlarda logonuz net kalsın

slide.addImage() işlevine gerçek bir SVG verin, grafiğin en boy oranına uygun bir kutu belirleyin ve dışa aktarılan slaydı sunumun yapılacağı uygulamada kontrol edin. PptxGenJS Images API, bir görselin path değerini veya kodlanmış data verisini kabul eder; sayısal x, y, w ve h değerleri inç cinsindendir. PPTX içinde bir SVG bulunması yararlıdır, ancak dosyanın başarıyla oluşturulması, belirli bir görüntüleyicinin onu doğru gösterip göstermeyeceğini tek başına söylemez.

Aşağıdaki örnekte, gerçekten boşluk içeren özgün, iki renkli bir logo kullanılıyor. PptxGenJS 4.0.1 ile bir sunum oluşturduk, içindeki medyayı inceledik ve slaytların görüntülerini LibreOffice'te oluşturduk. Bu sunumu Microsoft PowerPoint'te test etmedik. Ekibiniz .pptx dosyaları dağıtıyorsa, alıcının sunum uygulamasını da teste dahil edin.

Yeniden adlandırılmış bir bitmap yerine yollardan oluşan SVG ile başlayın

Bunu logo.svg olarak kaydedin. 2:1 oranında bir viewBox, iki renkli yol ve fill-rule="evenodd" ile oluşturulmuş şeffaf bir dairesel boşluk içerir. Sunum açılırken alınması gereken bağlantılı görseller veya yazı tipleri yoktur.

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

Tek başına .svg dosya adı pek bir şey kanıtlamaz. Dosya gömülü bir raster görsel içerebilir; bu nedenle elinizdeki tek sürüm PNG dışa aktarımından geldiyse grafiği inceleyin. Logo dosya biçimleri rehberi, yalnızca sunumlarda kullanılabilen kopyaları dolaşıma sokmak yerine yeniden kullanılabilir bir ana vektör dosyasını korumanıza yardımcı olur.

Logoyu oranlarını değiştirmeden ekleyin

Bu kontrolde kullanılan sürümü npm install pptxgenjs@4.0.1 ile yükleyin. Bu Node betiğini logo.svg dosyasının yanına make-deck.cjs adıyla kaydedin, ardından node make-deck.cjs komutunu çalıştırın.

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

Her iki kutu da SVG gibi 2:1 oranındadır. İkinci yerleştirmede her boyut iki katına çıkarılır. Oluşturduğumuz görüntüde boşluk, renkler ve dış kontur her iki boyutta da ayırt edilebilir kaldı. Bu gözlem, bu basit test örneği ve bu görüntü oluşturma motoru için geçerlidir; her SVG efekti veya sunum uygulaması için garanti değildir.

Bilerek hatalı bir sonuç oluşturmak için aynı logoyu 3.6 × 1.0 inç boyutunda bir kutuya yerleştirdik. Dairesel boşluk ovalleşti. 3.6 × 1.8 inç boyutunda bir kutu, 2:1 oranını geri getirdi. Slayttaki w ve h değerleri grafiğin oranıyla uyuşmuyorsa, yalnızca SVG'nin piksel cinsinden width değerini değiştirmek yerleştirmeyi düzeltmez.

PPTX paketini ve işlenmiş slaydı kontrol edin

Bir .pptx, ZIP paketidir. SVG'nin dosyaya girdiğini doğrulamak için ppt/media/ klasörüne bakın, ardından sunumu hedef görüntüleyicide açın. Bunlar ayrı testlerdir: arşiv grafiği içerirken sunum uygulaması başka bir şey gösterebilir.

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

İki slaytlı, dört yerleştirmeli testimizde dört .svg medya kaydı vardı. Ayrıca .png adı taşıyan dört dosya bulunuyordu; bunların ilk baytları PNG imzaları değil, SVG XML içeriğiydi. Dolayısıyla bu paketteki .png uzantısı, raster bir yedek bulunduğunu kanıtlamıyordu. PptxGenJS'nin Node SVG sorun tartışması, geçmişteki önizleme ve görüntüleyici sorunlarını kayda geçiriyor; bu tartışmanın her derlemeyi anlattığını varsaymak yerine kendi kurulu sürümünüzü ve dışa aktarılan dosyanızı kontrol edin.

LibreOffice'te işlenen gerçek görüntü, doğru boyutlandırılmış her iki logoyu ve bilerek sıkıştırılmış olanı gösterdi. Görünen renkleri, şeffaf boşluğu ve daire ile oval arasındaki farkı kontrol ettik. Bu görüntüden, Microsoft PowerPoint'in veya başka bir görüntüleyicinin aynı sunumu nasıl işleyeceği sonucunu çıkaramayız.

SVG görünmüyorsa veya yanlış görünüyorsa

Belirli bir dosyanın boş görünmesi durumunda, yalnızca tek bir sade dolgulu yol içeren kopyayı test edin. Bu çalışırsa kalan yolları ve efektleri aşamalı olarak ekleyin. Bir forum bildirimini, bir görüntüleyicide tüm SVG'lerin başarısız olduğunun kanıtı olarak kullanmayın. Alıcının uygulaması SVG'nizi güvenilir biçimde gösteremiyorsa, test edilmiş bir PNG kopyası pratik bir görünüm yedeği olabilir; ancak bu sunumda ölçeklenebilir yol tabanlı medyadan vazgeçmiş olursunuz.

İçe aktarılan bir SVG grafik, Office'in kendi şekillerinden de farklıdır. Microsoft'un SVG düzenleme yönergeleri, desteklenen PowerPoint iş akışlarında parçaları ayrı ayrı değiştirmek için Convert to Shape işlemini açıklar. PptxGenJS addImage() bu dönüşümü gerçekleştirmez. Teslimattan sonra elle düzenleme yapmak için PowerPoint SVG şekil rehberini kullanın ve seçilen parçaları hedef uygulamada doğrulayın.

PerfectVector ile bu süreç nasıl işler?

Onaylanmış ana logo dosyası zaten SVG ise onu kullanın. Elinizde yalnızca küçük, düz renkli bir PNG veya JPG logo varsa, PerfectVector logo vektörleştirme aracı, PptxGenJS adımından önce aday yolları yeniden oluşturabilir. Önizlemede renkleri, küçük boyutlu yazıları, arka planı ve boşlukları inceleyin; indirdiğiniz SVG'yi slaytlara yerleştirmeden önce marka açısından önemli olan her şeyi düzeltin. Oluşturulan sunum yine de yukarıdaki paket ve görüntüleyici kontrollerinden geçmelidir. PerfectVector grafiği hazırlar; sunumu oluşturmaz veya doğrulamaz.

Bir fotoğrafı veya karmaşık gölgelendirmeli bir görseli raster olarak bırakmak daha iyi olabilir. Çok basit bir amblem için onaylanmış geometriyi bir vektör düzenleyicide elle yeniden çizmek, görüntüyü vektörleştirmekten daha hızlı ve öngörülebilir olabilir. İzleyicilerin ölçeklenebilir bir eklenmiş logo yerine düzenlenebilir Office nesnelerine ihtiyacı varsa, bu nesneleri slayt iş akışında oluşturun ve düzenleme gereksinimini doğrudan test edin.

Sık sorulan sorular

addImage() bir SVG'yi düzenlenebilir PowerPoint şekillerine dönüştürür mü? Hayır. Bir görsel grafik ekler. PowerPoint'te parçaları ayrı ayrı yeniden renklendirmek veya taşımak istiyorsanız, desteklenen bir uygulamada bir kopya üzerinde ayrı Convert to Shape iş akışını test edin.

SVG'm oluşturulan slaytta neden sıkışmış görünüyor? SVG'nin viewBox oranını slayttaki w:h oranıyla karşılaştırın. 240 × 120 boyutunda bir logo 2:1 oranındadır; dolayısıyla 3.6 inç genişliğindeki bir yerleştirmenin oranlarını koruması için yüksekliğinin 1.8 inç olması gerekir.

Sunumu onaylamak için ppt/media/ içinde SVG bulmak yeterli mi? Hayır. Bu, SVG medyasının pakete dahil edildiğini doğrular; ancak hedef sunum uygulamasının logoyu doğru gösterdiğini kanıtlamaz. Bitmiş sunumu orada açın ve boyutunu, renklerini, boşluklarını ve varsa efektlerini inceleyin.

Kaynaklar

1. PptxGenJS — Images API — addImage girdisini, boyutlandırma birimlerini ve SVG görüntüleyici desteğini açıklar.
2. PptxGenJS — SVG in Node.js issue — Gerçek paketin ve işlenmiş görüntünün kontrol edilmesini gerektiren geçmiş SVG önizleme ve görüntüleyici davranışlarını kayda geçirir.
3. Microsoft — Edit SVG images in Microsoft 365 — SVG grafik eklemek ile onu düzenlenebilir Office şekillerine dönüştürmek arasındaki farkı açıklar.

Elinizde yalnızca raster bir logo mu var? Bir aday SVG oluşturun, yollarını ve boşluklarını inceleyin, ardından küçük bir test sunumu hazırlayıp sonucu izleyicilerinizin kullandığı uygulamada doğrulayın.