SVG в PptxGenJS: четкий логотип на слайдах

Передайте настоящий SVG в slide.addImage(), задайте ему прямоугольник с пропорциями изображения и проверьте экспортированный слайд в приложении, где его будут показывать. Images API PptxGenJS принимает path изображения или закодированные data; числовые значения x, y, w и h задаются в дюймах. SVG внутри PPTX полезен, но одного успешного создания файла недостаточно, чтобы узнать, правильно ли его покажет конкретная программа просмотра.

В примере ниже используется исходный двухцветный логотип с настоящим отверстием. Мы создали презентацию с PptxGenJS 4.0.1, проверили ее медиа и отрисовали слайды в LibreOffice. Мы не проверяли эту презентацию в Microsoft PowerPoint. Если ваша команда распространяет файлы .pptx, включите приложение получателя в проверку.

Начните с SVG из контуров, а не с переименованного растра

Сохраните это как logo.svg. У него viewBox с пропорциями 2:1, два цветных контура и прозрачное круглое отверстие, образованное через fill-rule="evenodd". В нем нет связанных изображений или шрифтов, которые нужно загружать при открытии презентации.

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

Само имя файла .svg мало что доказывает. Файл может содержать встроенное растровое изображение, поэтому проверьте графику, если единственная имеющаяся версия получена из экспорта PNG. Руководство по форматам логотипов поможет сохранить векторный оригинал для повторного использования вместо распространения копий только для презентаций.

Добавьте логотип без изменения пропорций

Установите использованную в этой проверке версию командой npm install pptxgenjs@4.0.1. Сохраните этот скрипт Node как make-deck.cjs рядом с logo.svg, затем запустите 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" });

Оба прямоугольника имеют пропорции 2:1, как SVG. Во втором размещении каждый размер удваивается. В нашей отрисовке отверстие, цвета и контур оставались узнаваемыми при обоих размерах. Это наблюдение относится к этому простому образцу и этому средству отрисовки; оно не гарантирует результат для любого эффекта SVG или приложения для презентаций.

Для намеренной ошибки мы поместили тот же логотип в прямоугольник 3.6 × 1.0 дюйма. Его круглое отверстие стало овальным. Прямоугольник 3.6 × 1.8 дюйма восстановил пропорции 2:1. Изменение только пиксельной width SVG не исправит размещение на слайде, где w и h не соответствуют пропорциям изображения.

Проверьте комплект PPTX и отрисованный слайд

.pptx — ZIP-архив. Загляните в ppt/media/, чтобы подтвердить включение SVG в файл, затем откройте презентацию в целевой программе просмотра. Это отдельные проверки: архив может содержать изображение, тогда как приложение для презентаций показывает что-то другое.

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

Наш тест с двумя слайдами и четырьмя размещениями содержал четыре медиафайла .svg. Он также содержал четыре файла с именами .png, первые байты которых были XML SVG, а не сигнатурами PNG. Поэтому суффикс .png в этом комплекте не доказывал наличие растрового запасного варианта. Обсуждение проблемы SVG в Node у PptxGenJS фиксирует прежние проблемы предпросмотра и программ просмотра; проверяйте свою установленную версию и экспортированный файл, а не предполагайте, что это обсуждение описывает каждую сборку.

Реальная отрисовка LibreOffice показала оба логотипа правильного размера и намеренно сжатый. Мы проверили видимые цвета, прозрачное отверстие и разницу между кругом и овалом. По этой отрисовке нельзя заключить, как Microsoft PowerPoint или другая программа просмотра обработает ту же презентацию.

Если SVG отсутствует или выглядит неверно

Если конкретный файл отображается пустым, проверьте копию, содержащую только один простой контур с заливкой. Если она работает, добавляйте остальные контуры и эффекты поэтапно. Не используйте сообщение на форуме как доказательство, что все SVG не работают в одной программе просмотра. Если приложение получателя не может надежно отображать SVG, проверенная копия PNG может быть практичным запасным вариантом для внешнего вида, хотя презентация при этом лишается масштабируемых медиа на основе контуров.

Импортированная SVG-графика также отличается от собственных фигур Office. Инструкции Microsoft по редактированию SVG описывают Convert to Shape для изменения отдельных частей в поддерживаемых процессах PowerPoint. addImage() PptxGenJS не выполняет это преобразование. Для ручных правок после передачи используйте руководство по преобразованию SVG в фигуры PowerPoint и проверьте выделенные части в целевом приложении.

Как это выглядит с PerfectVector

Если утвержденный оригинал логотипа уже в SVG, используйте его. Если у вас есть только небольшой плоский логотип PNG или JPG, векторизатор логотипов PerfectVector может восстановить пробные контуры перед этапом PptxGenJS. Проверьте цвета, мелкие надписи, фон и отверстия в предпросмотре; исправьте все важное для бренда перед размещением скачанного SVG на слайдах. Созданной презентации по-прежнему нужны описанные выше проверки архива и программы просмотра. PerfectVector подготавливает графику; он не создает и не проверяет презентацию.

Фотографию или сложное изображение с теневыми переходами может быть лучше оставить в растре. Для очень простого знака ручная перерисовка утвержденной геометрии в векторном редакторе может быть быстрее и предсказуемее трассировки. Если аудитории нужны редактируемые объекты Office вместо масштабируемого вставленного логотипа, создайте эти объекты в процессе работы со слайдами и проверьте требование редактирования напрямую.

Частые вопросы

Превращает ли addImage() SVG в редактируемые фигуры PowerPoint? Нет. Он вставляет изображение. Если нужно перекрашивать или перемещать отдельные части в PowerPoint, проверьте отдельный процесс Convert to Shape на копии в поддерживаемом приложении.

Почему SVG выглядит сжатым на созданном слайде? Сравните пропорции viewBox SVG с отношением w:h на слайде. Логотип 240 × 120 имеет пропорции 2:1, поэтому размещению шириной 3.6 дюйма нужна высота 1.8 дюйма для сохранения пропорций.

Достаточно ли найти SVG в ppt/media/, чтобы одобрить презентацию? Нет. Это подтверждает упаковку SVG-медиа, но не доказывает, что целевое приложение для презентаций правильно отображает логотип. Откройте готовую презентацию в нем и проверьте размер, цвета, отверстия и эффекты.

Источники

1. PptxGenJS — Images API — Описывает входные данные addImage, единицы размеров и поддержку SVG программами просмотра.
2. PptxGenJS — SVG in Node.js issue — Фиксирует прежнее поведение предпросмотра SVG и программ просмотра, из-за которого нужно проверять реальный архив и отрисовку.
3. Microsoft — Edit SVG images in Microsoft 365 — Различает вставку SVG-графики и ее преобразование в редактируемые фигуры Office.

Есть только растровый логотип? Создайте пробный SVG, проверьте его контуры и отверстия, затем соберите небольшую тестовую презентацию и проверьте результат в приложении вашей аудитории.