SVG PDFKit: Đặt logo vector mà không làm phẳng

Để đặt logo SVG hoàn chỉnh vào PDF tạo bằng Node, dùng svg-to-pdfkit với PDFKit và truyền mã SVG vào SVGtoPDF(doc, svg, x, y, options). doc.path() tích hợp của PDFKit nhận dữ liệu đường dẫn SVG, chẳng hạn giá trị thuộc tính d của đường dẫn. Nó không nhập tài liệu SVG bao quanh, các hình khác hay kiểu hiển thị của tài liệu.

Sự khác biệt này quan trọng với logo nhiều màu và có lỗ ở tâm. Sao chép một đường dẫn có thể bỏ sót một phần hình. Biến cả logo thành PNG giữ được bản kết xuất raster, nhưng mất đầu ra PDF dựa trên đường dẫn mà bạn đang cần.

Hướng dẫn này dùng một biểu tượng tự tạo, tập lệnh Node hoàn chỉnh và kiểm tra PDF đã lưu. Nếu đã có logo vector chỉnh sửa được, giữ nó làm nguồn. Khôi phục raster thuộc bước trước bước nhập này.

Chọn chèn SVG hoàn chỉnh hoặc một đường dẫn

Tài liệu vector của PDFKit mô tả bộ phân tích đường dẫn và các phương thức vẽ quanh nó. Thư viện SVG-to-PDFKit riêng xử lý mã SVG hoàn chỉnh.

Tài liệu ảnh PDFKit liệt kê PNG và JPEG cho doc.image(). Đừng xem lệnh gọi đó là công cụ nhập SVG hoàn chỉnh.

Chẳng hạn, đây là cách dùng hợp lệ của API đường dẫn:

doc.save();
doc.fillColor('#eeaa42');
doc.path('M125 100L175 20L225 100Z').fill();
doc.restore();

Nó vẽ tam giác của biểu tượng ở tọa độ đường dẫn. Nó không khôi phục vòng và thanh xanh cổ vịt từ phần khác của tệp nguồn. Dùng cách nhập toàn tài liệu dưới đây khi các phần đó cần đi cùng nhau.

Nếu PDF được ghép trong trình duyệt bằng jsPDF, làm theo quy trình SVG jsPDF riêng. Với tài liệu dùng thành phần React, dùng quy trình logo SVG React-pdf. Với tài liệu Python, đối chiếu kiểm tra nhập và kích thước ReportLab với đặt SVG trực tiếp bằng fpdf2.

Chạy ví dụ nhỏ với các gói cố định

Chúng tôi thực thi ví dụ này với PDFKit 0.20.2 và SVG-to-PDFKit 0.1.8. Chúng xác định cặp thư viện phụ thuộc đã kiểm tra; hãy kiểm tra đầu ra của bạn sau khi nâng cấp một trong hai gói.

Trong dự án Node mới, cài:

npm install --save-exact pdfkit@0.20.2 svg-to-pdfkit@0.1.8

Lưu đoạn này thành logo.svg. Vòng và lỗ của nó dùng chung một đường dẫn có fill-rule="evenodd"; tam giác vàng và thanh xanh cổ vịt là các hình riêng. Tệp không chứa phông chữ, ảnh hay hiệu ứng.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <path fill="#147d78" fill-rule="evenodd"
    d="M110 60A50 50 0 1 1 10 60A50 50 0 1 1 110 60Z
       M85 60A25 25 0 1 1 35 60A25 25 0 1 1 85 60Z"/>
  <path fill="#eeaa42" d="M125 100L175 20L225 100Z"/>
  <rect x="227" y="20" width="8" height="80" fill="#147d78"/>
</svg>

Lưu đoạn sau thành place-logo.cjs trong cùng thư mục, rồi chạy node place-logo.cjs:

const fs = require('node:fs');
const { finished } = require('node:stream/promises');
const PDFDocument = require('pdfkit');
const SVGtoPDF = require('svg-to-pdfkit');
 
async function main() {
  const svg = fs.readFileSync('logo.svg', 'utf8');
  const doc = new PDFDocument({ size: [800, 450], margin: 0 });
  const output = fs.createWriteStream('logo.pdf');
  doc.pipe(output);
  const warnings = [];
  SVGtoPDF(doc, svg, 72, 150, {
    width: 180, height: 90,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  SVGtoPDF(doc, svg, 432, 150, {
    width: 90, height: 45,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  doc.end();
  await finished(output);
  fs.writeFileSync('warnings.json', JSON.stringify(warnings, null, 2));
  if (warnings.length) process.stderr.write(warnings.join('\n') + '\n');
}
main().catch(error => {
  process.stderr.write(error.stack + '\n');
  process.exitCode = 1;
});

PDFKit tạo luồng dữ liệu. Gọi doc.end() hoàn tất tài liệu; tập lệnh sau đó chờ luồng đầu ra kết thúc trước khi trả về. Tài liệu bắt đầu giải thích mô hình luồng và kích thước trang theo point PDF, với 72 point mỗi inch.

Ở đây hai khung nhìn đặt ảnh là 180 × 90 pt và 90 × 45 pt, tức 2.5 × 1.25 inch và 1.25 × 0.625 inch. Cả hai khớp tỷ lệ 2:1 của viewBox nguồn. Các hình được vẽ có lề trong viewBox đó, nên giới hạn nhìn thấy nhỏ hơn khung nhìn. Đo riêng khung vẽ và phần hình được tô khi căn logo với văn bản bên cạnh.

Công cụ nhập mô tả width và height là khung nhìn ban đầu. Tùy chọn preserveAspectRatio kiểm soát cách vừa bên trong. Ví dụ này dùng tỷ lệ khớp và kích thước chỉ định rõ để tránh phụ thuộc vào mặc định có kích thước bằng trang. Đừng dùng assumePt làm cách sửa chung cho logo nhỏ bất ngờ; trước tiên kiểm tra kích thước nguồn, viewBox và khung nhìn đích.

Kiểm tra PDF, rồi kiểm tra diện mạo

logo.pdf tối thiểu của chúng tôi có một trang 800 × 450 pt. Với pypdf 6.10.0, chúng tôi tìm thấy 24 thao tác đường cong cubic, hai thao tác tô chẵn-lẻ và không có ảnh trên trang. Tài nguyên trang không chứa phông chữ hay XObject. Công cụ nhập không đưa ra cảnh báo cho mẫu thử này.

Những kết quả đó hỗ trợ kết luận hẹp: biểu tượng tự tạo không có ảnh này được vẽ bằng hình học PDF trong các phiên bản đã thử. Chúng không xác nhận SVG bất kỳ đều trở thành PDF hoàn toàn vector. Logo chứa ảnh chụp nhúng vẫn cần kiểm tra riêng.

Chúng tôi cũng kết xuất bản có nhãn bằng Poppler. Nó dùng cùng SVG và hai kích thước khung nhìn, với vị trí chuyển vào các ô đối chiếu. Nền ô nhạt vẫn nhìn xuyên qua cả hai vòng, còn tam giác và thanh hẹp vẫn tách riêng với vòng.

Chỉ phóng to thấy nét là bằng chứng yếu: bitmap đủ lớn cũng có thể trông sắc. Ngược lại, tìm thấy thao tác đường cong ở đâu đó trong báo cáo không cho biết logo có bị raster hóa không. Cô lập phần hình trong PDF thử nhỏ trước khi kiểm tra tài liệu cũng chứa ảnh chụp và biểu đồ.

Với logo của bạn, kiểm tra cả hai việc:

1. Kiểm tra nội dung trang PDF và các đối tượng được tham chiếu bằng công cụ kiểm tra PDF. Tìm lệnh vẽ nơi logo được tô và xác định mọi đối tượng ảnh. PDF phức tạp hơn có thể đặt nội dung trong Form XObject, nên đếm ở cấp trên cùng không phải lúc nào cũng đủ.
2. Mở PDF đã lưu trong trình xem dự định và đối chiếu với nguồn. Kiểm tra lỗ, các màu riêng, cắt vùng, lề và chi tiết nhỏ ở kích thước bàn giao thực tế.

Giữ SVG gốc cạnh mã tạo PDF. Nếu nguồn chỉ bọc pixel, dùng chẩn đoán ảnh nhúng trước khi cho rằng phần mở rộng SVG chứng minh điều gì về hình học.

Giữ phông chữ và hiệu ứng trong phạm vi quy trình đã thử

SVG-to-PDFKit liệt kê bộ lọc và foreignObject trong các tính năng không hỗ trợ. Nó cũng mô tả yêu cầu đăng ký phông và callback. Dùng thuộc tính trình bày SVG chỉ định rõ cho logo nhỏ phía máy chủ, rồi xem cảnh báo cùng với kết quả kết xuất. CSS được trình duyệt tính toán là tùy chọn riêng cho phần tử SVG được cung cấp; không giống việc truyền mã vào tập lệnh Node này. Xem tài liệu tính năng và phông chữ của thư viện.

Biểu tượng của chúng tôi chủ động tránh văn bản. Với phần chữ thực tế, hoặc cung cấp và kiểm tra phông dự định, hoặc giữ chữ dạng đường bao đã duyệt trong bản gốc vector. Tài liệu phông chữ của PDFKit mô tả nhúng và đăng ký phông. Văn bản tài liệu và đường bao logo có nhu cầu chỉnh sửa khác nhau; dò nét ảnh chụp màn hình chữ không nhận diện phông gốc.

Nếu biểu trưng thương hiệu phụ thuộc hiệu ứng công cụ nhập này không tái tạo được, hãy tạo lại hiệu ứng thành hình học phù hợp hoặc chọn quy trình xuất khác và xác minh. Chèn raster cũng là lựa chọn hợp lệ khi diện mạo quan trọng hơn giữ đường dẫn. Đừng mô tả lựa chọn đó là bản xuất giữ nguyên vector.

Ví dụ dùng màu RGB. Chỉ giữ đường dẫn không xác nhận đáp ứng yêu cầu màu, PDF/X hay chế bản của nhà in. Xác nhận chúng với người nhận; hướng dẫn định dạng logo giúp phân biệt bản gốc chỉnh sửa được với tệp bàn giao.

Khôi phục logo chỉ có raster trước khi chèn

Nếu logo gốc chỉ còn PNG hoặc JPG, công cụ vector hóa logo của PerfectVector có thể chuẩn bị bản SVG ứng viên trước bước PDFKit. Đối chiếu đường bao, các lỗ nhỏ và vùng màu riêng với nguồn, rồi đưa bản ứng viên qua cùng các phép kiểm tra vị trí và PDF.

Dùng vector gốc khi có. Với chữ bị hỏng hoặc hình học thương hiệu cần chính xác, gõ lại hoặc vẽ lại phần bị ảnh hưởng trong trình chỉnh sửa. Hướng dẫn vector hóa logo giải thích quyết định về nguồn đó. PerfectVector chuẩn bị đường dẫn phần hình; PDFKit và công cụ nhập xử lý vị trí trong tài liệu. Biểu tượng thử của bài này là hình vector tạo bằng tay, không phải kết quả chuyển đổi đã đo.

Câu hỏi thường gặp

PDFKit có thể nhập SVG hoàn chỉnh bằng doc.path() không? Không. Phương thức path đọc dữ liệu đường dẫn SVG. Dùng SVG-to-PDFKit cho tài liệu hoàn chỉnh trong quy trình này, hoặc tự vẽ và tạo kiểu cho từng hình.

SVG-to-PDFKit có đảm bảo PDF không có ảnh raster không? Không. Biểu tượng không có ảnh đã thử tạo ra thao tác vẽ và không có ảnh trên trang. Kiểm tra đầu vào và PDF xuất của chính bạn, nhất là khi SVG có ảnh nhúng hoặc tính năng ngoài tập được công cụ nhập hỗ trợ.

Vì sao logo nhìn thấy nhỏ hơn width và height của tôi? Những tùy chọn đó định nghĩa khung nhìn nhập. Khoảng trống trong viewBox nguồn vẫn là một phần bố cục, và cách vừa theo tỷ lệ có thể chừa thêm chỗ. Kiểm tra giới hạn phần hình trước khi đổi kích thước PDF yêu cầu.

Nguồn tham khảo

1. PDFKit — Đồ họa vector — Mô tả phân tích dữ liệu đường dẫn SVG, thao tác tô/vẽ đường viền và trạng thái đồ họa.
2. SVG-to-PDFKit — Cách dùng và giới hạn — Định nghĩa chèn SVG hoàn chỉnh, tùy chọn khung nhìn, cảnh báo, phông chữ và tính năng được hỗ trợ.
3. PDFKit — Ảnh — Liệt kê định dạng bitmap được API ảnh chấp nhận.
4. PDFKit — Bắt đầu — Giải thích luồng tài liệu, hoàn tất và kích thước trang theo point PDF.
5. PDFKit — Phông chữ — Mô tả nhúng phông và đăng ký phông có tên.

Nếu logo trong tài liệu bắt đầu từ ảnh raster, hãy chuẩn bị bản SVG ứng viên bằng PerfectVector, kiểm tra lỗ và đường bao, rồi đặt ở kích thước PDF yêu cầu và kiểm tra tệp đã lưu.