PerfectVector
โดย Irene Kimอ่าน 3 นาที

ส่งออก Inkscape ด้วย CLI: หน้า ภาพ หรือวัตถุ

เลือกขอบเขตหน้า ภาพ หรือวัตถุสำหรับส่งออก PNG ด้วยคำสั่ง Inkscape เปรียบเทียบผลจริง สร้างสองขนาด และคง SVG ต้นฉบับไว้ครบ

ในหน้านี้

สำหรับการส่งออก PNG ด้วยคำสั่ง Inkscape ให้เลือกพื้นที่ก่อน: --export-area-page คงกรอบหน้า --export-area-drawing ครอบให้พอดีภาพ และ --export-id ใช้ขอบเขตวัตถุ เพิ่ม --export-id-only เมื่อผลควรแสดงเฉพาะวัตถุนั้น คู่มือบรรทัดคำสั่ง Inkscape แยกการครอบตามวัตถุออกจากการซ่อนวัตถุอื่น

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

สิ่งที่เปลี่ยนในการทดสอบส่งออก

เราสร้าง SVG ขนาด 600 × 360 ที่มีวัตถุตั้งชื่อสองตัว: ตราสีเขียวกับแถบสีคอรัลที่ซ้อนขอบขวา หน้าเผื่อพื้นที่ว่างมาก ขอบเขตภาพรวมมีขนาด 400 × 180 หน่วย ส่วนตราอย่างเดียวเป็น 180 × 180

เราส่งออกต้นทางด้วยแอป Inkscape 1.4.4 ทางการสำหรับ macOS arm64 โดยใช้ executable บรรทัดคำสั่ง การส่งออกทั้งสี่ด้านล่างขอความกว้าง 600 พิกเซลและพื้นหลังโปร่งใส

ทางเลือกส่งออกผลในการทดสอบนี้เนื้อหาที่เห็น
พื้นที่หน้าPNG 600 × 360ทั้งสองวัตถุพร้อมพื้นที่เผื่อของหน้า
พื้นที่ภาพPNG 600 × 270ทั้งสองวัตถุในกรอบที่ชิดขึ้น
ID ตราPNG 600 × 600ตราพร้อมส่วนหนึ่งของแถบสีที่ซ้อน
ID ตรากับ --export-id-onlyPNG 600 × 600เฉพาะตรา
พื้นที่ส่งออกและการมองเห็นวัตถุ
PNG ที่ส่งออกจริงจาก Inkscape เปรียบเทียบพื้นที่เผื่อหน้า ขอบเขตภาพแบบชิด การครอบวัตถุที่มีแถบสีซ้อน และตราที่แยกเดี่ยว
ผลลัพธ์จริงจาก Inkscape 1.4.4 ด้วย SVG เดียว ภาพตัวอย่างปรับสเกลให้พอดีแต่ละแผง ลายตารางอยู่หลัง PNG โปร่งใส

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

ตัวอย่างเหล่านี้ใช้ SVG หน้าเดียวที่มีรูปทรงทั่วไป ไม่ได้ทดสอบการเลือกหลายหน้า ฟิลเตอร์ หรือภาพที่ลิงก์

สร้างต้นทางที่มี ID วัตถุแน่นอน

บันทึกเป็น master.svg ID กลุ่ม badge ทำให้คำสั่งส่งออกวงกลมและพาธร่วมกันได้ วัตถุที่สอง swatch จงใจพาดข้ามขอบเขตตรา

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="360" viewBox="0 0 600 360">
  <g id="badge">
    <circle cx="150" cy="160" r="90" fill="#236f62"/>
    <path d="M150 89L190 160L150 231L110 160Z" fill="#cde0a4"/>
    <path d="M150 115L175 160L150 205L125 160Z" fill="#236f62"/>
  </g>
  <rect id="swatch" x="200" y="140" width="260" height="80"
        rx="12" fill="#d68462"/>
</svg>

สำหรับงานที่มีอยู่ ตรวจ ID ใน SVG ก่อนเขียนสคริปต์ส่งออก ชื่อวัตถุที่โปรแกรมแสดงอาจต่างจาก XML id ที่คำสั่งใช้ คู่มือแก้ SVG ของเราอธิบายการตรวจและแก้มาร์กอัปโดยเก็บสำรองไว้

ส่งออกหน้า ภาพ และตราเดี่ยว

คำสั่งด้านล่างใช้ไวยากรณ์ Bash หรือ Zsh รันจากโฟลเดอร์ที่มี master.svg เริ่มจากให้ตัวแปร shell ชี้ executable Inkscape:

inkscape_bin=inkscape
mkdir -p exports

ค่านี้สมมติว่ามี inkscape บน PATH หากติดตั้งแอป macOS ปกติ ค่าอาจเป็น /Applications/Inkscape.app/Contents/MacOS/inkscape แทน ใส่อัญประกาศพาธเมื่อตั้งค่า หากตำแหน่งมีช่องว่าง

สำหรับทั้งหน้า:

"$inkscape_bin" --batch-process master.svg \
  --export-type=png --export-area-page \
  --export-width=600 --export-background-opacity=0 \
  --export-filename=exports/page.png

สำหรับครอบรอบภาพ:

"$inkscape_bin" --batch-process master.svg \
  --export-type=png --export-area-drawing \
  --export-width=600 --export-background-opacity=0 \
  --export-filename=exports/drawing.png

สำหรับตราอย่างเดียว:

"$inkscape_bin" --batch-process master.svg \
  --export-type=png --export-id=badge --export-id-only \
  --export-width=600 --export-background-opacity=0 \
  --export-filename=exports/badge.png

หากต้องการทำตัวควบคุมการซ้อนในภาพซ้ำ ให้ลบ --export-id-only จากคำสั่งสุดท้ายและเปลี่ยนชื่อผลลัพธ์ แถบคอรัลจะปรากฏในกรอบตรา การเลือกขอบครอบด้วย ID อย่างเดียวไม่ได้แยกภาพออกมา

คู่มือ Inkscape อธิบายแฟล็กเหล่านี้ --export-width ตั้งความกว้างบิตแมปเป็นพิกเซลและแทนค่าการตั้ง DPI อัตราส่วนพื้นที่ส่งออกกำหนดความสูงที่สอดคล้อง เราใช้ทางเลือกพื้นที่หนึ่งแบบต่อคำสั่งและพาธผลลัพธ์ .png ชัดเจน

เราใส่ --batch-process ในคำสั่งที่ทดสอบ ในการรัน macOS นี้ การส่งออกโดยไม่มีแฟล็กเขียน PNG ได้แต่ปล่อยกระบวนการรันต่อ ส่วนคำสั่งด้านบนจบปกติ แฟล็กนี้แยกจากลูป shell ที่ขอหลายขนาด

สร้างสองขนาดโดยไม่เปลี่ยนไฟล์หลัก

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

for export_width in 240 480; do
  "$inkscape_bin" --batch-process master.svg \
    --export-type=png --export-area-page \
    --export-background-opacity=0 \
    --export-width="$export_width" \
    --export-filename="exports/page-${export_width}.png" || exit 1
done

การรันของเราได้ PNG 240 × 144 และ 480 × 288 ทั้งคู่คงกรอบหน้าและพื้นหลังโปร่งใสเดิม ค่าแฮช SHA-256 ของ master.svg ก่อนและหลังส่งออกตรงกัน ไบต์ต้นทางจึงไม่เปลี่ยนในการทดสอบนี้

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

ตรวจไฟล์ก่อนส่งมอบ

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

  • ขอบว่างใหญ่: เทียบผลส่งออกหน้าและภาพ เลือกกรอบที่ปลายทางต้องการ
  • วัตถุอื่นปรากฏในกรอบ ID: ตรวจว่าต้องใช้ --export-id-only หรือไม่
  • ความโปร่งใสดูเป็นขาวในโปรแกรมดู: เปิด PNG บนพื้นหลังสีตัดกัน วัตถุพื้นหลังขาวในต้นทางเป็นภาพและยังมองเห็น แม้พื้นหลังส่งออกโปร่งใส
  • ภาพดูใหญ่ขึ้นระหว่างผลลัพธ์: เทียบพื้นที่ส่งออกควบคู่ความกว้างพิกเซล

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

หากเทียบวิธีอัตโนมัติอื่น คู่มือ SVG เป็น PNG ด้วย Sharp ของเราอธิบายตัวเรนเดอร์และการตั้งขนาดของไลบรารีนั้น ตัวเลือก API ไม่ใช้กับ Inkscape โดยตรง

หากภาพต้นทางมีเพียง PNG หรือ JPG เครื่องมือแปลงภาพเป็นเวกเตอร์ของ PerfectVector เตรียมเวกเตอร์ที่แก้ได้ก่อนขั้นส่งออกนี้ ตรวจพาธที่สร้างกลับในโปรแกรมแก้ไข แล้วเลือกกรอบหน้าและ ID วัตถุ กระบวนการ Trace Bitmap ของ Inkscape เป็นอีกวิธีเตรียม SVG ที่มีพาธต้องการอยู่แล้วไปขั้นส่งออกได้เลย

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

ทำไมส่งออกหน้าและภาพได้ขนาดต่างกัน? ขอบเขตอาจมีอัตราส่วนต่างกัน ในการทดสอบทั้งคู่ขอความกว้าง 600 พิกเซล แต่หน้า 600 คูณ 360 ให้ PNG สูงกว่าขอบเขตภาพ 400 คูณ 180

ทำไม export-id ยังรวมวัตถุอื่น? มันเลือกขอบเขตส่งออกของวัตถุเป้าหมาย ภาพอื่นที่พาดผ่านขอบเขตนั้นยังแสดงได้ เพิ่ม export-id-only เมื่อต้องการซ่อนวัตถุอื่น

ชุดส่งออก PNG นี้เขียนทับ SVG ต้นทางหรือไม่? คำสั่งที่แสดงอ่าน master.svg และเขียน PNG ที่ตั้งชื่อแยก แฮชต้นทางไม่เปลี่ยนหลังทดสอบ เก็บไฟล์หลักและไฟล์ส่งมอบแยก และตรวจคำสั่งแก้ไขหรือบันทึกเพิ่มเติมก่อนเพิ่มในสคริปต์

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

  1. Inkscape Wiki — การใช้บรรทัดคำสั่ง — กระบวนการส่งออกและความต่างระหว่างกรอบวัตถุกับผลวัตถุเดี่ยว
  2. Inkscape — คู่มือบรรทัดคำสั่ง — ตัวเลือกพื้นที่ วัตถุ ขนาด พื้นหลัง และผลลัพธ์
  3. คู่มือผู้เริ่มต้น Inkscape — ส่งออกไฟล์ PNG — แนวคิดพื้นที่ส่งออกและความโปร่งใส

หากภาพยังต้องมีพาธเวกเตอร์ แปลงภาพเป็นเวกเตอร์ และตรวจผลก่อน จากนั้นบันทึก SVG หลัก เลือกขอบเขตส่งออกหนึ่งแบบ และตรวจกรอบกับขนาด PNG แรกก่อนทำซ้ำทั้งชุด

เพิ่มเติมจากบล็อก

เริ่มต้นด้วย SVG ที่เรียบร้อยขึ้น
และแก้ไขได้ง่ายกว่า