Logo SVG trong React-pdf: hiển thị đường dẫn trong PDF

Với logo SVG nhỏ trong @react-pdf/renderer, hãy dựng hình bằng Svg, Path và các thành phần khác được hỗ trợ. Đặt kích thước rõ ràng cho Svg bên ngoài và giữ viewBox của nguồn. Tài liệu Image của trình hiển thị liệt kê PNG và JPG là đầu vào; đưa URL SVG vào Image không phải cách tạo vector được mô tả ở đây.

Hướng dẫn này dùng một ví dụ Node đầy đủ với biểu trưng vuông có khoảng trống xuyên qua tâm. Chúng tôi tạo PDF bằng các phiên bản phụ thuộc cố định và kiểm tra kết quả. Ví dụ tách riêng ba yếu tố dễ bị lẫn: hình nguồn, cây thành phần và kích thước bố trí trong PDF.

Kiểm tra gói React PDF bạn đang dùng

Bài viết này tạo tài liệu bằng @react-pdf/renderer. Gói có tên riêng là react-pdf hiển thị PDF có sẵn. Kiểm tra import trong tệp trước khi sao chép giải pháp từ kết quả tìm kiếm.

Trong Document của trình hiển thị, hãy dùng các thành phần do chính trình hiển thị đó xuất ra. Phần tử svg và path viết thường của trình duyệt thuộc một môi trường hiển thị khác. Tài liệu thành phần SVG chính thức xác định Svg là vùng chứa khung nhìn và minh họa các hình React-pdf được import bên trong.

Tài liệu Image mô tả đầu vào bitmap. Phương án PNG dự phòng có thể hữu ích khi diện mạo phức tạp quan trọng hơn việc giữ hình học vector. Nó thay đổi sản phẩm bàn giao, nên hãy giữ riêng bản vector gốc.

Cũng có gói chính thức @react-pdf/svg. README của nó mô tả parseSvg(), trả về cây nút cơ bản và chuyển tên thuộc tính sang camelCase. Tài liệu cho biết phần tử không được hỗ trợ sẽ bị bỏ qua kèm cảnh báo. Đây là hợp đồng của trình phân tích, không phải cam kết mọi SVG trong trình duyệt đều hiển thị giống hệt. Ví dụ bên dưới dùng các thành phần tường minh để hình học và cách tô/vẽ luôn dễ kiểm tra.

Hiển thị logo tối giản trước khi nhập hình của bạn

Chúng tôi chạy ví dụ này với @react-pdf/renderer 4.9.0, React 19.2.4 và Node 22.19.0. Các phiên bản này xác định cấu hình đã thử nghiệm; chúng không bảo đảm hành vi của cây phụ thuộc khác.

Trong thư mục mới, cài hai gói cần thiết để chạy ví dụ:

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

Lưu nội dung này thành logo.mjs, rồi chạy node logo.mjs. Nó dùng React.createElement để Node có thể thực thi mà không cần bước biên dịch JSX.

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

Hình vuông ngoài và trong dùng chung một đường dẫn ghép. fillRule: 'evenodd' để hình vuông trong rỗng, làm lộ hình chữ nhật màu nhạt bên dưới. Không có mảng trắng che phần giữa. Điều đó khiến khoảng trống trở thành chi tiết kiểm tra hữu ích khi bạn thay mẫu thử bằng logo có khoảng rỗng trong chữ hoặc vùng khoét.

Tọa độ SVG trải rộng 100 đơn vị theo mỗi chiều, còn khung nhìn được bố trí là 144 × 144. viewBox mô tả hệ tọa độ hình vẽ; width và height mô tả khung nhìn hiển thị. Giữ rõ sự khác biệt đó khi điều chỉnh kích thước logo. Bảng thuộc tính Svg chính thức mô tả các điều khiển này cùng preserveAspectRatio.

Kiểm tra PDF đã lưu cùng với bản xem trước

Thử nghiệm của chúng tôi tạo một trang A4 có vòng vuông màu xanh ngọc gần góc trên bên trái. Chúng tôi hiển thị tệp đó bằng Poppler và kiểm tra trực quan rằng nền nhạt hiện qua khoảng trống. Lệnh pdfimages -list logo.pdf của Poppler báo cáo không có ảnh nhúng trong tài liệu riêng lẻ này.

Kết quả đó được giới hạn một cách có chủ ý. Nó mô tả mẫu thử chỉ có đường dẫn này. Nó không chứng minh một tài liệu có ảnh chụp, ảnh SVG nhúng hoặc hiệu ứng không được hỗ trợ là hoàn toàn vector.

Nếu máy có Poppler, các lệnh này cung cấp hai cách kiểm tra khác nhau:

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

Lệnh thứ hai tạo bản xem trước raster để kiểm tra trực quan; nó không biến PDF gốc thành bitmap. Kiểm tra khoảng trống, góc, màu và vị trí trong bản xem trước đó, rồi mở PDF đã lưu bằng trình xem mà người nhận dùng. Chỉ một bản xem trước trông sắc nét không chứng minh được tài liệu gốc chứa đường dẫn: bitmap lớn cũng có thể trông sắc nét.

Để kiểm tra kỹ hơn, xem các lệnh vẽ và đối tượng được tham chiếu của PDF quanh logo. Báo cáo phức tạp có thể chứa đối tượng lồng nhau, nên hãy bắt đầu với tài liệu logo riêng trước khi chẩn đoán cả báo cáo. Hướng dẫn SVG cho PDFKit giải thích một quy trình nhập SVG riêng và cách kiểm tra PDF đã lưu.

Chuyển hình của bạn sang thành phần PDF, từng tính năng một

Thay giá trị d của mẫu thử bằng dữ liệu đường dẫn của bạn, rồi giữ màu tô, quy tắc tô, đường viền và phép biến đổi liên quan. Chỉ sao chép hình dạng đường dẫn nhưng bỏ cách tô/vẽ có thể làm thay đổi kết quả ngay cả khi bản thân dữ liệu đường dẫn hợp lệ.

Với biểu trưng tĩnh nhỏ, đặt màu trực tiếp trên các hình được hỗ trợ. Logo phụ thuộc vào bảng định kiểu của trang web cần được giải quyết các phụ thuộc đó trước khi trở thành thành phần tài liệu độc lập. Giữ SVG nguồn cạnh mã hiển thị để có thể so sánh các lần sửa sau với hình đã duyệt.

Tổng quan SVG chính thức liệt kê các thành phần cơ bản có sẵn. Hãy coi đó là danh sách kiểm tra hỗ trợ, không phải toàn bộ tính năng SVG của trình duyệt. Thử chữ, cắt vùng và chuyển sắc trong phiên bản đã cài trước khi thêm vào báo cáo dùng trong môi trường thực tế.

Nếu SVG chứa PNG nhúng, chuyển đổi vùng chứa của nó không tái dựng hình học còn thiếu. Hướng dẫn ảnh raster nhúng cho biết cách phân biệt đường dẫn với bitmap nằm trong tệp SVG.

Khi logo bắt đầu từ PNG hoặc JPG

Nếu có SVG, AI gốc hoặc bản vector khác có thể chỉnh sửa, hãy yêu cầu bản đó trước. Nếu chỉ còn pixel, công cụ vector hóa logo của PerfectVector có thể chuẩn bị một bản SVG để kiểm tra trước phần công việc React-pdf. So sánh đường bao, các khoảng trống nhỏ và từng vùng màu riêng với nguồn trước khi chuyển các hình được hỗ trợ thành thành phần PDF.

Vector hóa không sửa tích hợp trình hiển thị, tạo thành phần React hay bảo đảm hỗ trợ mọi tính năng SVG. Hãy kiểm tra thủ công chữ cần hình học thương hiệu chính xác. Hướng dẫn vector hóa logo giúp chọn giữa đồ lại, gõ lại chữ và vẽ lại.

Với nguồn chỉ có raster, kết quả hữu ích là một bản vector đã kiểm tra, tiếp theo là PDF đã kiểm tra. Với nguồn vector có sẵn, chuyển thẳng sang kiểm tra thành phần và bố trí. Bạn có thể xem thêm hướng dẫn chuẩn bị nguồn trong blog.

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

Tôi có thể truyền tệp SVG vào React-pdf Image không? Đầu vào Image được tài liệu hóa là PNG và JPG. Dùng các thành phần Svg cơ bản của trình hiển thị cho quy trình dựa trên đường dẫn trong hướng dẫn này, và kiểm tra phiên bản đã cài trước khi phụ thuộc vào hành vi đầu vào khác.

Tôi có phải chuyển đổi thủ công mọi SVG không? Không. Gói chính thức @react-pdf/svg phân tích chuỗi SVG thành cây nút cơ bản. Xem các phần tử được hỗ trợ và cảnh báo của nó, rồi nối và thử đầu ra đó trong quy trình hiển thị của bạn. Ví dụ thành phần tường minh ở đây tránh một bước phân tích bổ sung.

Vì sao tâm logo của tôi bị tô kín? Kiểm tra đường dẫn ghép và quy tắc tô của nó. Biểu trưng thử nghiệm dùng evenodd để hình vuông trong vẫn rỗng. Giữ hình học gốc và quy tắc tô/vẽ trước khi thay đổi hình.

Bản xem trước PDF sắc nét có chứng minh logo là vector không? Không. Kiểm tra nội dung và đối tượng ảnh của PDF đã lưu cùng với diện mạo. Mẫu thử riêng trong hướng dẫn này không có ảnh nhúng; kết quả đó không tự động áp dụng cho logo khác.

Nguồn tham khảo

1. React-pdf — thành phần Svg — Xác định khung nhìn, kích thước, viewBox và điều khiển tỷ lệ khung hình.
2. React-pdf — thành phần Image — Mô tả dạng đầu vào PNG và JPG để bố trí bitmap.
3. React-pdf — thành phần SVG cơ bản — Liệt kê thành phần SVG được trình hiển thị hỗ trợ.
4. React-pdf — trình phân tích SVG — Mô tả cây nút cơ bản, chuyển đổi thuộc tính và cảnh báo phần tử không được hỗ trợ.

Bạn chỉ có logo PNG hoặc JPG? Chuẩn bị một bản SVG bằng PerfectVector, so sánh đường bao và khoảng trống với nguồn, rồi chuyển các hình được hỗ trợ và kiểm tra PDF đã lưu.