SVG นำเข้าแล้วขนาดผิด: ตรวจสาเหตุและแก้ไข

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

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

ขนาดสามอย่างภายใน SVG

SVG อธิบายสามสิ่งที่สัมพันธ์กัน ซึ่งผู้คนมักเรียกรวม ๆ ว่า “ขนาด” ข้อกำหนดระบบพิกัด SVG 2 กำหนดความสัมพันธ์ระหว่างพิกัดผู้ใช้ วิวพอร์ต และ viewBox

1. รูปทรง คือพิกัดภายในพาธและรูปต่าง ๆ สี่เหลี่ยมอาจครอบคลุมจาก 0 ถึง 100 ในระบบพิกัดของไฟล์เอง
2. viewBox ระบุว่าสี่เหลี่ยมส่วนใดของระบบพิกัดนั้นควรมองเห็น viewBox="0 0 100 100" หมายถึงพื้นที่ภาพที่มองเห็นครอบคลุม 100 หน่วยผู้ใช้ในแต่ละทิศทาง
3. วิวพอร์ต คือขนาดที่แสดงหรือนำเข้า องค์ประกอบรากอาจประกาศ width="100mm", width="400" หรือไม่ระบุความกว้างเลย แอปผู้รับจึงตัดสินใจว่าจะแปลงค่านั้นเป็นหน่วยเอกสารของตัวเองอย่างไร

นี่คือสี่เหลี่ยมขนาด 100 หน่วยแบบสมบูรณ์ที่กำหนดขนาดผลลัพธ์จริงชัดเจน:

<svg xmlns="http://www.w3.org/2000/svg"
  width="25mm" height="25mm" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="#2563eb" />
</svg>

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

คู่มือแก้ไข SVG ฉบับยาวครอบคลุมการแก้โค้ดอย่างปลอดภัย สำหรับปัญหานี้ ให้คงข้อมูลพาธไว้แล้วตรวจองค์ประกอบราก <svg>

ทำไม DPI จึงถูกกล่าวโทษ

พาธ SVG ไม่มีความละเอียดพิกเซลแบบ PNG หรือ JPG เรื่อง DPI เข้ามาเมื่อซอฟต์แวร์แปลงระหว่างพิกเซล CSS กับหน่วยจริง หรือเมื่อแอปออกแบบใช้หลักการส่งออกของตัวเองกับหน่วยเหล่านั้น

ข้อกำหนด CSS Values กำหนดให้ 1in เท่ากับ 96 พิกเซล CSS และ 1pt เท่ากับ 1/72 นิ้ว ขั้นตอนที่เข้าใจผิดว่าพิกเซล CSS เป็นพอยต์จะเกิดความคลาดเคลื่อนสเกล 96 ต่อ 72 หรือ 1.333 ที่พบบ่อย ตัวคูณอื่นอาจเกิดเมื่อตัวนำเข้าละเลย width และ height ที่เป็นหน่วยจริง ใช้เพียง viewBox หรือใช้การตั้งค่าหน่วยเอกสารของตัวเอง

คำแนะนำว่า “เปลี่ยน DPI” จึงไม่ครบถ้วน อาจไม่มีค่า DPI ของราสเตอร์ให้เปลี่ยนเลย ให้คำนวณตัวคูณสเกลก่อน:

scale factor = intended size / imported size

หากสี่เหลี่ยม 100 mm นำเข้าเป็น 75 mm ตัวคูณแก้ไขคือ 100 / 75 = 1.3333 ปรับสเกลสเก็ตช์หรือเอกสารที่นำเข้าทั้งหมดด้วยตัวคูณนั้น แล้วตรวจสี่เหลี่ยมอีกครั้ง

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

ทดสอบด้วยสี่เหลี่ยมอ้างอิง

ใช้สี่เหลี่ยมใหญ่พอให้วัดสะดวก แต่เล็กพอวางข้างงานได้

1. ในโปรแกรมต้นฉบับ วาดสี่เหลี่ยมที่มีขนาด 10 mm, 1 inch หรือขนาดที่ทราบอื่น ๆ อย่างแม่นยำ
2. กำหนดสีเติมหรือเส้นขอบให้ต่างจากงาน แล้ววางนอกแบบที่เสร็จแล้ว
3. ส่งออกงานและสี่เหลี่ยมรวมเป็น SVG เดียว
4. นำเข้าไฟล์ในแอปปลายทางโดยไม่ลากจุดจับปรับขนาด
5. วัดสี่เหลี่ยมด้วยเครื่องมือวัดมิติของแอปปลายทาง
6. หารขนาดที่ต้องการด้วยขนาดที่นำเข้า
7. ปรับสเกลทั้งงานที่นำเข้าครั้งเดียว อย่าปรับขนาดรูปทรงแยกกัน
8. ลบสี่เหลี่ยมหลังการวัดสุดท้ายผ่านแล้วเท่านั้น

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

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

แก้ไฟล์หรือแก้การนำเข้า?

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

ซอฟต์แวร์ CAD และเครื่องตัดต้องตรวจเพิ่ม

เบราว์เซอร์เพียงต้องวาดภาพ แต่ CNC เลเซอร์ และงาน 3D ต้องได้ผลลัพธ์ขนาดจริงที่แม่นยำ หลังสเกลผ่านแล้ว ให้ตรวจรูปทรงแยกกัน:

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

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

สำหรับ Shaper Origin ให้ทำต่อด้วย รายการตรวจขนาดจริงและประเภทการตัด การยืนยันสเกลเป็นขั้นหนึ่ง พาธที่นำเข้ายังต้องกำหนดการตัดที่ต้องการก่อนกัดงาน

หลังยืนยันขนาดที่ต้องการ ให้ ตรวจขนาดเทียบกับแผ่นรองตัด ก่อนหน้าจอเตรียมขั้นสุดท้ายของเครื่องตัด

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

PerfectVector เหมาะกับส่วนใด

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

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

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

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

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

viewBox มีผลต่อขนาด SVG อย่างไร? viewBox กำหนดสี่เหลี่ยมพิกัดที่มองเห็นและให้ตัวเรนเดอร์แมปหน่วยผู้ใช้นั้นไปยังวิวพอร์ต ตัวมันเองไม่ได้ประกาศขนาดจริง width และ height ที่ราก CSS หรือแอปผู้รับเป็นตัวกำหนดว่าวิวพอร์ตนั้นใหญ่เท่าไร

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

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

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

1. W3C — ระบบพิกัด SVG 2 — กำหนดหน่วยผู้ใช้ วิวพอร์ต viewBox และการแปลงรูป
2. W3C — CSS Values and Units ระดับ 4 — กำหนดการแปลงอ้างอิงระหว่างพิกเซล CSS นิ้ว และพอยต์
3. Autodesk Fusion — แทรก SVG — อธิบายตัวควบคุมการวางและสเกล SVG ในสเก็ตช์ Fusion

ก่อนสร้างเส้นทางเครื่องมือหรือตัด ให้ เตรียม SVG หรือ DXF สำหรับ CNC และตรวจผลลัพธ์ วัดสี่เหลี่ยมอ้างอิง ส่วนจริงของชิ้นงาน และตัวอย่าง CAM สุดท้าย ก่อนลบสี่เหลี่ยมออกจากไฟล์ผลิต