SVG ใน PDFKit: วางโลโก้เวกเตอร์โดยไม่แบนเป็นภาพ

หากต้องการวางโลโก้ SVG ทั้งไฟล์ใน PDF ที่สร้างด้วย Node ให้ใช้ svg-to-pdfkit ร่วมกับ PDFKit และส่งมาร์กอัป SVG ให้ SVGtoPDF(doc, svg, x, y, options) ส่วน doc.path() ในตัวของ PDFKit รับข้อมูลพาธ SVG เช่นค่าแอตทริบิวต์ d ของพาธ ไม่ได้นำเข้าเอกสาร SVG ที่ครอบอยู่ รูปทรงอื่น หรือสไตล์

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

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

เลือกแทรก SVG ทั้งไฟล์หรือพาธเดียว

เอกสารเวกเตอร์ของ PDFKit อธิบายตัวแยกวิเคราะห์พาธและเมธอดวาดที่เกี่ยวข้อง ส่วนไลบรารี SVG-to-PDFKit แยกจัดการมาร์กอัป SVG ทั้งไฟล์

เอกสารภาพของ PDFKit ระบุ PNG และ JPEG สำหรับ doc.image() อย่าถือว่าคำสั่งนี้นำเข้า SVG ทั้งไฟล์

เช่น นี่เป็นการใช้ path API ที่ถูกต้อง:

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

มันวาดสามเหลี่ยมของตราที่พิกัดพาธ ไม่ได้ดึงวงสีเขียวอมฟ้าหรือแท่งจากส่วนอื่นของต้นทาง ใช้วิธีทั้งเอกสารด้านล่างเมื่อชิ้นเหล่านั้นควรอยู่ร่วมกัน

หากประกอบ PDF ในเบราว์เซอร์ด้วย jsPDF ทำตามกระบวนการ SVG ใน jsPDF แยก สำหรับเอกสารคอมโพเนนต์ React ใช้กระบวนการโลโก้ SVG ใน React-pdf สำหรับ Python เทียบการตรวจนำเข้าและขนาดใน ReportLab กับการวาง SVG โดยตรงใน fpdf2

รันตัวอย่างเล็กด้วยแพ็กเกจเวอร์ชันกำหนด

เรารันตัวอย่างด้วย PDFKit 0.20.2 และ SVG-to-PDFKit 0.1.8 ระบุคู่แพ็กเกจที่ทดสอบ ตรวจผลของคุณเองหลังอัปเกรดตัวใดตัวหนึ่ง

ในโครงการ Node ใหม่ ติดตั้ง:

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

บันทึกเป็น logo.svg วงและช่องเปิดใช้พาธเดียวที่มี fill-rule="evenodd" สามเหลี่ยมทองกับแท่งเขียวอมฟ้าเป็นรูปทรงแยก ไฟล์ไม่มีฟอนต์ ภาพ หรือเอฟเฟกต์

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

บันทึกเป็น place-logo.cjs ในไดเรกทอรีเดียว แล้วรัน 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 สร้างสตรีม การเรียก doc.end() ทำเอกสารให้เสร็จ จากนั้นสคริปต์รอสตรีมผลลัพธ์เขียนจบก่อนคืนการทำงาน เอกสารเริ่มต้น อธิบายแบบจำลองสตรีมและขนาดหน้าเป็นพอยต์ PDF โดย 72 พอยต์เท่ากับหนึ่งนิ้ว

ที่นี่วิวพอร์ตวางสองชุดคือ 180 × 90 pt และ 90 × 45 pt หรือ 2.5 × 1.25 นิ้ว และ 1.25 × 0.625 นิ้ว ทั้งคู่ตรงกับอัตราส่วน viewBox ต้นทาง 2:1 รูปทรงมีขอบว่างภายใน viewBox ขอบเขตที่เห็นจึงเล็กกว่าวิวพอร์ต วัดพื้นที่วาดกับภาพที่มีสีแยกเมื่อจัดโลโก้กับข้อความข้างกัน

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

ตรวจ PDF แล้วตรวจรูปลักษณ์

logo.pdf ขั้นต่ำของเรามีหนึ่งหน้า 800 × 450 pt เมื่อใช้ pypdf 6.10.0 พบ คำสั่งเส้นโค้งคิวบิก 24 ครั้ง เติมสีคู่คี่สองครั้ง และ ภาพในหน้าศูนย์ภาพ ทรัพยากรหน้าไม่มีฟอนต์หรือ XObjects ตัวนำเข้าไม่มีคำเตือนสำหรับตัวอย่างนี้

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

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

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

สำหรับโลโก้ของคุณ ตรวจทั้งสองอย่าง:

1. ตรวจเนื้อหาหน้าและวัตถุอ้างอิง PDF ด้วยเครื่องมือตรวจ PDF มองหาคำสั่งวาดตรงที่ระบายโลโก้และตรวจวัตถุภาพที่มี PDF ซับซ้อนอาจเก็บเนื้อหาใน Form XObjects การนับระดับบนจึงไม่พอเสมอ
2. เปิด PDF ที่บันทึกในโปรแกรมดูปลายทางแล้วเทียบต้นทาง ตรวจช่องเปิด สีแยก การตัด ขอบว่าง และรายละเอียดเล็กที่ขนาดส่งมอบจริง

เก็บ SVG ต้นฉบับข้างโค้ดสร้าง PDF หากต้นทางเพียงห่อพิกเซล ใช้คู่มือวินิจฉัยภาพฝัง ก่อนคิดว่านามสกุล SVG พิสูจน์เรขาคณิต

ให้ฟอนต์และเอฟเฟกต์อยู่ในกระบวนการที่ทดสอบ

SVG-to-PDFKit ระบุฟิลเตอร์และ foreignObject เป็นคุณสมบัติที่ไม่รองรับ และอธิบายข้อกำหนดลงทะเบียนฟอนต์กับ callback ใช้แอตทริบิวต์นำเสนอ SVG ชัดเจนสำหรับโลโก้เล็กฝั่งเซิร์ฟเวอร์ และดูคำเตือนร่วมกับภาพเรนเดอร์ CSS ที่เบราว์เซอร์คำนวณเป็นตัวเลือกแยกสำหรับองค์ประกอบ SVG ที่ส่งให้ ไม่เหมือนส่งมาร์กอัปเข้าสคริปต์ Node นี้ ดูเอกสารคุณสมบัติและฟอนต์ของไลบรารี

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

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

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

สร้างโลโก้ราสเตอร์ล้วนกลับก่อนแทรก

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

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

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

PDFKit นำเข้า SVG ทั้งไฟล์ด้วย doc.path() ได้หรือไม่? ไม่ เมธอด path อ่านข้อมูลพาธ SVG ใช้ SVG-to-PDFKit สำหรับทั้งเอกสารในกระบวนการนี้ หรือวาดและจัดสไตล์ทุกรูปเอง

SVG-to-PDFKit รับประกัน PDF ไม่มีภาพราสเตอร์หรือไม่? ไม่ ตราที่ไม่มีภาพซึ่งทดสอบให้คำสั่งวาดและภาพในหน้าศูนย์ภาพ ตรวจขาเข้าและ PDF ส่งออกของคุณเอง โดยเฉพาะเมื่อ SVG มีภาพฝังหรือคุณสมบัตินอกชุดที่ตัวนำเข้ารองรับ

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

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

1. PDFKit — กราฟิกเวกเตอร์ — อธิบายการแยกวิเคราะห์ข้อมูลพาธ SVG คำสั่งสี และสถานะกราฟิก
2. SVG-to-PDFKit — การใช้และข้อจำกัด — นิยามแทรก SVG ทั้งไฟล์ ตัวเลือกวิวพอร์ต คำเตือน ฟอนต์ และคุณสมบัติรองรับ
3. PDFKit — ภาพ — แสดงรูปแบบบิตแมปที่ API ภาพรับ
4. PDFKit — เริ่มต้น — อธิบายสตรีมเอกสาร การทำให้เสร็จ และขนาดหน้าเป็นพอยต์ PDF
5. PDFKit — ฟอนต์ — อธิบายการฝังฟอนต์และลงทะเบียนฟอนต์ด้วยชื่อ

หากโลโก้เอกสารเริ่มจากราสเตอร์ เตรียม SVG สำหรับประเมินด้วย PerfectVector ตรวจช่องเปิดและเส้นรอบรูป แล้ววางที่ขนาด PDF ที่ต้องการและตรวจไฟล์บันทึก