SVG в jsPDF: сохраните контуры логотипа в PDF из браузера

Чтобы поместить контуры SVG-логотипа в PDF, созданный браузером с jsPDF, загрузите svg2pdf.js, передайте элемент SVG в await doc.svg(...), затем сохраните документ. Выбирайте addSvgAsImage только если допустим растр. Его входной SVG не означает, что итоговый PDF содержит контуры SVG.

Пример использования svg2pdf.js описывает асинхронный вызов с элементом. Реализация модуля SVG jsPDF показывает другой способ: рендеринг в canvas, кодирование JPEG и добавление этого изображения в PDF.

Для логотипа счета, билета или отчета сохраните оригинальный SVG как редактируемый основной файл. Руководство проверяет простую двухцветную эмблему, задает размещение в пунктах PDF и проверяет сохраненные объекты. Оно не предполагает сохранение каждой возможности SVG при конвертации.

Выберите нужный вывод

Третий способ полезен, когда нужен подготовленный PDF логотипа, а не документ, собранный в JavaScript. Для документов вне браузера руководство по SVG в LaTeX объясняет отдельный процесс экспорта и включения. Для процесса документов Node пример SVG в PDFKit различает вставку полного документа и разбор одного контура.

Если итоговый файл — презентация, используйте руководство по изображениям SVG в PptxGenJS. Оно проверяет пропорции логотипа, медиа экспортированного PPTX и внешний вид в приложении презентаций вместо применения настроек PDF к другому формату документа.

Сначала запустите небольшой пример с закрепленными версиями

Пример выполнялся в браузере с jsPDF 4.2.1 и svg2pdf.js 2.8.1. Это проверенные версии, а не обещание о будущих выпусках. Пакет называется svg2pdf.js, включая суффикс; пакеты с похожими названиями могут обслуживать другие процессы.

В небольшом браузерном проекте со сборщиком JavaScript установите:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

Используйте эту оригинальную эмблему как входные данные. Ее кольцо имеет настоящее отверстие благодаря правилу заливки even-odd. Второй контур — округлая вершина. Здесь нет шрифтов, связанных файлов, фильтров и встроенных растровых изображений.

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

Запустите в браузере, а не непосредственно в скрипте Node.js. Заметки библиотеки об использовании и области поддержки требуют работающего DOM браузера и описывают ограниченную поддержку SVG. В приложении с серверным рендерингом поместите эту работу в клиентский обработчик экспорта.

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

Задавайте размещение отдельно от viewBox

В примере unit: 'pt' задает измерения PDF в пунктах. Страница имеет размер 300 на 220 пунктов; область просмотра графики начинается в 30 пунктах от левого и верхнего края и занимает 240 на 160 пунктов. Документация конструктора jsPDF описывает единицы документа, формат и ориентацию.

viewBox="0 0 240 160" SVG описывает внутренние координаты, а не размер страницы PDF. Сохранение ширины и высоты назначения в том же соотношении 3:2 упрощает проверку размещения. Чтобы уменьшить размещенную графику вдвое, используйте width: 120, height: 80; координаты исходных контуров могут остаться прежними.

Задайте экспортированному SVG явные размеры и разумный viewBox перед диагностикой положения в PDF. Неожиданно широкие пустые поля могут быть частью холста SVG. Изменение x и y перемещает всю область просмотра SVG, включая пустое пространство.

Проверьте оба сохраненных PDF

Для сравнения тот же запуск браузера также создал намеренно растеризованную версию:

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

Для этого способа тест использовал установленную зависимость canvg jsPDF версии 3.0.11. Оба PDF были сохранены, открыты заново и отрендерены в одном масштабе. Проверка рисования и изображений PyMuPDF сообщила:

Поток содержимого векторного файла включал команды кривых и заливку even-odd для кольца. Растровый файл разместил объект изображения. Эти количества описывают небольшой тест; более сложный SVG может создавать другие объекты или содержать собственный растр.

Черный прямоугольник — наблюдаемый результат этого растрового экспорта, включая бывшее прозрачным отверстие кольца. JPEG не сохраняет альфа-прозрачность; не предполагайте, что прозрачные области SVG переживут этот способ. Проверьте действительно нужный фон, особенно если логотип будет на цветной панели документа.

Одного увеличения недостаточно как доказательства. Любой просмотрщик PDF в итоге рисует пиксели на экране. Проверьте объекты PDF и сравните сохраненный внешний вид с оригиналом SVG. Команда вроде pdfimages -list logo-raster.pdf из Poppler может перечислить встроенные изображения. Один пустой список изображений не доказывает правильный экспорт задуманных фигур: страница может быть пустой. Проверяйте также содержимое рисования и внешний вид.

Исправьте сбойную часть экспорта

SVG уже может содержать растр. Передача такого файла через векторный экспортер не трассирует пиксели в редактируемые контуры. Используйте руководство по проверке встроенного растра перед изменением настроек PDF.

Тест не охватывает размещение текста, фильтры, внешние изображения и произвольный CSS. svg2pdf.js явно ограничивает область поддержки подмножеством SVG. Для надписей следуйте инструкциям настройки шрифтов перед конвертацией или подготовьте контуры в исходном дизайне, когда такой компромисс уместен. Сохраните оригинал с редактируемым текстом, если будущие изменения формулировок важны.

Подготовьте исходный логотип с PerfectVector

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

PerfectVector готовит растровую графику для процесса, а не добавляет поддержку SVG в jsPDF и не исправляет неподдерживаемые возможности экспортера. Сравните восстановленные контуры с исходным изображением, упростите или перерисуйте нужные детали, затем повторите проверку PDF. Сохраните фотографию изображением, если трассировка отбросит нужные детали. Более широкое руководство по векторизации изображений объясняет выбор исходника.

FAQ

Сохраняет ли addSvgAsImage мой SVG в виде векторных контуров? Нет. Проверенная реализация jsPDF 4.2.1 рендерит SVG через canvas и встраивает JPEG. Используйте svg2pdf.js с doc.svg, когда нужна конвертация поддерживаемой геометрии в рисуемое содержимое PDF.

Принимает ли doc.svg имя файла SVG? Показанный API принимает DOM-элемент SVG. Сначала загрузите и разберите доверенный файл или выберите существующий элемент SVG, затем передайте элемент в doc.svg и дождитесь результата.

Будет ли любой SVG выглядеть одинаково в PDF? Нет. svg2pdf.js поддерживает ограниченную часть SVG. Проверьте реальную графику, включая шрифты, изображения, эффекты, размеры и фоны, и снова откройте сохраненный PDF перед использованием.

Sources

1. yWorks — svg2pdf.js usage and scope — API элемента SVG, асинхронная конвертация, настройка шрифтов, требования браузера и ограничения области поддержки.
2. jsPDF — SVG module at version 4.2.1 — Реализация canvas и JPEG, используемая addSvgAsImage.
3. jsPDF — Constructor reference — Единицы документа PDF, формат страницы и ориентация.
4. PyMuPDF — Page inspection — Методы проверки рисования и изображений для сохраненных тестовых файлов.

Есть только растровый логотип? Подготовьте редактируемый SVG из логотипа, проверьте контуры и отверстия, затем экспортируйте выбранным способом PDF и проверьте сохраненные объекты и фон.