PerfectVector
โดย Irene Kim

เส้นกรีดรอยพับกับเส้นตัด SVG: อ่านรูปทรงให้เข้าใจ

อ่านรูปทรงรอยพับ SVG ก่อนกำหนด Score หรือ Cut เปรียบเทียบพาธเปิด แถบเติมสี และเส้นประ แล้วตรวจขั้นตอนกำหนดงานของ Cricut ตามเอกสาร

อ่าน 3 นาที
ในหน้านี้

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

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

เส้นทางรอยพับและรูปลักษณ์เป็นข้อมูลคนละส่วน

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

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

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

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

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

รอยทึบที่ดูเหมือนกันอาจเก็บเส้นทางต่างกัน

การ์ดใบแรกใช้พาธเปิดนี้เป็นเส้นอ้างอิงรอยพับ:

<path id="fold" d="M50 18 V62" fill="none"
      stroke="#76548B" stroke-width="1.6"
      stroke-linecap="butt" />

เส้นเริ่มที่ 50, 18 และต่อในแนวตั้งถึง 50, 62 ไม่มีคำสั่งปิด ความกว้างสีม่วงมาจากการวาดเส้นขอบรอบเส้นทางนั้น

การ์ดใบที่สองใช้แถบเติมสี:

<path id="fold" d="M49.2 18 H50.8 V62 H49.2 Z"
      fill="#76548B" stroke="none" />

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

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

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

การวาดเส้นประไม่ได้ตัดสินว่าจะกรีดรอยพับหรือตัด

การ์ดใบที่สามเก็บข้อมูลพาธ d="M50 18 V62" ตรงตามใบแรกและเพิ่ม stroke-dasharray="4 3" ข้อกำหนดการวาด SVG นิยามแพตเทิร์นเส้นประว่าเป็นส่วนที่วาดและไม่วาดของเส้นขอบ เส้นทางในตัวอย่างนี้ยังต่อเนื่องผ่านช่องว่างที่แสดง

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

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

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

สิ่งที่เราตรวจยืนยันในไฟล์ต้นฉบับ

เราตรวจเฉพาะกลุ่มรอยพับเมื่อนับพาธ โดยไม่นับเส้นรอบนอกและของตกแต่งที่เหมือนกัน:

  • รอยพับทึบมีพาธเปิดหนึ่งเส้นและพาธย่อยหนึ่งเส้น
  • แถบมีพาธปิดหนึ่งเส้นและพาธย่อยหนึ่งเส้น
  • รอยพับที่วาดเป็นเส้นประมีพาธเปิดหนึ่งเส้นโดยข้อมูลพาธไม่เปลี่ยน
  • แบบขีดแยกกันมีพาธเปิดเจ็ดเส้นและพาธย่อยเจ็ดเส้น

เรายังเรนเดอร์ SVG ที่บันทึกไว้ทั้งสี่ไฟล์ที่ 1000 × 800 พิกเซลด้วย Sharp 0.34.4 และ librsvg 2.61.1 รอยพับทึบกับแถบเติมสีให้บัฟเฟอร์พิกเซลเหมือนกัน พาธที่วาดเป็นเส้นประกับส่วนเส้นแยกก็ให้บัฟเฟอร์พิกเซลเหมือนกัน ภาพจากเบราว์เซอร์แสดง SVG ต้นฉบับชุดเดียวกันนี้

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

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

การตรวจตามเอกสาร Cricut เกิดหลังตรวจรูปทรง

คู่มือ Selecting Operation ปัจจุบันของ Cricut ระบุให้เลือกเลเยอร์แบบแล้วเลือกคำสั่งจากเมนู Operation คำสั่งที่เลือกจะแสดงในแผง Layers และมีตัวเลือกตามเครื่องที่เลือก สำหรับรอยพับที่จะกรีดรอย ให้ตรวจว่าวัตถุที่นำเข้าถูกชิ้นได้รับคำสั่ง Score ตามที่ตั้งใจ

ตำแหน่งเป็นอีกเรื่องที่ต้องตรวจ Cricut อธิบาย Attach ว่าใช้รักษาตำแหน่งตัดสัมพัทธ์และยึดเลเยอร์ Score, Draw หรือ Foil เข้ากับเลเยอร์ Cut สำหรับการ์ด รอยพับและเส้นรอบนอกต้องมีความสัมพันธ์ตามที่ต้องการทั้งในภาพตัวอย่างโครงการและพื้นที่ออกแบบ

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

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

แยกการลากเส้นตกแต่งออกจากรอยพับ

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

เก็บลวดลายเวกเตอร์ต้นฉบับไว้หากมี ลวดลายวงกลมในตัวอย่างสร้างโดยตรง ไม่ได้ลากเส้นจากภาพ เส้นอ้างอิงรอยพับตรงแบบง่ายก็สร้างโดยตรงได้เช่นกัน การลากเส้นจากภาพหน้าจอทั้งการ์ดเป็นการเพิ่มงานสร้างกลับให้รูปทรงที่รู้อยู่แล้ว

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

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

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

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

เส้นกรีดรอยพับแบบประเป็นพาธแยกกันเสมอหรือไม่? ไม่เสมอ พาธต่อเนื่องสามารถวาดเส้นขอบเป็นเส้นประได้ ส่วนตัวอย่างแยกของเราเก็บพาธเปิดอิสระเจ็ดเส้น ตรวจปลายและพาธย่อยเพื่อแยกความต่าง

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

แหล่งข้อมูล

  1. W3C: พาธ SVG — คำสั่งพาธ พาธย่อยที่ไม่เชื่อมกัน และพฤติกรรม closepath
  2. W3C: เส้นขอบประ SVG — การวาดเส้นขอบประที่แยกจากข้อมูลพาธเบื้องหลัง
  3. Cricut: การเลือกคำสั่ง — การกำหนดคำสั่งให้เลเยอร์และตรวจตัวเลือกที่มีของเครื่องที่เลือก
  4. Cricut: วิธีใช้ Attach — ตำแหน่งสัมพัทธ์และการยึดเลเยอร์ Score หรือคำสั่งอื่นเข้ากับเลเยอร์ Cut

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

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

PerfectVector

เตรียมเส้นพาธ SVG ที่เรียบร้อยสำหรับ
การตัดและการผลิต

ไม่ต้องใช้บัตรเครดิต