นำเข้า SVG ใน Excalidraw: ส่วนใดแก้ไขได้?

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

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

“SVG ใน Excalidraw” อาจหมายถึงสามอย่าง

กรณีที่สามเป็นทิศทางกลับกัน เครื่องมือใส่ข้อมูลต้นทาง Excalidraw ใน SVG ที่ส่งออกได้ เพื่อเปิด ภาพวาดของตัวเอง มาแก้อีกครั้ง เช่น ส่วนขยาย Excalidraw ของ VS Code อธิบายไฟล์ .excalidraw.svg ที่มีข้อมูลฉากฝังอยู่ แต่นั่นไม่ได้หมายความว่าภาพประกอบ SVG ทั่วไปมีรูปทรง Excalidraw อยู่แล้ว

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

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

การทดสอบแปลงเล็ก: รูปทรงอยู่ แต่ช่องเปิดหาย

ต้นทางของเราเป็น SVG ที่เขียนด้วยมือ: วงสีเขียวอมฟ้าหนึ่งวงจากพาธประกอบแบบคู่คี่ กับวงกลมสีทองหนึ่งวง ตรงกลางวงโปร่งใสจริงในต้นฉบับ ไม่ใช่ระบายขาว เราแปลงผ่านคลังโค้ด svg-to-excalidraw ทางการ ด้วยแพ็กเกจ npm เวอร์ชัน 0.0.2 บันทึกฉากที่คืนมาเป็นไฟล์ .excalidraw เปิดใน Excalidraw แล้วส่งออก PNG โปร่งใสเพื่อเปรียบเทียบ

ต้นทางเดิมเทียบกับฉากที่แปลง

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

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

วิธีตรวจ SVG ของคุณเอง

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

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

PerfectVector เหมาะตรงไหน

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

สำหรับ SVG ที่มีรูปทรงเวกเตอร์เหมาะสมอยู่แล้ว ข้ามการไล่เส้นซ้ำ แล้วเปรียบเทียบต้นฉบับกับฉากที่แปลง คู่มือรูปร่าง SVG ที่กำหนดเองใน draw.io ที่เกี่ยวข้องแยกภาพกับรูปร่างของโปรแกรมในลักษณะคล้ายกันสำหรับโปรแกรมแผนภาพอีกตัว

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

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

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

ควรแปลง SVG เป็นเวกเตอร์ก่อนนำเข้าหรือไม่? ไม่ หาก SVG มีรูปทรงที่ต้องการอยู่แล้ว ให้ตรวจโครงสร้างและการแปลง Excalidraw การแปลงเวกเตอร์เกี่ยวข้องเมื่อภาพเริ่มต้นเป็นราสเตอร์ เช่น PNG หรือ JPG

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

1. การสนทนา Excalidraw #6082 — คำถามผู้ใช้เรื่อง SVG นำเข้าที่เป็นบล็อกเดียวแทนส่วนที่แก้ไขได้
2. Excalidraw — svg-to-excalidraw — วิธีแปลงโอเพนซอร์สทางการที่ใช้ทดสอบไอคอนต้นฉบับด้วยเวอร์ชันกำหนด
3. ส่วนขยาย Excalidraw Editor สำหรับ VS Code — อธิบายไฟล์ฉาก Excalidraw และการส่งออก SVG/PNG ที่มีข้อมูลฉากฝัง
4. Minixcali — SVG Chop — การทดลองอิสระแปลงส่วน SVG เป็นองค์ประกอบ Excalidraw พร้อมข้อควรระวังเรขาคณิต

หากเริ่มจากไอคอน PNG สร้าง SVG สำหรับประเมินด้วย PerfectVector ตรวจบริเวณแยกและช่องเปิด แล้วทดสอบฉาก Excalidraw ที่บันทึกก่อนใช้ในภาพวาด