> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

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

Source: https://perfectvector.com/th/blog/svgcode-image-tracing

Language: th
Author: Irene Kim
Published: 2026-11-02T08:00:00+09:00

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

หากคุณต้องการขั้นตอนการทำงานของเบราว์เซอร์อื่นสำหรับรูปภาพที่คุณมีอยู่แล้ว [ดูตัวอย่างได้ฟรีใน PerfectVector](https://perfectvector.com/th/image-to-vector) คุณต้องปลดล็อกผลลัพธ์ก่อนจึงจะสามารถแก้ไขหรือส่งออกได้ ใช้เช็ครูปร่างและสีเดียวกันด้านล่าง การฝึกปฏิบัตินี้ไม่ได้เปรียบเทียบคุณภาพผลลัพธ์ของเครื่องมือทั้งสอง

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

[SVGcode](https://svgco.de/) แปลงภาพแรสเตอร์เป็นกราฟิกเวกเตอร์ SVG ผู้เขียนอธิบายถึงการใช้งาน WebAssembly ที่ใช้ Potrace ซึ่งติดตามสีตามสี เอกสาร [แหล่งเก็บข้อมูลอย่างเป็นทางการ](https://github.com/tomayac/SVGcode) ที่ใช้งาน นั่นอธิบายวิธีการได้ แต่ไฟล์ที่ส่งออกนั้นเป็นหลักฐานสำหรับงานศิลปะของคุณเอง

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

เครื่องหมายแบนที่มีขอบเขตสีที่แตกต่างกันเป็นอินพุตแรกที่มีประโยชน์ บันทึกสีและช่องเปิดที่คุณต้องคงไว้ก่อนที่จะเปลี่ยนการตั้งค่า สำหรับภาพถ่ายหรือการไล่ระดับสีแบบอ่อน ให้ตัดสินใจว่ารายละเอียดใดที่คุณสามารถทำให้ง่ายขึ้นได้ การติดตามไม่สามารถอนุมานทุกขอบเขตที่ต้องการจากพิกเซลได้ [คู่มือการสร้างภาพเวกเตอร์](https://perfectvector.com/th/blog/what-is-image-vectorization) อธิบายรายละเอียดเพิ่มเติมในการตัดสินใจแบบแรสเตอร์ไปยังเส้นทาง

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

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

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

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

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

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

**Suppress Speckles** ลบขอบเขตเล็กๆ การยกขึ้นอาจช่วยเรื่องจุดหลงทางได้ แต่ให้ตรวจสอบรายละเอียดเล็กๆ น้อยๆ ที่คุณตั้งใจจะเก็บไว้ **ภาพอินพุตโปสเตอร์** ลดความผันแปรของสีก่อนการติดตาม โปสเตอร์จัดกลุ่มสีเป็นระดับที่น้อยลง [คำแนะนำแบบทีละขั้นตอนของ SVGcode](https://web.dev/case-studies/svgcode?hl=en) ของผู้เขียนจะอธิบายทั้งการควบคุมและการสร้างโปสเตอร์ต่อช่อง

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

**ภาพประกอบ**

![จานสีแนวคิด กรอบเปิด และอาร์ตบอร์ดที่แสดงการตรวจสอบการตรวจสอบ SVG แยกกันสามรายการ](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp)

*จานสี รู และผ้าใบเป็นเช็คแยกกัน*

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

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

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

| ตรวจสอบ       | PNG ต้นฉบับ                     | เปิดโปสเตอร์แล้ว             | ปิดการโพสต์โปสเตอร์             |
| ------------- | ------------------------------- | ---------------------------- | ------------------------------- |
| สีภูมิภาคทึบ  | `#152b46`, `#e6aa3c`, `#3e948d` | สีดำ `#d4aa00` สีฟ้าอมเขียว  | `#002a2a`, `#d4aa2a`, `#2a8080` |
| การเปิดเฟรม   | โปร่งใส                         | เปิดใน SVG ที่แสดงผล         | เปิดใน SVG ที่แสดงผล            |
| ผ้าใบ         | 512 × 512 พิกเซล                | `viewBox="0 0 1024 1024"`    | `viewBox="0 0 1024 1024"`       |
| โครงสร้าง SVG | อินพุตแรสเตอร์                  | สามเส้นทางไม่มีรูปภาพฝังอยู่ | สามเส้นทางไม่มีรูปภาพฝังอยู่    |

การปิดการโปสเตอร์ **ไม่** ทำให้สีดั้งเดิมของรูปภาพกลับคืนมา 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 แบบโปร่งใส](https://perfectvector.com/th/blog/transparent-background-svg) จะแสดงวิธีแยกแยะทั้งสองแบบ
3. **แคนวาส:** ตรวจสอบขอบเขตเอกสารและอาร์ตเวิร์ก **viewBox** กำหนดสี่เหลี่ยมพิกัดภายในของ SVG มันไม่ใช่คำมั่นสัญญาเรื่องมิติทางกายภาพ ตรวจสอบระยะขอบและขนาดในแอปที่คุณจะใช้ไฟล์
4. **เรขาคณิต:** เลือกบริเวณที่สำคัญทีละส่วน แล้วลองเปลี่ยนสีหรือย้ายเล็กน้อย จากนั้นเลิกทำ ไฟล์ที่มีเส้นทางยังต้องการการตรวจสอบความสามารถในการแก้ไขสำหรับงานที่คุณต้องการ

SVG สามารถแสดงช่องเปิดที่มีรูปทรงหลายแบบภายในเส้นทางผสมเดียว [มาตรฐานเส้นทาง SVG](https://www.w3.org/TR/SVG2/paths.html) อธิบายเส้นทางย่อยและรู คุณไม่จำเป็นต้องมีองค์ประกอบเส้นทางแยกต่างหากสำหรับทุกขอบเขตที่มองเห็นได้ ในทางกลับกัน การนับเส้นทางที่ต่ำเพียงอย่างเดียวไม่ได้พิสูจน์ว่ารายละเอียดที่ตั้งใจไว้ทั้งหมดยังคงอยู่

การตรวจสอบความสมบูรณ์ของเราเป็นแบบดิจิทัล: ตรวจสอบมาร์กอัปที่คัดลอกและแสดงผล SVG จริง ช่องเปิดและพื้นที่ภายนอกมีความโปร่งใสในทั้งสองรูปแบบ ไม่มีการทดสอบผลการนำเข้า พิมพ์ หรือตัดโดยตัวแก้ไขปลายทาง สำหรับการตรวจสอบแฮนด์ออฟที่กว้างขึ้น ให้ใช้[ดัชนีชี้วัดคุณภาพการติดตามเวกเตอร์](https://perfectvector.com/th/blog/evaluate-vector-trace-quality)

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

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

หากหลุมยังคงผิด [คำแนะนำในการแก้ปัญหาหลุม SVG](https://perfectvector.com/th/blog/svg-holes-fill-in) จะแยกเรขาคณิตการติดตามที่ขาดหายไปออกจากการตีความกฎการเติม สำหรับเวิร์กโฟลว์การติดตามเดสก์ท็อปที่มีเครื่องมือล้างข้อมูลโดยตรง โปรดดูที่[บิตแมป Inkscape Trace](https://perfectvector.com/th/blog/inkscape-trace-bitmap)

เก็บรูปภาพต้นฉบับและ SVG ที่ยอมรับไว้ด้วยกัน จดบันทึกการแก้ไขจานสีหรือการปรับแต่งแคนวาสที่บุคคลถัดไปจำเป็นต้องใช้ หากคุณต้องการลองอาร์ตเวิร์คที่มีอยู่ในเครื่องมือเบราว์เซอร์อื่น [เริ่มต้นฟรีด้วย PerfectVector](https://perfectvector.com/th/image-to-vector) และตรวจสอบภาพเงาและช่องเปิดของตัวอย่าง

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

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

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

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

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

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

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

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

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

## แหล่งที่มา

1. [แอป SVGcode](https://svgco.de/) — อินเทอร์เฟซการติดตามรูปภาพและการควบคุมปัจจุบัน
2. [คำแนะนำผู้เขียน SVGcode บน web.dev](https://web.dev/case-studies/svgcode?hl=en) — การติดตามสีตามสี การปราบปรามจุด และการสร้างโปสเตอร์
3. [ที่เก็บ SVGcode อย่างเป็นทางการ](https://github.com/tomayac/SVGcode) — การดำเนินโครงการและเอกสารต้นฉบับ
4. [เส้นทาง W3C SVG](https://www.w3.org/TR/SVG2/paths.html) — เส้นทางผสม เส้นทางย่อย และช่องเปิด

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svgcode-image-tracing)
- [Potrace PNG เป็น SVG: จัดการอัลฟาและเก็บช่องว่าง](https://perfectvector.com/th/blog/potrace-png-to-svg.md)
- [เครื่องมือแปลงเวกเตอร์ AI ที่ดีที่สุดปี 2026: ตัวเลือกแนะนำตามงาน](https://perfectvector.com/th/blog/best-ai-vectorizers-2026.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)