SVG w PptxGenJS: zachowaj ostrość logo na slajdach

Przekaż prawdziwy plik SVG do slide.addImage(), umieść go w obszarze o proporcjach grafiki i sprawdź wyeksportowany slajd w aplikacji, w której będzie prezentowany. Images API biblioteki PptxGenJS przyjmuje ścieżkę obrazu path lub zakodowane dane data; wartości liczbowe x, y, w i h są podawane w calach. Obecność SVG w pliku PPTX jest przydatna, ale samo pomyślne utworzenie pliku nie pozwala stwierdzić, czy konkretna aplikacja wyświetli go poprawnie.

W poniższym przykładzie używamy oryginalnego dwukolorowego logo z rzeczywistym otworem. Wygenerowaliśmy prezentację za pomocą PptxGenJS 4.0.1, sprawdziliśmy zawarte w niej multimedia i wyrenderowaliśmy slajdy w LibreOffice. Nie testowaliśmy tej prezentacji w Microsoft PowerPoint. Jeśli Twój zespół rozsyła pliki .pptx, uwzględnij w testach aplikację do prezentacji używaną przez odbiorcę.

Zacznij od SVG złożonego ze ścieżek, a nie od bitmapy ze zmienioną nazwą

Zapisz ten kod jako logo.svg. Ma viewBox o proporcjach 2:1, dwie kolorowe ścieżki i przezroczysty okrągły otwór utworzony za pomocą fill-rule="evenodd". Nie zawiera podlinkowanych obrazów ani fontów, które trzeba pobrać przy otwieraniu prezentacji.

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

Sama nazwa pliku z rozszerzeniem .svg niewiele dowodzi. Plik może zawierać osadzony obraz rastrowy, więc sprawdź grafikę, jeśli jedyna posiadana przez Ciebie wersja pochodzi z eksportu PNG. Przewodnik po formatach plików logo pomoże Ci zachować źródłową grafikę wektorową do wielokrotnego użytku zamiast rozpowszechniać kopie przeznaczone wyłącznie do prezentacji.

Dodaj logo bez zmiany jego proporcji

Zainstaluj wersję używaną w tym teście poleceniem npm install pptxgenjs@4.0.1. Zapisz ten skrypt Node jako make-deck.cjs obok pliku logo.svg, a następnie uruchom 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" });

Oba obszary mają proporcje 2:1, tak jak SVG. W drugim przypadku każdy wymiar jest dwukrotnie większy. W naszym renderze otwór, kolory i obrys pozostały rozpoznawalne w obu rozmiarach. Ta obserwacja dotyczy tego prostego przykładu testowego i tego mechanizmu renderowania; nie stanowi gwarancji dla każdego efektu SVG ani każdej aplikacji do prezentacji.

Aby celowo wywołać błąd, umieściliśmy to samo logo w obszarze o wymiarach 3.6 × 1.0 cala. Jego okrągły otwór stał się owalem. Obszar o wymiarach 3.6 × 1.8 cala przywrócił proporcje 2:1. Zmiana samej szerokości width SVG wyrażonej w pikselach nie poprawiłaby proporcji logo na slajdzie, jeśli stosunek wartości w do h nie odpowiada proporcjom grafiki.

Sprawdź pakiet PPTX i wyrenderowany slajd

Plik .pptx jest pakietem ZIP. Zajrzyj do ppt/media/, aby potwierdzić, że SVG trafiło do pliku, a następnie otwórz prezentację w docelowej aplikacji. To oddzielne testy: archiwum może zawierać grafikę, podczas gdy aplikacja do prezentacji wyświetla coś innego.

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

Nasza prezentacja testowa z dwoma slajdami i czterema umieszczeniami logo zawierała cztery pliki multimedialne .svg. Zawierała też cztery pliki z rozszerzeniem .png, których początkowe bajty były kodem XML SVG, a nie sygnaturami PNG. Rozszerzenie .png w tym pakiecie nie dowodziło więc istnienia rastrowej wersji zastępczej. Dyskusja o problemie z SVG w Node w projekcie PptxGenJS dokumentuje wcześniejsze problemy z podglądem i aplikacjami wyświetlającymi prezentacje; sprawdź własną zainstalowaną wersję i wyeksportowany plik zamiast zakładać, że ten wątek opisuje każdą kompilację.

Rzeczywisty render w LibreOffice pokazał oba logo o prawidłowych wymiarach oraz to celowo ściśnięte. Sprawdziliśmy widoczne kolory, przezroczysty otwór i różnicę między okręgiem a owalem. Na podstawie tego renderu nie możemy wnioskować, jak Microsoft PowerPoint lub inna aplikacja poradzi sobie z tą samą prezentacją.

Jeśli brakuje SVG lub wygląda ono nieprawidłowo

Jeśli pusty render dotyczy konkretnego pliku, przetestuj kopię zawierającą tylko jedną prostą ścieżkę z wypełnieniem. Jeśli zadziała, dodawaj pozostałe ścieżki i efekty etapami. Nie traktuj zgłoszenia na forum jako dowodu, że w danej aplikacji nie działa żaden plik SVG. Jeśli aplikacja odbiorcy nie potrafi niezawodnie wyświetlać Twojego SVG, przetestowana kopia PNG może być praktycznym rozwiązaniem zastępczym zachowującym wygląd, choć oznacza rezygnację ze skalowalnej grafiki opartej na ścieżkach w tej prezentacji.

Zaimportowana grafika SVG różni się też od natywnych kształtów pakietu Office. Instrukcje edycji SVG firmy Microsoft opisują polecenie Convert to Shape służące do zmieniania poszczególnych części w obsługiwanych procesach pracy w PowerPoint. PptxGenJS addImage() nie wykonuje tej konwersji. Aby ręcznie edytować grafikę po dostarczeniu prezentacji, skorzystaj z przewodnika po konwersji SVG na kształty w PowerPoint i zweryfikuj wybrane części w docelowej aplikacji.

Jak wygląda to z PerfectVector

Jeśli zatwierdzony plik źródłowy logo jest już w formacie SVG, użyj go. Jeśli masz tylko małe logo PNG lub JPG o płaskich kolorach, narzędzie PerfectVector do wektoryzacji logo może odtworzyć ścieżki do oceny przed etapem pracy z PptxGenJS. Sprawdź w podglądzie kolory, drobne litery, tło i otwory; popraw wszystko, co ma znaczenie dla marki, zanim umieścisz pobrany plik SVG na slajdach. Wygenerowana prezentacja nadal wymaga opisanych wyżej kontroli pakietu i wyświetlania w aplikacji. PerfectVector przygotowuje grafikę; nie generuje ani nie weryfikuje prezentacji.

Fotografię lub złożony obraz z cieniowaniem może być lepiej pozostawić w postaci rastrowej. W przypadku bardzo prostego znaku ręczne odtworzenie zatwierdzonej geometrii w edytorze grafiki wektorowej może być szybsze i bardziej przewidywalne niż wektoryzacja przez obrysowywanie. Gdy odbiorcy potrzebują edytowalnych obiektów pakietu Office zamiast skalowalnego wstawionego logo, utwórz te obiekty podczas pracy nad slajdem i bezpośrednio przetestuj spełnienie wymagania dotyczącego edycji.

FAQ

Czy addImage() zamienia SVG w edytowalne kształty PowerPoint? Nie. Wstawia grafikę jako obraz. Jeśli potrzebujesz zmieniać kolory lub przesuwać poszczególne części w PowerPoint, przetestuj oddzielny proces z użyciem polecenia Convert to Shape na kopii w obsługiwanej aplikacji.

Dlaczego moje SVG wygląda na ściśnięte na wygenerowanym slajdzie? Porównaj proporcje viewBox SVG z proporcjami w:h na slajdzie. Logo o wymiarach 240 × 120 ma proporcje 2:1, więc jeśli umieszczasz je na slajdzie z szerokością 3.6 cala, ustaw wysokość na 1.8 cala, aby zachować proporcje.

Czy znalezienie SVG w ppt/media/ wystarczy, aby zatwierdzić prezentację? Nie. Potwierdza to, że grafika SVG została umieszczona w pakiecie, ale nie dowodzi, że docelowa aplikacja do prezentacji wyświetla logo poprawnie. Otwórz w niej gotową prezentację i sprawdź rozmiar, kolory, otwory oraz wszelkie efekty.

Źródła

1. PptxGenJS — Images API — Dokumentuje dane wejściowe addImage, jednostki wymiarów i obsługę SVG w aplikacjach wyświetlających prezentacje.
2. PptxGenJS — SVG in Node.js issue — Dokumentuje historyczne zachowanie podglądu SVG i aplikacji wyświetlających prezentacje, które uzasadnia sprawdzanie rzeczywistego pakietu i renderu.
3. Microsoft — Edit SVG images in Microsoft 365 — Rozróżnia wstawianie grafiki SVG i przekształcanie jej w edytowalne kształty pakietu Office.

Masz tylko rastrowe logo? Utwórz wersję SVG do oceny, sprawdź jej ścieżki i otwory, a następnie zbuduj małą prezentację testową i zweryfikuj wynik w aplikacji używanej przez Twoich odbiorców.