ลากเส้นภาพด้วย SVGcode: ตรวจรูปทรงที่ส่งออก

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

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

ลองกับรูปภาพของคุณเอง

เปิดเครื่องมือฉบับเต็ม

PNGJPGWEBPPNGSVGวางรูปภาพของคุณที่นี่หรือคลิก · วาง ⌘Vเลือกรูปภาพวางเพื่อตรวจสอบรูปภาพ

ลองใช้ฟรี วางรูปภาพเพื่อดูตัวอย่างเวกเตอร์ของคุณได้เลย ไม่ต้องสมัครสมาชิก

SVGcode ใดที่ติดตาม และสิ่งที่ต้องเตรียม

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

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

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

1. โหลดรูปภาพและเลือกโหมดการติดตาม

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

เลือก Color SVG (SVG สี) เมื่อพื้นที่สีต่างๆ มีความสำคัญ ใช้ Monochrome SVG (SVG ขาวดำ) เมื่อได้ผลลัพธ์ที่ต้องการคือภาพเงาสีเดียว คำแนะนำแบบนี้ใช้ Color SVG ตลอด; มันไม่ได้รายงานการทดสอบขาวดำแยกต่างหาก

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

2. เปลี่ยนการตั้งค่าโดยคำนึงถึงรายละเอียดที่มองเห็นได้เพียงรายละเอียดเดียว

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

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

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

ภาพประกอบ

สิ่งที่การทดสอบสีเรียบดั้งเดิมของเราแสดงให้เห็น

เราสร้าง PNG ขนาด 512 × 512 โดยมีพื้นหลังโปร่งใส กรอบสี่เหลี่ยมสีกรมท่าที่มีช่องเปิด สี่เหลี่ยมสีทอง และสี่เหลี่ยมสีน้ำเงินอมเขียวที่ทับซ้อนกัน เราวางภาพต้นฉบับนั้นลงในแอป SVGcode สาธารณะ โดยใช้ Color SVG, Suppress Speckles 2 และ Stroke width 0 จากนั้นคัดลอกเอาต์พุต SVG จริงสองรายการ

ครั้งแรกที่ใช้ภาพอินพุต Posterize โดยมีสีแดง เขียว และน้ำเงินที่ 7 ขั้นตอนในแต่ละขั้นตอน และอัลฟ่าที่ 1 ขั้นตอน ภาพที่สองใช้ภาพเดียวกันโดยไม่ได้เลือกภาพอินพุต Posterize ตัวควบคุม RGB และอัลฟ่าถูกปิดใช้งานในสถานะที่สองนั้น

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

3. คัดลอก SVG และรักษามาร์กอัปจริงไว้

เมื่อการแสดงตัวอย่างพร้อม ให้เลือก Copy SVG (คัดลอก SVG) รอให้ Optimizing SVG (การเพิ่มประสิทธิภาพ SVG) เสร็จสิ้นก่อนที่จะอ่านหรือวางคลิปบอร์ด ในการรันของเรา การอ่านคลิปบอร์ดทันทีว่างเปล่า การอ่านหลังจากการเพิ่มประสิทธิภาพส่งคืนมาร์กอัป SVG

วางมาร์กอัปลงในโปรแกรมแก้ไขข้อความธรรมดาและบันทึกด้วยส่วนขยาย .svg เช่น artwork-trace.svg ยืนยันว่ามีองค์ประกอบ <svg> และปิด </svg> แทนที่จะเป็นภาพหน้าจอหรือเอกสาร Rich-Text เก็บชื่อไฟล์แยกต่างหากสำหรับการตั้งค่าแต่ละรายการ เพื่อให้การส่งออกในภายหลังไม่แทนที่ข้อมูลอ้างอิงของคุณ

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

4. ตรวจสอบสี ช่องเปิด และผืนผ้าใบในไฟล์ที่บันทึกไว้

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

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

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

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

กู้คืนจากการตรวจสอบที่ล้มเหลวครั้งแรก

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

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

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

SVGcode สามารถติดตาม PNG ไปยังเส้นทาง SVG จริงได้หรือไม่

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

การปิดการทำโปสเตอร์จะคงสีดั้งเดิมไว้หรือไม่

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

เหตุใดผืนผ้าใบ SVG จึงแตกต่างจากขนาด PNG ของฉัน

SVG ที่คัดลอกมาในการทดสอบของเราใช้ 1,024 × 1024 viewBox จาก 512 × 512 อินพุต ตรวจสอบผืนผ้าใบที่ส่งออก ขอบเขตอาร์ตเวิร์ค และขนาดการแสดงผลที่ต้องการแยกจากกัน แทนที่จะถือว่าขนาดพิกเซลต้นทางจะยังคงอยู่

ฉันจะรู้ได้อย่างไรว่าช่องเปิดมีความโปร่งใส

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

แหล่งที่มา

1. แอป SVGcode — อินเทอร์เฟซการติดตามรูปภาพและการควบคุมปัจจุบัน
2. คำแนะนำผู้เขียน SVGcode บน web.dev — การติดตามสีตามสี การปราบปรามจุด และการสร้างโปสเตอร์
3. ที่เก็บ SVGcode อย่างเป็นทางการ — การดำเนินโครงการและเอกสารต้นฉบับ
4. เส้นทาง W3C SVG — เส้นทางผสม เส้นทางย่อย และช่องเปิด