เครื่องมือลากเส้นรูปภาพเป็น SVG

เครื่องมือ เครื่องมือลากเส้นรูปภาพเป็น SVG จะเปลี่ยนไฟล์ PNG, JPG หรือบิตแมปแรสเตอร์อื่นๆ ให้กลายเป็นเวกเตอร์ SVG ที่สะอาดและขยายขนาดได้อย่างไร้ขีดจำกัด แตกต่างจากเครื่องมือลากเส้นฝั่งเซิร์ฟเวอร์ที่ต้องอัปโหลดไฟล์ของคุณ หรือ SVG "ปลอม" ที่แค่ฝังบิตแมป base64 เอาไว้ เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด — โดยการจำกัดจำนวนสีของรูปภาพให้ออกมาเป็นเลเยอร์สีต่างๆ แล้วลากเส้นโครงร่างของแต่ละเลเยอร์ให้เป็นเส้นทางเวกเตอร์จริง โดยใช้การผสมผสานระหว่างการติดตามขอบเขต (Boundary following), การลดความซับซ้อนแบบ Ramer–Douglas–Peucker และการทำให้มุมเรียบแบบ Chaikin เพียงลากโลโก้ ไอคอน ภาพร่าง หรือรูปถ่าย แล้วดูการแสดงตัวอย่างแบบเคียงข้างกันที่สร้างขึ้นใหม่ในเวลาจริง จากนั้นคัดลอกมาร์กอัป SVG หรือดาวน์โหลดไฟล์ .svg ไปแก้ไขต่อใน Figma, Illustrator หรือ Inkscape ได้เลย

สรุปภาพรวม

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

เครื่องมือลากเส้นรูปภาพเป็น SVG: ฟีเจอร์โดยสรุป

ฟีเจอร์	สิ่งที่ได้รับ	เหมาะสำหรับ
ห้าค่าสำเร็จรูป	โลโก้ ภาพเงา ภาพร่างเส้น โปสเตอร์ภาพถ่าย และงานศิลป์ละเอียด ตั้งจำนวนสี การทำให้เรียบ และการลดความซับซ้อนให้คุณ	เริ่มจากการตั้งค่าที่เหมาะกับโลโก้ ภาพวาด หรือภาพถ่าย
โหมดการลาก	ลากเป็นชั้นสีซ้อนกัน รูปร่างขาวดำเดียว หรือเส้นขอบ	โลโก้ รูปร่างที่ตัดออก และภาพวาดด้วยดินสอ
ชั้นสี	เก็บสีไว้ 2 ถึง 16 สี ชุดสีที่ดึงออกมาปรากฏเป็นตัวอย่างสีข้างพรีวิว	จำกัดโลโก้ให้เหลือเฉพาะสีแบรนด์พื้นเรียบ
การทำให้เรียบและการลดความซับซ้อน	ตัวเลื่อนแยกกันช่วยมนมุมพิกเซลและรวมจุดที่ซ้ำซ้อน โดยใช้การทำให้เรียบแบบ Chaikin และการลดความซับซ้อนแบบ Ramer-Douglas-Peucker การลดความซับซ้อนมากขึ้นให้ไฟล์ที่เล็กลง	แก้เส้นที่เป็นบล็อกหรือทำให้ไฟล์ SVG เล็กลง
ความละเอียดการลาก	บิตแมปถูกปรับเป็นความกว้างสำหรับประมวลผล 64 ถึง 512 px ก่อนการลาก ค่าที่สูงขึ้นจับรายละเอียดได้มากขึ้นและ SVG มีขนาดใหญ่ขึ้น	ไอคอนประมาณ 240 px และรูปถ่ายละเอียด 400 ถึง 512 px
ส่งออก	คัดลอกโค้ด SVG ดาวน์โหลดไฟล์ .svg หรือดาวน์โหลดไฟล์ .png ที่เรนเดอร์จาก SVG	แก้ไขเส้นทางทีละเส้นในโปรแกรมแก้ไขเวกเตอร์
รูปแบบอินพุต	รับ PNG, JPG, GIF, WebP, BMP และ SVG ตัวอย่างเทียบข้างกันอัปเดตขณะที่คุณปรับการตั้งค่า และภาพอยู่ในอุปกรณ์ของคุณ	เปลี่ยนโลโก้บิตแมปให้เป็นไฟล์ที่ขยายได้

สิ่งที่ทำให้เครื่องมือลากเส้นนี้แตกต่าง

หลักการทำงาน (กระบวนการ 5 ขั้นตอน)

วิธีใช้งาน

1. อัปโหลดบิตแมป ลากไฟล์ PNG/JPG มาวางในโซนวางรูปภาพ, คลิกเพื่อเรียกดูไฟล์, วางจากคลิปบอร์ด (Ctrl+V), หรือคลิกรูปภาพตัวอย่างที่มีมาให้เพื่อดูการทำงานของเครื่องมือลากเส้น
2. เลือกพรีเซ็ต โลโก้ สำหรับเครื่องหมายการค้าที่มี 2–4 สี, ภาพเงา สำหรับรูปทรงตัดแปะ, ภาพร่างเส้น สำหรับงานศิลปะที่วาดด้วยมือ, โปสเตอร์รูปภาพ สำหรับรูปถ่ายที่ต้องการลดทอนรายละเอียดสี, ศิลปะรายละเอียดสูง สำหรับผลลัพธ์ที่มีเฉดสีละเอียดถึง 10 สี
3. ปรับแต่งแถบเลื่อน เลเยอร์สี ควบคุมจำนวนสีที่ต้องการให้คงไว้ การทำให้เรียบ ช่วยลบเหลี่ยมพิกเซลที่เป็นขั้นบันได การลดความซับซ้อน ช่วยยุบเส้นตรงที่ลากยาว (ค่าน้อย = รายละเอียดเยอะ, ค่ามาก = ไฟล์เล็กลง) ความละเอียดในการลากเส้น กำหนดความกว้างของพื้นที่ทำงานภายใน
4. คัดลอกหรือดาวน์โหลด ใช้ คัดลอก SVG สำหรับมาร์กอัปดิบ, ดาวน์โหลด .svg สำหรับไฟล์เวกเตอร์ที่นำไปแก้ไขต่อได้ หรือ ดาวน์โหลด .png เพื่อเรนเดอร์ SVG ที่ปรับแต่งแล้วกลับไปเป็นภาพแรสเตอร์ความละเอียดสูง

เคล็ดลับเพื่อให้ได้เส้นเวกเตอร์ที่สะอาดที่สุด

• เริ่มด้วยรูปภาพที่มีคอนทราสต์สูง พื้นหลังสีเรียบและขอบที่คมชัดจะถูกลากเส้นได้ดีกว่ารูปถ่ายที่เต็มไปด้วยการไล่เฉดสี (Gradients)
• ใช้พรีเซ็ตที่เหมาะกับงาน พรีเซ็ต โลโก้ เริ่มต้นจะสมมติว่ารูปภาพมีสีแบนราบ 3 สี ซึ่งมันจะดูแปลกตาหากใช้กับรูปถ่าย ให้เปลี่ยนไปใช้ โปสเตอร์รูปภาพ หรือ ศิลปะรายละเอียดสูง สำหรับรูปภาพธรรมชาติ
• ดันแถบเลื่อนลดความซับซ้อนก่อน แล้วค่อยปรับการทำให้เรียบ การลดความซับซ้อนจะลบจุดเชื่อมที่ไม่จำเป็น ส่วนการทำให้เรียบจะช่วยขัดเกลาจุดที่เหลืออยู่ การทำตามลำดับนี้จะช่วยให้ผลลัพธ์มีขนาดไฟล์ที่เล็กและเรียบเนียนควบคู่กัน
• ลดความละเอียดในการลากเส้นลงสำหรับโลโก้ ขนาด 240 px ก็เพียงพอแล้วสำหรับไอคอน — การปรับให้สูงกว่านี้รังแต่จะทำให้เกิดเส้นทางที่มีนอยส์รบกวนมากขึ้น
• เปิดใช้งานพื้นหลังโปร่งใส หากคุณต้องการนำ SVG ไปวางในเลย์เอาต์ที่มีสีสัน มิฉะนั้นตัวลากเส้นจะเติมสีขาวลงในพื้นหลังให้โดยอัตโนมัติ
• สำหรับภาพร่าง ให้ใช้โหมดขอบ โหมดนี้จะรันตัวกรอง Sobel ก่อนแล้วลากเส้นจากแผนที่ขอบผลลัพธ์ที่ได้ — เหมาะมากสำหรับลายเส้นและภาพวาดดินสอ

พื้นที่ที่เวกเตอร์ SVG โดดเด่น

โลโก้และไอคอนเวกเตอร์จะคงความคมชัดในทุกขนาดหน้าจอและทุกค่า DPI — ตั้งแต่ favicon ขนาด 16×16 ไปจนถึงแบนเนอร์ฮีโร่ระดับ 4K นอกจากนี้ SVG ที่ลากเส้นแล้วยังเป็นอินพุตที่สมบูรณ์แบบสำหรับการนำไปแก้ไขต่อ: เปิดไฟล์ใน Figma, Adobe Illustrator หรือ Inkscape คุณก็จะสามารถเปลี่ยนสี ปรับรูปร่าง หรือทำแอนิเมชันให้กับแต่ละเส้นทางแยกกันได้ ยิ่งไปกว่านั้น SVG ยังเป็นฟอร์แมตเว็บชั้นยอด: วางมาร์กอัปแบบอินไลน์ลงใน HTML เพื่อข้ามการร้องขอเครือข่ายเพิ่มเติม, ใส่ลงใน CSS เป็น background-image ผ่าน data: URI, หรือทำแอนิเมชันเส้นขอบด้วย stroke-dasharray เพื่อสร้างเอฟเฟกต์เหมือนเขียนด้วยลายมือ

เบื้องหลังอัลกอริทึม

เครื่องมือลากเส้นคลาสสิกระดับมาตรฐานคือ Potrace (Peter Selinger, 2003) ซึ่งใช้ขั้นตอนการประกอบโพลีกอนและการเพิ่มประสิทธิภาพเส้นโค้งเพื่อสร้างเส้นทาง Bezier ที่เรียบเนียนอย่างน่าทึ่ง ทว่าพอร์ตของ Potrace แบบเต็มระบบนั้นมีความยาวหลายพันบรรทัด เครื่องมือนี้จึงเลือกใช้ระบบการทำงานที่เบากว่าแต่มีความเข้าใจสอดคล้องกันเป็นอย่างดี นั่นคือ การติดตามขอบเขตแบบ Moore-neighborhood สำหรับการสกัดคอนทัวร์, Ramer–Douglas–Peucker (หรือเรียกอีกอย่างว่า อัลกอริทึม Douglas–Peucker) สำหรับการลดความซับซ้อนของเส้นทาง และอัลกอริทึมการตัดมุมของ Chaikin สำหรับการทำให้เรียบ แต่ละขั้นตอนใช้เวลาประมวลผลเป็น O(n) ตามความยาวของเส้นทาง ดังนั้นตัวลากเส้นทั้งหมดจึงประมวลผลรูปภาพขนาด 240 px ทั่วไปเสร็จสิ้นภายในเวลาไม่ถึงวินาที

ความเป็นส่วนตัวและความปลอดภัย

ทุกอย่างทำงานภายในเครื่องของคุณ องค์ประกอบ <input type="file"> จะอ่านไฟล์ของคุณเข้าสู่เบราว์เซอร์โดยตรง Canvas API จะดึงข้อมูลพิกเซลบนอุปกรณ์ของคุณ และตัวลากเส้น JavaScript จะไม่มีการส่งคำขอเครือข่ายใดๆ พร้อมกับรูปภาพของคุณ คุณสามารถตรวจสอบเรื่องนี้ได้โดยการเปิด DevTools → Network แล้วสังเกตในขณะที่ทำการลากเส้น — จะไม่มีทราฟฟิกการอัปโหลดปรากฏขึ้นเลย นั่นทำให้เครื่องมือนี้ปลอดภัยสำหรับโลโก้ที่เป็นกรรมสิทธิ์, สินทรัพย์แบรนด์ที่ยังไม่เปิดตัว และรูปถ่ายส่วนตัว

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

รูปภาพของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์ของคุณหรือไม่?

ไม่ เครื่องมือลากเส้นรูปภาพเป็น SVG ทำงานฝั่งไคลเอนต์ 100% รูปภาพบิตแมปของคุณจะถูกอ่านในเบราว์เซอร์ ประมวลผลด้วย Canvas API ลากเส้นด้วย JavaScript แบบวานิลลา และไม่มีการส่งผ่านเครือข่าย แม้คุณจะปิด Wi-Fi ตัวลากเส้นก็ยังคงทำงานได้ตามปกติ

ฉันสามารถลากเส้นรูปภาพฟอร์แมตใดได้บ้าง?

ฟอร์แมตแรสเตอร์ใดๆ ที่เบราว์เซอร์ของคุณสามารถเรนเดอร์ได้: PNG, JPG, GIF (เฟรมแรก), WebP และ BMP คุณยังสามารถลากเส้น SVG ที่มีอยู่ได้ (โดยจะถูกแปลงเป็นแรสเตอร์ก่อน) ซึ่งมีประโยชน์สำหรับการลดความซับซ้อนของเวกเตอร์ที่ซับซ้อนหรือเปลี่ยนจำนวนสีในรูปภาพ

ฉันควรเริ่มด้วยพรีเซ็ตไหนดี?

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

ทำไม SVG ที่ลากเส้นแล้วของฉันถึงดูเป็นเหลี่ยมๆ มุมๆ?

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

ฉันสามารถแก้ไข SVG ที่ลากเส้นแล้วในภายหลังได้ไหม?

ได้ ผลลัพธ์จะเป็นมาร์กอัป SVG ทั่วไปที่มีหนึ่งแท็ก <path> ต่อหนึ่งเลเยอร์สี (หรือหนึ่งแท็กต่อหนึ่งภาพเงาในโหมดขาวดำ/โหมดขอบ) เปิดไฟล์ใน Inkscape, Illustrator, Affinity Designer, Figma หรือโปรแกรมแก้ไขข้อความใดๆ เพื่อเปลี่ยนสี ปรับเปลี่ยนรูปร่าง หรือสร้างแอนิเมชันให้กับแต่ละเส้นทาง เส้นทางต่างๆ จะถูกจัดเรียงตามลำดับการเรนเดอร์ (สีที่สว่างที่สุดจะอยู่ก่อน) ดังนั้นแผงเลเยอร์ในโปรแกรมแก้ไขเวกเตอร์ใดๆ จะตรงกันพอดี

รูปภาพอินพุตของฉันสามารถมีขนาดใหญ่แค่ไหน?

ขนาดใดก็ได้ — แต่ตัวลากเส้นจะสุ่มตัวอย่างบิตแมปของคุณใหม่ภายในตาม ความละเอียดในการลากเส้น ที่เลือกไว้ (64–512 px) การปรับให้สูงขึ้นจะเก็บรายละเอียดได้ละเอียดยิ่งขึ้น แต่จะแลกมาด้วยขนาดไฟล์ SVG ที่ใหญ่ขึ้น สำหรับโลโก้ส่วนใหญ่ ขนาด 200–300 px คือจุดที่ลงตัวที่สุด สำหรับรูปถ่ายที่มีรายละเอียด ให้ลองใช้ขนาด 400–512 px

SVG ที่ลากเส้นแล้วจะดูเหมือนรูปภาพบิตแมปต้นฉบับทุกประการเลยไหม?

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

ฉันสามารถใช้ SVG ที่ลากเส้นแล้วในเชิงพาณิชย์ได้ไหม?

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