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

# Đồ nét ảnh bằng SVGcode: Kiểm tra hình đã xuất

> Vẽ hình ảnh màu phẳng trong SVGcode, sao chép SVG thực tế và kiểm tra bảng màu, các lỗ mở bên trong, nền và canvas trước khi sử dụng tệp trong thiết kế của bạn.

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

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

Để theo dõi hình ảnh SVGcode, hãy tải tác phẩm nghệ thuật raster của bạn, chọn SVG màu hoặc SVG đơn sắc, điều chỉnh dấu vết, sau đó kiểm tra chính SVG đã xuất. Kiểm tra màu sắc, lỗ bên trong và vải bạt trước khi chấp nhận. Trong thử nghiệm màu phẳng của chúng tôi, SVGcode đã tạo ra các đường dẫn thực và giữ nguyên độ mở của khung, nhưng cả hai biến thể được xuất đều thay đổi bảng màu gốc và sử dụng một khung vẽ khác.

Nếu bạn muốn một quy trình làm việc khác trên trình duyệt cho hình ảnh bạn đã có, hãy [xem trước miễn phí trong PerfectVector](https://perfectvector.com/vi/image-to-vector). Bạn phải mở khóa kết quả trước khi có thể chỉnh sửa hoặc xuất kết quả đó. Sử dụng các dấu kiểm có hình dạng và màu sắc tương tự bên dưới; hướng dẫn này không so sánh chất lượng đầu ra của hai công cụ.

## Dấu vết SVGcode là gì và những gì cần chuẩn bị

[SVGcode](https://svgco.de/) chuyển đổi hình ảnh raster thành đồ họa vector SVG. Tác giả của nó mô tả cách triển khai WebAssugging dựa trên Potrace theo dõi từng màu; [kho lưu trữ nguồn chính thức](https://github.com/tomayac/SVGcode) tài liệu triển khai. Điều đó giải thích cách tiếp cận, nhưng tệp được xuất là bằng chứng cho tác phẩm nghệ thuật của riêng bạn.

Bắt đầu với bản sao của PNG hoặc hình ảnh raster được hỗ trợ khác, trình duyệt có thể truy cập SVGcode và quyền xử lý tác phẩm nghệ thuật. Đối với tuyến bảng nhớ tạm bên dưới, trình duyệt của bạn phải cho phép truy cập bảng nhớ tạm hình ảnh. Luôn có sẵn trình soạn thảo văn bản thuần túy để lưu đánh dấu SVG đã sao chép, cùng với trình xem hoặc trình chỉnh sửa SVG để kiểm tra hoàn thành.

Dấu phẳng có các vùng màu riêng biệt là thông tin đầu vào hữu ích đầu tiên. Ghi lại màu sắc và độ mở bạn cần giữ lại trước khi thay đổi cài đặt. Đối với ảnh hoặc chuyển màu mềm, hãy quyết định những chi tiết nào bạn có thể đơn giản hóa; việc theo dõi không thể suy ra mọi ranh giới dự định từ các pixel. [hướng dẫn vector hóa hình ảnh](https://perfectvector.com/vi/blog/what-is-image-vectorization) giải thích chi tiết hơn về quyết định từ đường raster đến đường đi.

## 1. Tải hình ảnh và chọn chế độ theo dõi

Mở SVGcode và tải hình ảnh của bạn. Đối với lộ trình mà chúng tôi đã thử nghiệm, hãy đặt hình ảnh thực tế vào bảng nhớ tạm và chọn **Dán hình ảnh**. Xác nhận bản xem trước hiển thị hình ảnh mong muốn, bao gồm các vùng trong suốt và các chi tiết nhỏ bên trong, trước khi điều chỉnh bất cứ điều gì.

Chọn **Color SVG** (Màu SVG) khi các vùng màu riêng biệt quan trọng. Sử dụng **Monochrome SVG** (SVG đơn sắc) khi hình bóng một màu là kết quả mong muốn. Hướng dẫn này sử dụng Color SVG xuyên suốt; nó không báo cáo một thử nghiệm đơn sắc riêng biệt.

Giữ raster gốc mở bên cạnh bản xem trước. Đừng đánh giá dấu vết chỉ bằng việc các cạnh của nó có mịn màng khi phóng to hay không. Phần trung tâm trống, một khoảng trống nhỏ hoặc một màu sắc tách biệt có chủ ý có thể quan trọng hơn một mép ngoài nhẵn.

## 2. Thay đổi cài đặt có lưu ý đến một chi tiết dễ thấy

Bắt đầu với một khiếm khuyết mà bạn có thể chỉ ra, chẳng hạn như các chấm không mong muốn bên ngoài tác phẩm nghệ thuật hoặc một lỗ nhỏ biến mất. Thay đổi một điều khiển, đợi bản xem trước cập nhật, sau đó so sánh lại chi tiết đó.

**Ngăn chặn đốm** loại bỏ các vùng nhỏ. Nâng cao nó có thể giúp loại bỏ các dấu chấm lạc, nhưng hãy kiểm tra các chi tiết nhỏ mà bạn muốn giữ lại. **Hình ảnh đầu vào áp phích** giảm sự biến đổi màu sắc trước khi theo dõi; posterization nhóm màu sắc thành ít cấp độ hơn. [Hướng dẫn sử dụng SVGcode](https://web.dev/case-studies/svgcode?hl=en) của tác giả giải thích cả các điều khiển và áp phích hóa trên mỗi kênh.

Ứng dụng hiện tại cũng hiển thị Độ rộng nét và cài đặt chuyên môn. Để lại các điều khiển bạn không cần cho đến khi bạn xuất được đường cơ sở. Một tập hợp lớn các thay đổi đồng thời khiến khó có thể biết cái nào đã thay đổi kết quả.

**Hình minh họa**

![Bảng màu khái niệm, khung mở và bản vẽ minh họa ba bước kiểm tra SVG riêng biệt](https://perfectvector.com/blog/svgcode-image-tracing/inspection-checklist.webp)

*Bảng màu, lỗ và khung vẽ là những bước kiểm tra riêng biệt.*

### Thử nghiệm màu phẳng ban đầu của chúng tôi cho thấy điều gì

Chúng tôi đã tạo một PNG 512 × 512 với nền trong suốt, khung hình chữ nhật màu xanh nước biển có lỗ mở, hình chữ nhật màu vàng và hình chữ nhật màu xanh mòng két chồng lên nhau. Chúng tôi đã dán hình ảnh gốc đó vào ứng dụng SVGcode công khai, sử dụng Color SVG, Suppress Speckles 2 và Stroke Height 0, sau đó sao chép hai đầu ra SVG thực tế.

Hình ảnh đầu vào Posterize đầu tiên được sử dụng với màu đỏ, xanh lục và xanh lam ở 7 Bước mỗi bước và alpha ở 1 Bước. Hình ảnh thứ hai sử dụng cùng một hình ảnh nhưng không được chọn Hình ảnh đầu vào Posterize. Điều khiển RGB và alpha bị vô hiệu hóa ở trạng thái thứ hai đó.

| Kiểm tra     | PNG gốc                         | Áp phích hóa bật                      | Tắt áp phích                          |
| ------------ | ------------------------------- | ------------------------------------- | ------------------------------------- |
| Màu vùng rắn | `#152b46`, `#e6aa3c`, `#3e948d` | Đen, `#d4aa00`, xanh mòng két         | `#002a2a`, `#d4aa2a`, `#2a8080`       |
| Mở khung     | Minh bạch                       | Mở trong SVG được hiển thị            | Mở trong SVG được hiển thị            |
| Vải bạt      | 512 × 512 pixel                 | `viewBox="0 0 1024 1024"`             | `viewBox="0 0 1024 1024"`             |
| Cấu trúc SVG | Đầu vào raster                  | Ba đường dẫn, không có hình ảnh nhúng | Ba đường dẫn, không có hình ảnh nhúng |

Việc tắt áp phích hóa đã **không** khôi phục lại màu gốc chính xác của hình ảnh này. Cả hai SVG cũng đặt tác phẩm nghệ thuật trong một khung vẽ khác. Đây là những quan sát từ một hình ảnh được kiểm soát, không phải điểm chuẩn hay dự đoán cho mọi tệp. Đó là lý do chính đáng để kiểm tra quá trình xuất thực tế trước khi sử dụng nó làm bản gốc màu hoặc bố cục.

## 3. Sao chép SVG và giữ nguyên đánh dấu thực tế

Khi bản xem trước đã sẵn sàng, hãy chọn **Copy SVG** (Sao chép SVG). Đợi **Optimizing SVG** (Tối ưu hóa SVG) hoàn tất trước khi đọc hoặc dán bảng nhớ tạm. Trong quá trình chạy của chúng tôi, nội dung đọc vào bảng nhớ tạm ngay lập tức bị trống; đọc nó sau khi tối ưu hóa trả về đánh dấu SVG.

Dán đánh dấu vào trình soạn thảo văn bản thuần túy và lưu nó với phần mở rộng `.svg`, chẳng hạn như `artwork-trace.svg`. Xác nhận rằng nó chứa phần tử `<svg>` và đóng `</svg>` thay vì ảnh chụp màn hình hoặc tài liệu văn bản đa dạng thức. Giữ tên tệp riêng cho từng biến thể cài đặt để lần xuất sau này không thay thế tham chiếu của bạn.

Đây là lộ trình đánh dấu sao chép mà chúng tôi đã hoàn thành. SVGcode cũng hiển thị Lưu SVG, nhưng hướng dẫn này không chứng minh hành vi của hộp thoại lưu tệp gốc hoặc nhập thành công vào ứng dụng khác.

## 4. Kiểm tra màu sắc, lỗ mở và khung vẽ trong tệp đã lưu

Mở SVG đã lưu trong trình xem hoặc trình chỉnh sửa, bên cạnh nguồn chưa được chỉnh sửa. Kiểm tra những điều này một cách riêng biệt:

1. **Bảng màu:** so sánh các màu tô quan trọng với các giá trị màu mong muốn. Một dấu vết có thể giữ ba vùng trong khi thay đổi cả ba màu. Nếu cần có màu chính xác, hãy khôi phục và xác minh các màu tô dự định trong trình chỉnh sửa của bạn.
2. **Khai mạc:** đặt nền tương phản phía sau tác phẩm nghệ thuật. Nền mới sẽ hiển thị thông qua các lỗ dự định và không gian bên ngoài. Hình dạng được sơn màu trắng có thể trông giống như một lỗ mở trên nền trắng. [Hướng dẫn nền SVG trong suốt](https://perfectvector.com/vi/blog/transparent-background-svg) chỉ ra cách phân biệt hai loại này.
3. **Canvas:** kiểm tra giới hạn tài liệu cũng như giới hạn tác phẩm nghệ thuật. **viewBox** xác định hình chữ nhật tọa độ bên trong của SVG; nó không phải là một lời hứa hẹn về kích thước vật lý. Kiểm tra lề và kích thước trong ứng dụng mà bạn sẽ sử dụng tệp.
4. **Hình học:** chọn riêng các vùng quan trọng và thử đổi màu hoặc di chuyển một chút, sau đó hoàn tác. Tệp chứa đường dẫn vẫn cần kiểm tra khả năng chỉnh sửa cho công việc dự định của bạn.

SVG có thể biểu thị một lỗ mở với một số đường viền bên trong một đường phức hợp; [Tiêu chuẩn đường dẫn SVG](https://www.w3.org/TR/SVG2/paths.html) mô tả các đường dẫn phụ và lỗ hổng. Bạn không cần một phần tử đường dẫn riêng biệt cho mọi ranh giới hiển thị. Ngược lại, chỉ riêng số lượng đường dẫn thấp không chứng minh được rằng tất cả các chi tiết dự kiến ​​đều tồn tại.

Kiểm tra hoàn thành của chúng tôi là kỹ thuật số: kiểm tra đánh dấu đã sao chép và hiển thị SVG thực tế. Không gian mở và bên ngoài đều trong suốt ở cả hai biến thể. Không có kết quả nhập, in hoặc cắt trình soạn thảo đích nào được thử nghiệm. Để có đánh giá chuyển giao rộng hơn, hãy sử dụng [thẻ điểm chất lượng theo dõi vectơ](https://perfectvector.com/vi/blog/evaluate-vector-trace-quality).

## Khôi phục từ lần kiểm tra thất bại đầu tiên

| Những gì bạn nhìn thấy                         | Những gì cần kiểm tra tiếp theo                                                                                              |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Còn sót lại những chấm lạc                     | Tăng cường Giảm Đốm Đốm một cách thận trọng, sau đó kiểm tra lại các bộ phận nhỏ có chủ đích.                                |
| Một tính năng nhỏ biến mất                     | So sánh cài đặt nguồn và cài đặt đốm thấp hơn trước khi thử các điều khiển không liên quan.                                  |
| Màu sắc khác nhau                              | So sánh các màu tô đã xuất với bảng màu của bạn; đừng cho rằng việc vô hiệu hóa áp phích sẽ khôi phục các giá trị chính xác. |
| Một cái lỗ trông có vẻ đã được lấp đầy         | Kiểm tra trên nền tương phản, sau đó kiểm tra xem đường viền bên trong có tồn tại hay không.                                 |
| Tác phẩm nghệ thuật có những lợi nhuận bất ngờ | So sánh giới hạn canvas và tác phẩm nghệ thuật; đặt kích thước tài liệu được yêu cầu trong ứng dụng đích của bạn.            |
| Sao chép SVG không có gì có thể sử dụng được   | Đợi tối ưu hóa, sao chép lại và kiểm tra văn bản đã dán trước khi lưu.                                                       |
| Dán hình ảnh không có sẵn                      | Kiểm tra quyền của bảng tạm và các tùy chọn tải hình ảnh hiển thị khác của ứng dụng trong trình duyệt của bạn.               |

Nếu một lỗ vẫn sai, [Hướng dẫn khắc phục sự cố lỗ SVG](https://perfectvector.com/vi/blog/svg-holes-fill-in) sẽ tách hình dạng vết bị thiếu khỏi việc diễn giải quy tắc điền. Để biết quy trình theo dõi trên máy tính để bàn với các công cụ dọn dẹp trực tiếp, hãy xem [Bản đồ bit dấu vết Inkscape](https://perfectvector.com/vi/blog/inkscape-trace-bitmap).

Giữ hình ảnh gốc và SVG được chấp nhận cùng nhau. Viết ra bất kỳ chỉnh sửa bảng màu hoặc điều chỉnh khung vẽ nào mà người tiếp theo sẽ cần. Nếu bạn muốn thử tác phẩm nghệ thuật hiện có của mình trong một công cụ trình duyệt khác, hãy [bắt đầu miễn phí với PerfectVector](https://perfectvector.com/vi/image-to-vector) và kiểm tra hình bóng cũng như phần mở của bản xem trước.

## Câu hỏi thường gặp

**Mã SVG có thể theo dõi PNG thành các đường dẫn SVG thực không?**

Đúng. PNG màu phẳng ban đầu của chúng tôi tạo ra đánh dấu SVG được sao chép có chứa ba đường dẫn và không có hình ảnh được nhúng. Kiểm tra tệp đã xuất của riêng bạn; kết quả đó không đảm bảo cấu trúc hoặc độ trung thực giống nhau cho mọi hình ảnh.

**Việc tắt posterization có giữ được màu gốc không?**

Nó không có trong thử nghiệm có kiểm soát của chúng tôi. Cả hai cài đặt đều thay đổi giá trị màu đơn sắc ban đầu. So sánh các màu tô đã xuất với bảng màu dự định của bạn và sửa chúng khi màu sắc chính xác là vấn đề quan trọng.

**Tại sao canvas SVG khác với kích thước PNG của tôi?**

SVG được sao chép trong thử nghiệm của chúng tôi đã sử dụng viewBox 1024 × 1024 từ đầu vào 512 × 512. Kiểm tra canvas đã xuất, giới hạn tác phẩm nghệ thuật và kích thước hiển thị dự định một cách riêng biệt thay vì giả định kích thước pixel nguồn sẽ được giữ lại.

**Làm cách nào để biết lỗ mở là minh bạch?**

Đặt nền tương phản phía sau SVG đã lưu. Nó sẽ hiển thị thông qua phần mở đầu. Nếu không, hãy kiểm tra xem dấu vết có bị mất đường viền bên trong hay tạo ra hình vẽ ở đó hay không.

## Nguồn

1. [Ứng dụng SVGcode](https://svgco.de/) — giao diện dò tìm hình ảnh và các điều khiển hiện tại.
2. [Hướng dẫn sử dụng SVGcode dành cho tác giả trên web.dev](https://web.dev/case-studies/svgcode?hl=en) — dò theo từng màu, loại bỏ đốm và tạo áp phích.
3. [Kho lưu trữ SVGcode chính thức](https://github.com/tomayac/SVGcode) — tài liệu nguồn và triển khai dự án.
4. [Đường dẫn SVG W3C](https://www.w3.org/TR/SVG2/paths.html) — đường dẫn hỗn hợp, đường dẫn phụ và lỗ mở.

## Explore

- [Read the HTML article](https://perfectvector.com/vi/blog/svgcode-image-tracing)
- [Potrace PNG sang SVG: Xử lý alpha và giữ lỗ rỗng](https://perfectvector.com/vi/blog/potrace-png-to-svg.md)
- [Công cụ vector hóa AI tốt nhất 2026: lựa chọn theo nhu cầu](https://perfectvector.com/vi/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)