โลโก้ SVG ใน React-pdf: เรนเดอร์พาธลง PDF

สำหรับโลโก้ SVG ขนาดเล็กใน @react-pdf/renderer ให้สร้างภาพด้วยคอมโพเนนต์ Svg, Path และคอมโพเนนต์อื่นที่รองรับ กำหนดขนาด Svg ชั้นนอกให้ชัดและคง viewBox ต้นทางไว้ เอกสาร Image ของตัวเรนเดอร์ระบุขาเข้า PNG และ JPG การใส่ URL SVG ใน Image ไม่ใช่วิธีเวกเตอร์ที่อธิบายในบทความนี้

คู่มือนี้ใช้ตัวอย่าง Node ฉบับสมบูรณ์ที่มีตราสี่เหลี่ยมและช่องเปิดตรงกลาง เราเรนเดอร์ PDF ด้วยเวอร์ชันแพ็กเกจที่กำหนดแล้วตรวจผล ตัวอย่างแยกสามสิ่งที่มักสับสนกัน: ภาพต้นทาง โครงสร้างคอมโพเนนต์ และขนาดการวางใน PDF

ตรวจว่าใช้แพ็กเกจ React PDF ตัวไหน

บทความนี้สร้างเอกสารด้วย @react-pdf/renderer ส่วนแพ็กเกจชื่อ react-pdf ใช้แสดง PDF ที่มีอยู่ ตรวจ import ในไฟล์ก่อนคัดลอกวิธีแก้จากผลค้นหา

ภายใน Document ของตัวเรนเดอร์ ให้ใช้คอมโพเนนต์ที่ตัวเรนเดอร์นั้นส่งออก องค์ประกอบตัวพิมพ์เล็ก svg และ path ของเบราว์เซอร์อยู่ในสภาพแวดล้อมเรนเดอร์อีกแบบ เอกสารอ้างอิงคอมโพเนนต์ SVG ทางการนิยาม Svg เป็นตัวเก็บวิวพอร์ตและแสดงรูปทรง React-pdf ที่นำเข้ามาภายใน

เอกสารอ้างอิง Image อธิบายขาเข้าบิตแมป การใช้ PNG แทนอาจมีประโยชน์เมื่อรูปลักษณ์ซับซ้อนสำคัญกว่าการรักษาเรขาคณิตเวกเตอร์ แต่มันเปลี่ยนสิ่งที่ส่งมอบ จึงควรเก็บเวกเตอร์ต้นฉบับแยกไว้

ยังมีแพ็กเกจทางการ @react-pdf/svg อีกด้วย README อธิบาย parseSvg() ซึ่งคืนโครงสร้างโหนดรูปทรงพื้นฐานและแปลงชื่อแอตทริบิวต์เป็น camelCase เอกสารระบุว่าองค์ประกอบที่ไม่รองรับจะถูกข้ามพร้อมคำเตือน นี่เป็นสัญญาของตัวแยกวิเคราะห์ ไม่ใช่คำรับประกันว่า SVG ทุกแบบของเบราว์เซอร์จะเรนเดอร์เหมือนกัน ตัวอย่างด้านล่างใช้คอมโพเนนต์ชัดเจนเพื่อให้เรขาคณิตและสีตรวจได้ง่าย

เรนเดอร์โลโก้ขั้นต่ำก่อนนำภาพของคุณเข้า

เรารันตัวอย่างนี้ด้วย @react-pdf/renderer 4.9.0, React 19.2.4 และ Node 22.19.0 เวอร์ชันเหล่านี้ระบุชุดที่ทดสอบ ไม่ได้รับประกันพฤติกรรมของชุดแพ็กเกจอื่น

ในไดเรกทอรีใหม่ ติดตั้งแพ็กเกจรันไทม์สองตัว:

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

บันทึกเป็น logo.mjs แล้วรัน node logo.mjs โค้ดใช้ React.createElement เพื่อให้ Node รันได้โดยไม่ต้องมีขั้นตอน build 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)),
);

สี่เหลี่ยมด้านนอกและด้านในใช้พาธประกอบเดียวกัน fillRule: 'evenodd' ทำให้สี่เหลี่ยมด้านในเปิดไว้ เห็นสี่เหลี่ยมสีอ่อนด้านล่าง ไม่มีปื้นสีขาวปิดตรงกลาง ช่องเปิดนี้จึงเป็นจุดตรวจที่มีประโยชน์เมื่อแทนตัวอย่างด้วยโลโก้ที่มีช่องภายในตัวอักษรหรือช่องเว้า

พิกัด SVG ครอบคลุม 100 หน่วยทั้งสองทิศ ส่วนวิวพอร์ตที่วางมีขนาด 144 คูณ 144 viewBox อธิบายระบบพิกัดภาพ ส่วน width และ height อธิบายวิวพอร์ตที่แสดง รักษาความต่างนี้เมื่อปรับขนาดโลโก้ ตาราง props ของ Svg ทางการอธิบายตัวควบคุมเหล่านี้และ preserveAspectRatio

ตรวจ PDF ที่บันทึกควบคู่กับภาพตัวอย่าง

การทดสอบได้หน้า A4 หนึ่งหน้าที่มีวงกรอบสี่เหลี่ยมสีเขียวอมฟ้าใกล้มุมซ้ายบน เราเรนเดอร์ไฟล์ด้วย Poppler และตรวจด้วยตาว่าพื้นหลังสีอ่อนแสดงผ่านช่องเปิด pdfimages -list logo.pdf ของ Poppler รายงานว่าไม่มีภาพฝังในเอกสารที่แยกทดสอบนี้

ผลนี้จงใจจำกัดขอบเขต อธิบายเฉพาะตัวอย่างที่มีพาธล้วนนี้ ไม่ได้ยืนยันว่าเอกสารที่มีภาพถ่าย ภาพ SVG ฝัง หรือเอฟเฟกต์ที่ไม่รองรับเป็นเวกเตอร์ทั้งหมด

หากเครื่องมี Poppler คำสั่งเหล่านี้ให้การตรวจสองแบบ:

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

คำสั่งที่สองสร้างภาพตัวอย่างราสเตอร์สำหรับตรวจด้วยตา ไม่ได้เปลี่ยน PDF ต้นฉบับเป็นบิตแมป ตรวจช่องเปิด มุม สี และตำแหน่งในภาพตัวอย่าง แล้วเปิด PDF ที่บันทึกในโปรแกรมดูที่ผู้รับใช้ ภาพตัวอย่างคมชัดอย่างเดียวไม่ยืนยันว่าเอกสารต้นฉบับมีพาธ เพราะบิตแมปขนาดใหญ่ก็ดูคมได้

หากต้องการตรวจให้ลึกขึ้น ให้ดูคำสั่งวาดของ PDF และวัตถุที่อ้างอิงบริเวณโลโก้ รายงานซับซ้อนอาจมีวัตถุซ้อน จึงเริ่มจากเอกสารโลโก้เดี่ยวก่อนวินิจฉัยรายงานทั้งฉบับ คู่มือ SVG ใน PDFKit อธิบายกระบวนการนำเข้า SVG อีกแบบและการตรวจ PDF ที่บันทึก

ย้ายภาพเข้ามาทีละคุณสมบัติ

แทนค่า d ของตัวอย่างด้วยข้อมูลพาธของคุณ แล้วรักษาสีเติม กฎการเติมสี เส้นขอบ และการแปลงพิกัดที่เกี่ยวข้อง การคัดลอกเฉพาะรูปทรงพาธโดยทิ้งสีอาจเปลี่ยนผลลัพธ์ แม้ข้อมูลพาธถูกต้อง

สำหรับสัญลักษณ์คงที่ขนาดเล็ก ให้ใส่สีโดยตรงบนรูปทรงที่รองรับ โลโก้ที่พึ่งสไตล์ชีตหน้าเว็บต้องจัดการสิ่งที่อ้างอิงเหล่านั้นก่อนเป็นคอมโพเนนต์เอกสารที่มีข้อมูลครบในตัว เก็บ SVG ต้นทางข้างโค้ดเรนเดอร์ เพื่อเทียบการแก้ภายหลังกับภาพที่อนุมัติแล้ว

ภาพรวม SVG ทางการแสดงรูปทรงพื้นฐานที่มีให้ ใช้เป็นรายการตรวจการรองรับ ไม่ใช่ชุดคุณสมบัติ SVG ทั้งหมดของเบราว์เซอร์ ทดสอบตัวอักษร การตัด และไล่ระดับสีในเวอร์ชันที่ติดตั้งก่อนเพิ่มในรายงานใช้งานจริง

หาก SVG มี PNG ฝังอยู่ การย้ายตัวเก็บภาพไปใช้ในอีกระบบไม่ได้สร้างเรขาคณิตที่ขาดขึ้นใหม่ คู่มือราสเตอร์ฝัง แสดงวิธีแยกพาธจากบิตแมปที่เก็บในไฟล์ SVG

เมื่อโลโก้เริ่มจาก PNG หรือ JPG

หากมี SVG, AI หรือไฟล์เวกเตอร์ต้นฉบับอื่นที่แก้ไขได้ ให้ขอไฟล์นั้นก่อน หากเหลือเพียงพิกเซล เครื่องมือแปลงโลโก้เป็นเวกเตอร์ ของ PerfectVector เตรียม SVG สำหรับประเมินก่อนทำงาน React-pdf ได้ เปรียบเทียบเส้นรอบรูป ช่องเล็ก และพื้นที่สีแยกกับต้นทาง ก่อนปรับรูปทรงที่รองรับให้เป็นคอมโพเนนต์ PDF

การแปลงเวกเตอร์ไม่ได้ซ่อมการเชื่อมต่อกับตัวเรนเดอร์ ไม่ได้สร้างคอมโพเนนต์ React และไม่ได้รับประกันการรองรับ SVG ทุกคุณสมบัติ ตรวจตัวอักษรที่ต้องตรงเรขาคณิตแบรนด์อย่างแม่นยำด้วยมือ คู่มือแปลงโลโก้เป็นเวกเตอร์ ช่วยเลือกระหว่างไล่เส้น พิมพ์ใหม่ และวาดใหม่

สำหรับต้นทางราสเตอร์ล้วน ผลลัพธ์ที่มีประโยชน์คือเวกเตอร์สำหรับประเมินที่ตรวจแล้ว ตามด้วย PDF ที่ตรวจแล้ว สำหรับต้นทางเวกเตอร์ที่มีอยู่ ไปยังการตรวจคอมโพเนนต์และตำแหน่งได้โดยตรง มีคำแนะนำเตรียมต้นทางเพิ่มเติมในบล็อก

คำถามที่พบบ่อย

ส่งไฟล์ SVG ให้ Image ของ React-pdf ได้หรือไม่? ขาเข้า Image ที่เอกสารระบุคือ PNG และ JPG ใช้รูปทรงพื้นฐาน Svg ของตัวเรนเดอร์สำหรับกระบวนการพาธในคู่มือนี้ และตรวจเวอร์ชันที่ติดตั้งก่อนพึ่งพาพฤติกรรมขาเข้าอื่น

ต้องแปลง SVG ทุกไฟล์ด้วยมือหรือไม่? ไม่ แพ็กเกจทางการ @react-pdf/svg แยกวิเคราะห์สตริง SVG เป็นโครงสร้างโหนดรูปทรงพื้นฐาน ตรวจองค์ประกอบที่รองรับและคำเตือน แล้วเชื่อมต่อและทดสอบผลลัพธ์ในกระบวนการเรนเดอร์ ตัวอย่างคอมโพเนนต์ชัดเจนในบทความนี้เลี่ยงขั้นตอนตัวแยกวิเคราะห์เพิ่มเติม

ทำไมตรงกลางโลโก้ถูกเติมทึบ? ตรวจพาธประกอบและกฎการเติมสี ตราทดสอบใช้ evenodd เพื่อให้สี่เหลี่ยมด้านในเปิด รักษาเรขาคณิตและกฎสีต้นฉบับก่อนเปลี่ยนภาพ

ภาพตัวอย่าง PDF คมชัดพิสูจน์ว่าโลโก้เป็นเวกเตอร์หรือไม่? ไม่ ตรวจเนื้อหาและวัตถุภาพของ PDF ที่บันทึกควบคู่กับรูปลักษณ์ ตัวอย่างเดี่ยวในคู่มือนี้ไม่มีภาพฝัง ผลนั้นไม่ได้ใช้กับโลโก้อื่นโดยอัตโนมัติ

แหล่งอ้างอิง

1. React-pdf — คอมโพเนนต์ Svg — นิยามวิวพอร์ต ขนาด viewBox และการควบคุมอัตราส่วน
2. React-pdf — คอมโพเนนต์ Image — อธิบายรูปแบบขาเข้า PNG และ JPG สำหรับวางบิตแมป
3. React-pdf — รูปทรงพื้นฐาน SVG — แสดงคอมโพเนนต์ SVG ที่ตัวเรนเดอร์รองรับ
4. React-pdf — ตัวแยกวิเคราะห์ SVG — อธิบายโครงสร้างโหนดรูปทรงพื้นฐาน การแปลงแอตทริบิวต์ และคำเตือนองค์ประกอบที่ไม่รองรับ

มีเพียงโลโก้ PNG หรือ JPG ใช่ไหม? เตรียม SVG สำหรับประเมินด้วย PerfectVector เปรียบเทียบเส้นรอบรูปและช่องเปิดกับต้นทาง แล้วปรับรูปทรงที่รองรับและตรวจ PDF ที่บันทึก