Image to SVG - Vector Hóa Ảnh Bitmap Sang SVG

Tính năng nổi bật

• Nhận PNG, JPG và WebP, đọc điểm ảnh bằng Canvas API ngay trên máy bạn
• Giảm số màu từ 2 tới 32 bằng median-cut kết hợp k-means, chọn bằng thanh trượt
• Ngưỡng làm mượt đường viền điều khiển epsilon của thuật toán Ramer-Douglas-Peucker
• Bỏ chi tiết nhỏ hơn một số điểm ảnh cho trước, vùng nhỏ nhập vào vùng láng giềng lớn nhất
• Chọn giữa cạnh thẳng bằng lệnh L hoặc bo tròn bằng đường cong bậc hai Q
• Xem trước ảnh gốc và SVG cạnh nhau, kèm dung lượng trước sau và số path sinh ra
• Gộp mọi vùng cùng màu vào một thẻ path duy nhất để giảm số phần tử trong tệp
• Chép mã SVG hoặc tải tệp .svg, giữ nguyên viewBox theo kích thước đã xử lý

Vì sao cần một tệp vector thay vì phóng to ảnh gốc

Một tệp PNG hay JPG lưu hình dưới dạng lưới ô màu cố định. Khi bạn phóng to, trình duyệt không có thêm thông tin nào để lấp vào phần trống nên phải nội suy, và kết quả là cạnh chữ nhòe, viền logo răng cưa. Đây là lý do khách hàng gửi cho bạn một logo 200 px rồi hỏi vì sao in ra tấm biển hai mét thì mờ. Tệp SVG lưu hình dưới dạng công thức của các đường path, nên mỗi lần hiển thị trình duyệt vẽ lại từ đầu ở đúng độ phân giải cần thiết, phóng bao nhiêu cũng sắc. Ngoài chuyện độ nét, vector còn cho phép đổi màu bằng thuộc tính fill trong CSS, dùng làm hình nền trong mã nguồn mà không cần thêm một lượt tải tệp, và với logo phẳng thì dung lượng thường nhỏ hơn ảnh điểm cùng chất lượng nhiều lần. Khi bản gốc vector đã thất lạc và bạn chỉ còn ảnh chụp màn hình của logo, vector hóa là cách nhanh nhất để có lại một bản dùng được, ít nhất là đủ để làm bản nháp trước khi thuê người vẽ lại chính xác.

Lợi ích khi sử dụng

• •Có ngay bản vector dùng tạm khi tệp gốc của logo đã thất lạc
• •Ảnh không rời khỏi máy, phù hợp cả với tài liệu nội bộ không được đưa lên dịch vụ ngoài
• •Ba thanh trượt cho phép thử nhanh nhiều mức chi tiết mà không cần mở phần mềm đồ họa
• •Số path và dung lượng hiện ngay nên bạn biết kết quả có dùng được cho web không
• •Tệp SVG đổi màu được bằng CSS, tiện cho biểu tượng cần đổi màu theo giao diện sáng tối
• •Không cần cài đặt, không cần tài khoản, dùng được trên cả điện thoại

Cách vector hóa ảnh sang SVG

1. 1Bấm vào vùng chọn ảnh rồi chọn tệp PNG, JPG hoặc WebP từ máy. Ảnh dài hơn 512 px sẽ tự thu nhỏ về đúng 512 px cạnh dài, thẻ bên dưới cho biết kích thước gốc và kích thước sau khi thu.
2. 2Kéo thanh số màu rút gọn. Logo phẳng thường chỉ cần 2 tới 6 màu, minh họa nhiều mảng màu thì 8 tới 16, còn ảnh có chuyển sắc thì tăng lên nhưng đừng kỳ vọng nhiều.
3. 3Kéo thanh ngưỡng làm mượt đường viền. Giá trị 0 giữ nguyên răng cưa từng điểm ảnh, giá trị 1 tới 2 cho đường viền gọn mà vẫn bám hình, trên 3 thì các chi tiết nhỏ bắt đầu bị nắn thẳng.
4. 4Kéo thanh bỏ chi tiết nhỏ hơn để loại các đốm nhiễu do nén JPG. Với ảnh sạch thì để 4 tới 12, với ảnh chụp màn hình đã qua nhiều lần lưu lại thì tăng lên 30 tới 60.
5. 5Bật công tắc nối các đoạn thành đường cong nếu bạn muốn góc mềm, tắt nếu muốn giữ cạnh sắc của hình khối.
6. 6Bấm nút vector hóa và chờ. Công cụ cố tình không chạy lại mỗi lần bạn kéo thanh trượt vì mỗi lượt tính đều nặng.
7. 7So sánh hai khung xem trước, đọc dung lượng trước sau và số path. Nếu chưa ưng thì chỉnh tùy chọn rồi bấm lại, nếu ưng thì chép mã hoặc tải tệp .svg về.

Lượng tử hóa màu: vì sao phải giảm số màu trước khi truy vết đường viền

Một tấm ảnh PNG thông thường có thể chứa vài chục nghìn màu khác nhau, phần lớn là các sắc độ chỉ lệch nhau một hai đơn vị mà mắt không phân biệt được. Nếu truy vết đường viền trực tiếp trên dữ liệu đó, mỗi ô màu hơi khác hàng xóm sẽ thành một vùng riêng và bạn nhận về hàng chục nghìn path vô nghĩa. Vì vậy bước đầu tiên luôn là gom màu. Công cụ này làm hai lượt. Lượt một dùng median-cut: toàn bộ điểm ảnh được xếp vào một biểu đồ tần suất mười lăm bit, tức mỗi kênh màu chỉ giữ năm bit cao, rồi khối màu đó bị cắt đôi liên tục, mỗi lần cắt chọn khối có biên độ rộng nhất và cắt tại điểm trung vị theo số lượng điểm ảnh, cho tới khi đủ số khối bằng số màu bạn chọn. Cách chia này bảo đảm các màu đại diện trải đều trên những vùng thực sự đông điểm ảnh chứ không dồn hết vào một góc. Lượt hai là k-means: mỗi ô màu được gán về tâm gần nhất theo khoảng cách Euclid trong không gian RGB, rồi các tâm dịch về trọng tâm của nhóm mình, lặp lại tối đa mười vòng và dừng sớm khi các tâm gần như đứng yên. Giới hạn mười vòng là cố ý, vì k-means không có điểm dừng tự nhiên và để nó chạy tự do trên luồng chính sẽ làm tab đứng hình. Chạy trên biểu đồ tần suất thay vì trên từng điểm ảnh giúp bước này nhanh hơn hàng chục lần mà sai lệch nằm dưới ngưỡng mắt thấy.

Gắn nhãn liên thông: tách từng mảng màu thành một vùng riêng

Sau khi lượng tử hóa, mỗi điểm ảnh chỉ còn mang một chỉ số màu. Nhưng chỉ số màu chưa đủ để vẽ path, vì hai mảng đỏ nằm ở hai góc đối diện của ảnh vẫn mang cùng chỉ số mà rõ ràng là hai hình khác nhau. Việc tách chúng ra gọi là gắn nhãn liên thông. Thuật toán duyệt lần lượt từng điểm ảnh, gặp điểm nào chưa có nhãn thì cấp một nhãn mới rồi lan tỏa sang mọi điểm hàng xóm cùng chỉ số màu, lan tiếp từ các điểm vừa nhận cho tới khi không còn điểm nào để lan. Công cụ dùng liên thông bốn hướng, nghĩa là hai điểm ảnh chạm nhau theo đường chéo bị coi là không dính nhau, quy ước này cho đường viền gọn hơn ở các nét mảnh. Điểm kỹ thuật đáng nói nhất là phần lan tỏa được cài bằng một ngăn xếp tường minh trên mảng số nguyên chứ không dùng đệ quy. Lý do rất thực tế: vùng nền của một ảnh 512 nhân 512 có thể chứa hơn hai trăm nghìn điểm ảnh, và một hàm đệ quy sâu chừng đó sẽ làm tràn ngăn xếp lời gọi của trình duyệt, tab sập kèm thông báo lỗi khó hiểu. Với ngăn xếp tự quản lý, độ sâu chỉ là bộ nhớ mảng, hoàn toàn an toàn. Kết quả của bước này là mảng nhãn, danh sách diện tích và chỉ số màu của từng vùng, làm đầu vào cho cả bước lọc chi tiết nhỏ lẫn bước truy vết.

Truy vết biên trên lưới cạnh và cách khoét lỗ thủng bằng fill-rule

Có hai cách lấy đường viền của một vùng điểm ảnh. Cách quen thuộc là đi qua tâm các điểm ảnh biên theo kiểu Moore, nhưng nó cho đường viền lệch nửa điểm ảnh và xử lý lỗ thủng khá rắc rối. Công cụ này chọn cách thứ hai là đi dọc theo khe giữa các điểm ảnh, tức là bò trên lưới các đỉnh nguyên. Đứng ở một đỉnh lưới, ta xét bốn điểm ảnh vây quanh nó và hỏi điểm nào thuộc vùng đang truy vết. Một cạnh được đi theo hướng nào đó khi điểm ảnh nằm bên phía quay chín mươi độ của hướng ấy thuộc vùng, còn điểm ảnh phía đối diện thì không. Với hầu hết đỉnh chỉ có đúng một cạnh thỏa mãn nên đường đi là duy nhất. Riêng đỉnh yên ngựa, tức nơi hai điểm ảnh chéo nhau cùng thuộc vùng còn hai điểm kia thì không, sẽ có hai lựa chọn, và ta luôn rẽ vào trong để giữ đúng quy ước liên thông bốn hướng đã dùng ở bước gắn nhãn. Việc đánh dấu đã đi theo cạnh có hướng chứ không theo đỉnh bảo đảm mỗi cạnh chỉ được đi một lần, nên vòng lặp chắc chắn kết thúc kể cả với hình bàn cờ dày đặc yên ngựa. Điểm bắt đầu được lấy từ những điểm ảnh có ô phía trên khác nhãn, nhờ vậy quét được cả biên ngoài lẫn biên của các lỗ thủng bên trong. Tất cả đường biên của cùng một vùng được ghép thành nhiều subpath trong một lệnh path duy nhất, và thuộc tính fill-rule đặt là evenodd khiến các lỗ tự động bị khoét mà không cần đảo chiều đường biên.

Ramer-Douglas-Peucker: rút gọn hàng nghìn điểm về vài chục điểm

Đường biên vừa truy vết là một chuỗi bậc thang gồm toàn đoạn ngang và đoạn dọc dài đúng một điểm ảnh. Một hình tròn đường kính hai trăm điểm ảnh cho ra khoảng tám trăm đỉnh như vậy, viết thẳng ra tệp SVG thì vừa nặng vừa trông răng cưa. Ramer-Douglas-Peucker giải quyết việc này theo ý tưởng chia để trị. Nối điểm đầu với điểm cuối bằng một đoạn thẳng, tìm điểm nằm xa đoạn ấy nhất, nếu khoảng cách lớn hơn epsilon thì giữ điểm đó lại và chia bài toán thành hai nửa, lặp lại cho từng nửa. Nếu không điểm nào vượt epsilon thì cả đoạn giữa bị bỏ hết. Giá trị epsilon chính là thanh ngưỡng làm mượt trong giao diện. Ở mức 0, thuật toán vẫn có ích vì nó bỏ toàn bộ điểm nằm thẳng hàng, gộp một trăm đoạn ngang liên tiếp thành một đoạn duy nhất. Ở mức 1 tới 2, các bậc thang biến thành đường xiên trơn tru mà hình vẫn bám sát bản gốc. Trên 3 thì chi tiết nhỏ như dấu tiếng Việt hoặc nét mảnh của chữ bắt đầu bị nắn thẳng. Hai chi tiết cài đặt cần lưu ý. Thứ nhất, thuật toán được viết dạng lặp với ngăn xếp các đoạn thay cho đệ quy, cùng lý do chống tràn ngăn xếp như ở bước gắn nhãn. Thứ hai, RDP vốn dành cho đường mở, nên với đường khép kín ta cắt đôi tại điểm xa điểm đầu nhất rồi chạy cho từng nửa, tránh trường hợp cả đường bị rút gọn thành một đoạn vô nghĩa.

Khi nào vector hóa cho kết quả tốt và khi nào thất bại

Vector hóa hợp với logo, biểu tượng, chữ ký, con dấu, sơ đồ đường nét và mọi hình phẳng ít màu có ranh giới rõ ràng. Ở những hình này, mỗi mảng màu là một khối liền mạch nên bước gắn nhãn cho ra vài chục vùng, đường viền sau khi rút gọn chỉ còn vài chục điểm, và tệp SVG thu được thường nhẹ hơn ảnh gốc, phóng to bao nhiêu cũng sắc. Ngược lại, ảnh chụp là trường hợp vector hóa gần như luôn thất bại. Một tấm ảnh chụp không có ranh giới màu nào thật sự sắc: da người chuyển sắc liên tục, lá cây có hàng nghìn sắc xanh, bầu trời là một dải chuyển màu mượt. Ép nó về tám hoặc mười sáu màu sẽ tạo ra các dải màu loang lổ như tranh dán giấy, và tệ hơn là sinh ra hàng chục nghìn vùng nhỏ vụn vì nhiễu nén JPG, khiến tệp SVG phình lên vài megabyte trong khi vẫn xấu hơn ảnh gốc. Vài dấu hiệu cho biết bạn đang đi sai hướng: số vùng màu hiện ra vượt vài nghìn, dung lượng SVG lớn hơn ảnh gốc, hoặc kết quả trông như bản đồ địa hình. Khi gặp các dấu hiệu này, hãy giảm số màu và tăng mạnh ngưỡng bỏ chi tiết nhỏ, chấp nhận một kết quả cách điệu, hoặc đơn giản là dừng lại và giữ nguyên ảnh điểm. Với ảnh chụp, việc bạn thực sự cần thường là nén lại hoặc đổi sang WebP chứ không phải vector hóa.

Vì sao ảnh bị thu nhỏ về 512 px và cách bù lại khi cần bản lớn

Toàn bộ tính toán chạy trên luồng chính của trình duyệt, cùng luồng vẽ giao diện, nên nếu một lượt xử lý kéo dài quá vài giây thì trang sẽ đứng hình và người dùng nghĩ máy treo. Khối lượng công việc tỉ lệ với số điểm ảnh: gán màu cho từng điểm, lan tỏa nhãn qua từng điểm, và duyệt lưới cạnh cỡ bằng số điểm nhân bốn. Ở cạnh dài 512 px, tức tối đa khoảng hai trăm sáu mươi nghìn điểm ảnh, một ảnh nhiễu nặng mất chưa tới một giây. Nâng lên 2000 px thì số điểm tăng gần mười lăm lần và thời gian cũng vậy, chưa kể mảng đánh dấu cạnh phình lên hàng chục megabyte. Vì thế công cụ tự thu ảnh về đúng 512 px cạnh dài trước khi xử lý và ghi rõ kích thước gốc lẫn kích thước đã thu ngay dưới ô chọn tệp, để bạn không bất ngờ khi thấy tọa độ trong mã SVG nhỏ hơn ảnh mình đưa vào. Việc thu nhỏ này không làm mất độ nét của kết quả cuối theo cách bạn nghĩ, bởi đầu ra là vector: thuộc tính viewBox ghi hệ tọa độ 512, nhưng bạn hoàn toàn có thể sửa hai thuộc tính width và height thành bất kỳ con số nào, hoặc bỏ hẳn chúng và để CSS quyết định, hình vẫn được vẽ lại sắc nét ở kích thước mới. Cái thực sự mất là chi tiết nhỏ hơn một điểm ảnh ở mức 512, chẳng hạn nét chân của một phông chữ mảnh trong ảnh gốc 4000 px. Nếu bản gốc của bạn có những chi tiết đó và bắt buộc phải giữ, hãy cắt riêng phần cần thiết ra thành một ảnh nhỏ rồi vector hóa từng phần, sau đó ghép các đoạn path lại trong trình chỉnh sửa vector.

Ranh giới với tối ưu SVG, chỉnh sửa path và đổi định dạng ảnh

Bốn công cụ dễ bị nhầm với nhau nhưng làm bốn việc khác hẳn, và chọn sai là nguyên nhân phổ biến nhất khiến người dùng thất vọng. Trang này nhận đầu vào là ảnh điểm và cho ra đồ họa vector, đó là vector hóa, chiều khó nhất vì máy phải suy ra hình dạng từ một lưới ô màu rời rạc. Công cụ tối ưu SVG đi chiều ngược lại về mặt mục đích: đầu vào đã là vector sẵn, việc cần làm chỉ là bỏ thẻ thừa mà phần mềm đồ họa nhét vào, gộp lệnh trong thuộc tính d và cắt bớt chữ số thập phân, đầu ra vẫn là chính hình đó nhưng nhẹ hơn. Quy trình hợp lý là nối hai bước: vector hóa ở đây, tải tệp SVG về, rồi đưa sang công cụ tối ưu để nén thêm trước khi đẩy lên website. Công cụ chỉnh sửa đường path SVG lại là nơi bạn can thiệp tay vào từng điểm neo và từng đoạn cong, dùng khi kết quả tự động gần đúng nhưng còn vài chỗ cần nắn. Cuối cùng, công cụ đổi định dạng ảnh chuyển qua lại giữa PNG, JPG và WebP, tệp trước và sau đều là ảnh điểm, chỉ khác cách nén và cách lưu, phóng to vẫn vỡ như nhau. Nói ngắn gọn: cần tệp phóng to không vỡ từ một ảnh chụp màn hình logo thì dùng trang này, cần tệp SVG có sẵn nhẹ đi thì dùng trang tối ưu, cần sửa hình dạng thì dùng trình chỉnh sửa path, còn cần ảnh chụp nhẹ hơn cho web thì dùng trang đổi định dạng.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• image to svg
• vector hóa ảnh online
• chuyển png sang svg
• chuyển jpg sang svg
• chuyển ảnh sang vector
• công cụ vector hóa logo
• png to svg converter
• raster to vector online
• tạo file svg từ ảnh
• vector hóa logo từ ảnh chụp màn hình
• đồ họa vector là gì
• phóng to logo không bị vỡ
• lượng tử hóa màu k-means
• thuật toán ramer douglas peucker
• gắn nhãn liên thông connected component
• truy vết đường biên marching squares
• svg path fill-rule evenodd
• giảm số màu ảnh online
• tách nền logo thành vector
• chuyển chữ ký sang svg
• vector hóa ảnh miễn phí không cần cài đặt
• convert image to svg free