นำเข้า SVG ใน Penpot: เพิ่มรูปทรงแก้ไขได้ในงานออกแบบ

หากต้องการนำเข้า SVG ใน Penpot ให้เปิดไฟล์ออกแบบแล้วลาก .svg ลงผืนงาน หรือเลือกเครื่องมือภาพบนแถบเครื่องมือเพื่อเลือกไฟล์ คำสั่ง Import files บนแดชบอร์ดใช้กับไฟล์โครงการ Penpot หากต้องการวางไอคอน ให้เริ่มภายในงานออกแบบ คำแนะนำเพิ่มเลเยอร์ และ เอกสารนำเข้าโครงการ ของ Penpot อธิบายสองวิธีที่แยกกันนี้

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

ตรวจการนำเข้าก่อนใช้ซ้ำ

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

เริ่มในผืนงาน แล้วตรวจเลเยอร์

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

เลือกกราฟิกที่นำเข้าแล้วขยายรายการในแผง Layers กลุ่มเป็นการจัดโครงสร้างที่มีประโยชน์ ไม่ใช่หลักฐานว่า SVG กลายเป็นบิตแมป เลือกวัตถุลูกจากแผงหรือดับเบิลคลิกเข้าในกลุ่มได้ Penpot ยังรองรับการเลือกวัตถุชั้นลึกด้วย Ctrl-click หรือ Command-click ตัวควบคุมเหล่านี้อยู่ใน คู่มือเลือกเลเยอร์

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

หลีกเลี่ยงแยกกลุ่มหรือทำทุกอย่างให้แบนตั้งแต่แรก ระบุส่วนที่ต้องการเปลี่ยนก่อน เก็บกลุ่มไว้หากวัตถุลูกให้การควบคุมที่ต้องการอยู่แล้ว

ทดสอบสีเติมหนึ่งส่วนและเส้นโค้งหนึ่งเส้น

ใช้ไอคอนเล็กที่เห็นส่วนแยกชัด ต้นไม้ในกระถางเป็นตัวอย่างที่ดี: กระถางควรเปลี่ยนสีโดยไม่เปลี่ยนใบ และใบหนึ่งใบควรแก้ได้โดยไม่ทำทั้งต้นบิด

ในสำเนาไอคอนที่นำเข้า:

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

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

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

วินิจฉัยอาการก่อนเปลี่ยนไฟล์

ใช้ SVG ที่ยังไม่แก้เป็นข้อมูลอ้างอิง เปิดในเบราว์เซอร์และเทียบกับผลนำเข้า Penpot หากในเบราว์เซอร์ก็ผิดอยู่แล้ว ให้กลับไปการส่งออกต้นฉบับก่อนพยายามซ่อมสำเนา Penpot

เส้นขีดหายและกราฟิกที่มองไม่เห็น

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

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

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

ข้อความที่ดูถูกต้องแต่แก้ไม่ได้

สำหรับป้ายปุ่ม ลองเปลี่ยนหนึ่งคำ สำหรับโลโก้ ตัดสินว่ารักษารูปตัวอักษรอย่างเดียวเพียงพอหรือไม่ นี่คือข้อกำหนดต่างกัน

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

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

เมื่อใดควรใช้ PerfectVector ในขั้นตอนนี้

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

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

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

ส่งออกหนึ่งตัวอย่างก่อนสร้างชุด

เก็บงานออกแบบสำหรับทำงานใน Penpot แล้วส่งออก SVG ส่งมอบแยก เลือกไอคอนหรือบอร์ด เพิ่มค่าตั้งส่งออกด้วยปุ่มบวกในส่วน Export ของแผง Design แล้วเลือก SVG Penpot อธิบายใน การส่งออกเลเยอร์

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

ก่อนเพิ่มตัวอย่างในชุดใหญ่ ให้ยืนยัน:

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

แล้วใช้รายการตรวจเดียวกันทั้งชุด ขั้นตอนแปลงไอคอน PNG เป็น SVG สำหรับชุด UI เพิ่มกริดร่วม การปรับขนาดตามการมองเห็น และกฎตั้งชื่อเมื่อการนำเข้าแต่ละชิ้นถูกต้องแล้ว

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

ทำไมหน้าต่าง Import files ของ Penpot ปฏิเสธ SVG? หน้าต่างนั้นนำเข้าไฟล์โครงการ Penpot หากต้องวางกราฟิก SVG ให้เปิดไฟล์ออกแบบและใช้เครื่องมือภาพหรือลาก SVG ลงผืนงาน

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

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

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

แหล่งข้อมูล

1. Penpot: เลเยอร์ — การแทรกกราฟิก เลือกวัตถุลูก และแก้โหนดพาธ
2. Penpot: ส่งออกและนำเข้าไฟล์ Penpot — วิธีนำเข้าโครงการของโปรแกรมที่แยกจากการแทรกกราฟิกบนผืนงาน
3. Penpot: ตัวนำเข้ารูปทรง SVG — การจัดการรูปทรงของโปรแกรม ภาพ และเนื้อหา SVG ดิบแยกในรุ่นเผยแพร่
4. Penpot: ตัวเลือก SVG ดิบ — ตัวควบคุมรูปลักษณ์เพียงอย่างเดียวไม่ได้ยืนยันความแก้ไขได้ของพาธแบบโปรแกรม
5. Penpot: สีและเส้นขีด — ตัวควบคุมสีเติม เส้นขีด และปลายเส้นที่ใช้ตรวจวินิจฉัย
6. Penpot: ข้อความและตัวพิมพ์ — การสร้างเลเยอร์ข้อความของโปรแกรมและแก้เนื้อหา
7. Penpot: ส่งออกเลเยอร์ — การเพิ่มค่าตั้งส่งออก SVG สำหรับเลเยอร์หรือบอร์ด

---

หากต้นฉบับเป็น PNG หรือ JPG และต้องมีรูปทรงแก้ไขได้ ให้ เตรียม SVG ด้วย PerfectVector นำเข้า Penpot เปลี่ยนสีเติมหนึ่งส่วน และทดสอบเส้นโค้งหนึ่งเส้นก่อนใช้กราฟิกในชุดออกแบบ