ภาพ SVG ใน fpdf2: เก็บพาธใน PDF จาก Python

ใช้ pdf.image("logo.svg", x=20, y=20, w=60) เพื่อวาง SVG ในเอกสาร fpdf2 เรขาคณิต SVG ที่รองรับจะกลายเป็นพาธวาด PDF ไม่จำเป็นต้องเรนเดอร์โลโก้เป็น PNG ก่อน เอกสาร SVG ทางการอธิบายวิธีโดยตรงนี้และข้อจำกัด

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

เริ่มด้วย SVG ที่ทราบโครงสร้างและ fpdf2 เวอร์ชันที่กำหนด

เรารันตัวอย่างด้วย Python 3.12 และ fpdf2 2.8.8 นี่เป็นเวอร์ชันที่ทดสอบ ไม่ใช่คำรับประกันว่าทุกรุ่นถัดไปจะทำงานเหมือนกัน หน้า PyPI ทางการ ของแพ็กเกจอธิบายการติดตั้งด้วยชื่อ distribution fpdf2 ส่วน import ของ Python คือ fpdf

ใช้สภาพแวดล้อมใหม่เพื่อให้ตัวอย่างไม่ขึ้นกับแพ็กเกจของโครงการอื่น:

python3 -m venv .venv
source .venv/bin/activate
python -m pip install "fpdf2==2.8.8"

บน Windows ให้เปิดสภาพแวดล้อมด้วย .venv\Scripts\activate แทน บันทึกตราสี่เหลี่ยมผืนผ้าต้นฉบับนี้เป็น logo.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="120" height="80" viewBox="0 0 120 80">
  <path fill="#137d89" fill-rule="evenodd"
        d="M10 10H110V70H10Z M30 25H90V55H30Z"/>
</svg>

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

บันทึกโค้ดต่อไปนี้เป็น place_logo.py ข้าง SVG:

from pathlib import Path
from fpdf import FPDF
 
folder = Path(__file__).resolve().parent
pdf = FPDF(unit="mm")
pdf.add_page()
pdf.image(str(folder / "logo.svg"), x=20, y=20, w=60)
pdf.output(str(folder / "logo.pdf"))

รัน python place_logo.py เปิด logo.pdf แล้วตรวจกรอบสี่เหลี่ยมผืนผ้าสีเขียวอมฟ้าใกล้มุมซ้ายบน โดยเห็นพื้นกระดาษผ่านตรงกลาง

แยกพื้นที่วาด SVG ออกจากตัวโลโก้ที่ระบายสี

พื้นที่วาดต้นทางมีอัตราส่วน 3:2: กว้าง 120 หน่วย สูง 80 หน่วย ที่ w=60 ตัวอย่างนี้มี พื้นที่วาด 60 × 40 มม. ภาพเริ่มเข้ามา 10 หน่วยต้นทางจากขอบพื้นที่วาด ดังนั้นสี่เหลี่ยมด้านนอกที่มีสีจึงเป็น 50 × 30 มม. เริ่มที่ 25, 25 มม. บนหน้า ค่าพวกนี้คำนวณจากพิกัดและสเกลของตัวอย่างนี้

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

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

ยืนยันว่า PDF ที่บันทึกมีพาธ

ภาพตัวอย่าง PDF แสดงรูปลักษณ์ แต่ภาพราสเตอร์ก็ดูคมที่ระดับซูมไม่สูงได้ ตรวจไฟล์ด้วย เราตรวจตัวอย่างเดี่ยวด้วย pypdf 6.1.1:

python -m pip install "pypdf==6.1.1"

from pathlib import Path
from pypdf import PdfReader
 
folder = Path(__file__).resolve().parent
page = PdfReader(folder / "logo.pdf").pages[0]
print("Page images:", len(page.images))
print(page.get_contents().get_data().decode("latin-1"))

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

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

วินิจฉัยภาพหายด้วยรุ่นที่ติดตั้ง

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

ต้องระวังคำตอบเก่าในเรื่องนี้ การทดสอบแยกบน 2.8.8 ที่มีองค์ประกอบ <text> ง่าย ๆ ของเราให้ข้อความ HELLO ที่ดึงออกได้ และสี่เหลี่ยมไล่ระดับเชิงเส้นพื้นฐานก็ส่งออกสำเร็จ การตรวจที่จำกัดเหล่านี้ไม่ได้ยืนยันความเข้ากันได้ครบทุกข้อความ ฟอนต์ CSS หรือไล่ระดับสีของ SVG แต่แสดงว่าคำกล่าวเก่าว่าข้อความ SVG ทั้งหมดหรือไล่ระดับสีทั้งหมดไม่รองรับอาจพาไปแปลงราสเตอร์โดยไม่จำเป็น

รายการคุณสมบัติ SVG ปัจจุบันยังระบุข้อจำกัดอย่าง markers, patterns, ข้อความตามพาธ และ CSS ซับซ้อนหรือภายนอก เปิดให้เห็นคำเตือนตัวนำเข้าระหว่างวินิจฉัย และเทียบหน้าที่บันทึกกับต้นทาง บันทึกที่ไม่มีคำเตือนอย่างเดียวไม่ได้พิสูจน์ว่าทุกคุณสมบัติภาพคงอยู่

ใช้ราสเตอร์แทนเมื่อเหมาะกับผลลัพธ์

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

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

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

เตรียมภาพราสเตอร์ล้วนก่อนขั้นตอน PDF

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

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

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

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

fpdf2 รองรับข้อความ SVG หรือไม่? การทดสอบข้อความพื้นฐานของเราใช้ได้กับ fpdf2 2.8.8 แต่ไม่ได้รับประกันทุกฟอนต์ คุณสมบัติจัดวาง หรือข้อความตามพาธ ตรวจรุ่นที่ติดตั้งและทดสอบตัวอักษรที่เอกสารใช้จริง

ทำไมภาพขนาด 60 มม. จึงดูแคบกว่า 60 มม.? ขนาดที่ขอใช้กับพื้นที่วาง ขอบว่างภายใน SVG ยังเป็นส่วนหนึ่งของพื้นที่นั้น รูปทรงที่มีสีจึงอาจแคบกว่า

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

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

1. fpdf2 — SVG — อธิบายการแทรก SVG โดยตรง การรองรับคุณสมบัติ และบันทึกคำเตือน
2. fpdf2 — ภาพ — อธิบายการวางภาพ ขนาด และการปรับให้พอดีตามอัตราส่วน
3. fpdf2 — แพ็กเกจ PyPI — ระบุ distribution ที่ติดตั้งได้และรูปแบบ import ใน Python

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