Tutorial

Chuyển ảnh sang vector online miễn phí: PNG, JPG sang SVG trong 1 phút

image - Chuyển ảnh sang vector online miễn phí: PNG, JPG sang SVG trong 1 phút

Cách chuyển ảnh sang vector online miễn phí bằng công cụ Chuyển ảnh sang vector của ColorME: đổi logo, icon, chữ viết tay PNG, JPG sang SVG với 3 kiểu Logo / icon, Minh hoạ, Đen trắng, chỉnh 2–32 màu, xem trước và tải SVG ngay, không cần đăng nhập. Kèm kết quả thật, cả trường hợp ảnh chụp và ảnh mờ.

Trả lời nhanh: để chuyển ảnh sang vector online, mở công cụ Chuyển ảnh sang vector của ColorME, bấm Tải ảnh lên (hoặc thả, dán ảnh PNG, JPG vào khung), chọn kiểu Logo / icon, Minh hoạ hoặc Đen trắng, chỉnh số màu trong Tuỳ chỉnh nếu cần, rồi bấm Tải SVG. Ở lần thử của chúng tôi, mỗi ảnh được vector hoá trong chưa tới 3 giây. Công cụ miễn phí, không cần đăng nhập, ảnh xử lý ngay trên trình duyệt. Kết quả đẹp nhất với logo, icon, chữ viết tay, hình vẽ nét; ảnh chụp sẽ thành tranh mảng màu và file nặng.

Ảnh động: tải logo PNG lên công cụ Chuyển ảnh sang vector, kéo thanh so sánh giữa ảnh gốc và SVG, bấm Tải SVG

Xem nhanh: tải logo PNG lên, kéo thanh giữa để so sánh, bấm Tải SVG. Ảnh động quay màn hình: ColorME.

Trước khi chuyển ảnh sang vector: cần biết gì?

  • Chi phí, tài khoản: theo trang công cụ, miễn phí, không cần đăng nhập, không giới hạn số lượt. Mọi file trong bài được làm khi chưa đăng nhập.
  • Ảnh vào: công cụ nhận file ảnh; chúng tôi đã thử PNG và JPG. Có 3 cách đưa ảnh vào: bấm Tải ảnh lên, kéo thả, hoặc dán ảnh đã sao chép bằng Ctrl/Cmd + V.
  • Kích thước: ảnh có cạnh dài hơn 900 px được thu nhỏ về 900 px trước khi dò nét (ảnh mèo 1920×2306 của chúng tôi thành 749×900). SVG xuất ra phóng to bao nhiêu cũng không vỡ, nhưng độ chi tiết chỉ bằng một ảnh 900 px.
  • File xuất ra: chỉ có SVG, tên dạng ten-anh-vector-colorme.svg. Công cụ không xuất AI, EPS hay PDF; mở SVG bằng Illustrator rồi lưu lại nếu bạn cần các định dạng đó.
  • Riêng tư: ảnh được xử lý ngay trên trình duyệt, không cần tải lên máy chủ để xử lý. Khi ảnh được chuyển xong, ColorME nhận một bản file SVG kết quả để theo dõi cách công cụ được dùng.
  • Thiết bị: chạy được trên trình duyệt điện thoại (ảnh chụp màn hình ở cuối bài, khổ 390 px).

Màn hình bắt đầu của công cụ Chuyển ảnh sang vector: nút Tải ảnh lên, khung thả ảnh, dòng hướng dẫn dán ảnh Ctrl/Cmd + V

Màn hình bắt đầu: bấm Tải ảnh lên, thả ảnh vào khung hoặc dán ảnh. Ảnh chụp màn hình: ColorME.

Cách chuyển ảnh PNG, JPG sang vector SVG: 6 bước

  1. Mở colorme.vn/tools/vectorize trên máy tính hoặc điện thoại.
  2. Đưa ảnh vào: bấm Tải ảnh lên, thả ảnh vào khung, hoặc dán ảnh (Ctrl/Cmd + V). Công cụ tự vector hoá ngay với kiểu Logo / icon, 6 màu. Dòng nhỏ phía trên cho biết số đường path và dung lượng SVG, ví dụ "741 đường path · 131.5 KB".
    Logo Tiệm bánh Mây vừa tải lên: bên trái ảnh gốc, bên phải bản Vector SVG, phía trên ghi 741 đường path, 131.5 KB
    Logo PNG 800 px sau khi tải lên: trái là ảnh gốc, phải là SVG.
  3. Chọn kiểu chuyển đổi: Logo / icon (mặc định 6 màu, độ chi tiết Vừa), Minh hoạ (16 màu, độ chi tiết Cao) hoặc Đen trắng (chỉ đen và trắng). Mỗi lần bấm, công cụ vẽ lại SVG ngay.
    Ảnh động: tranh phong cảnh phẳng được chuyển lần lượt bằng kiểu Minh hoạ, Đen trắng và Logo / icon
    Cùng một tranh phẳng qua 3 kiểu: Minh hoạ, Đen trắng, Logo / icon.
  4. Chỉnh trong Tuỳ chỉnh (nếu cần): Số màu từ 2 đến 32, Độ chi tiết 5 mức (Thấp, Hơi thấp, Vừa, Cao, Rất cao) và công tắc Làm mượt nét. Với logo, đặt số màu bằng số màu thật của logo cộng thêm màu nền.
    Ảnh động: mở Tuỳ chỉnh, giảm Số màu từ 6 xuống 3 làm mất màu vàng, rồi đặt lại 4 màu
    Giảm số màu: ở 3 màu, chữ "MÂY" và viền vàng biến thành trắng; 4 màu thì vừa khớp.
  5. So sánh trước, sau: kéo thanh tròn ở giữa khung sang trái, phải để xem ảnh gốc và SVG chồng lên nhau.
    Ảnh động: tranh khắc gỗ con tê giác chuyển sang kiểu Đen trắng, kéo thanh so sánh qua lại
    Kéo thanh so sánh trên tranh khắc gỗ ở kiểu Đen trắng.
  6. Tải SVG: bấm Tải SVG. File về máy ngay, không cần đăng nhập. Muốn chuyển ảnh tiếp, bấm Ảnh khác; công cụ giữ kiểu bạn vừa chọn.
    Con trỏ bấm nút Tải SVG trên thanh công cụ, cạnh các nút Logo / icon, Minh hoạ, Đen trắng, Tuỳ chỉnh, Ảnh khác
    Nút Tải SVG ở góc phải thanh công cụ. Ảnh chụp màn hình: ColorME.

Video quay màn hình (không tiếng, 40 giây): chuyển bộ icon sang SVG, thử Đen trắng, chỉnh số màu, tải SVG; rồi chuyển chữ viết tay bằng kiểu Đen trắng. Quay màn hình: ColorME.

Trước và sau: PNG phóng to vỡ hạt, SVG giữ viền sắc

Ảnh PNG, JPG là ảnh raster, ghép từ các điểm ảnh nên phóng to sẽ thấy răng cưa. SVG là đồ hoạ vector, lưu hình bằng đường và mảng màu nên in to cỡ nào viền vẫn sắc. Nhưng công cụ dò nét tự động không vẽ lại hoàn hảo như người: phóng thật gần sẽ thấy nét chữ hơi méo so với bản gốc.

So sánh phóng to 450%: bên trái chữ trong logo PNG bị răng cưa từng điểm ảnh, bên phải chữ trong SVG có viền sắc nhưng hình chữ hơi méo

Logo mẫu "Tiệm bánh Mây" do ColorME tự vẽ. SVG ở chế độ Logo / icon, 4 màu, tắt Làm mượt nét: 543 path, 81 KB.

Chữ viết tay Cảm ơn bạn chuyển sang SVG bằng kiểu Đen trắng, hàng dưới phóng to 400% chữ ơn: PNG mờ viền, SVG viền sắc nhưng đường cong hơi gãy góc

Chữ viết tay là loại ảnh hợp nhất: SVG chỉ 14 path, 9,7 KB. Phóng to sẽ thấy đường cong hơi gãy góc.

Chọn số màu và độ chi tiết thế nào?

Đây là phần quyết định file SVG đẹp hay xấu. Những gì chúng tôi đo được trên cùng một logo 800 px:

  • Ít màu quá thì mất màu: ở 3 màu, màu vàng của chữ "MÂY" và viền bị gộp thành trắng. Với bộ icon đen, cam, 3 màu còn gộp đen và cam thành nâu. Thấy mất màu, tăng số màu lên 1–2 nấc.
  • Nhiều màu quá thì nặng file: mặc định 6 màu cho 741 path, 131,5 KB; 4 màu chỉ 379 path, 77,5 KB và nhìn giống hệt bản gốc. Các màu thừa thường là màu trung gian ở mép, làm viền lởm chởm.
  • Logo sắc cạnh: thử tắt Làm mượt nét. Với logo của chúng tôi, 4 màu, Vừa, tắt Làm mượt nét cho chữ và viền sạch nhất (543 path, 81 KB).
  • Độ chi tiết Rất cao không làm đường cong mượt hơn: nó bám theo từng bậc điểm ảnh, nên viền chữ viết tay ra hình bậc thang và file nặng gấp 2,5 lần (24,5 KB so với 9,7 KB). Vừa hoặc Cao là đủ.
  • Đen trắng: khoá số màu ở 2. Hợp với chữ ký, chữ viết tay, tranh khắc, hình để cắt decal.

Cùng logo ở 3 màu (mất màu vàng, 453 path, 100 KB), 4 màu (đủ màu, 379 path, 77,5 KB) và 6 màu (741 path, 131,5 KB), kèm ô phóng to viền vòng tròn

3, 4 và 6 màu trên cùng logo. Ô vuông: phóng to viền vòng tròn, bản 6 màu có mép lởm chởm hơn.

Ảnh nguồn nhỏ, mờ thì sao?

Logo lưu lại từ Zalo hay Facebook thường chỉ rộng vài trăm pixel và bị nén. Công cụ dò đúng những gì nó thấy, nên SVG cũng méo theo. Chúng tôi thu logo về 200 px, nén JPG mạnh rồi đưa vào: chữ ra lởm chởm, màu vàng thành vàng xám.

Phóng to chữ Tiệm bánh: ảnh JPG 200 px bị mờ, SVG từ ảnh đó méo và lởm chởm, SVG từ PNG 800 px thì sạch

Cùng logo: ảnh 200 px nén mạnh cho SVG xấu; PNG 800 px cho SVG sạch.

Cách khắc phục: tìm file gốc lớn nhất có thể. Không có file gốc, thử phóng to ảnh bằng công cụ Tăng độ phân giải (miễn phí, xem cách làm nét ảnh online) rồi mới vector hoá; trang công cụ cũng gợi ý cách này. Logo có chữ thì cách chắc chắn nhất vẫn là gõ lại chữ bằng đúng font.

Ảnh chụp có chuyển sang vector được không?

Được, nhưng hãy hiểu đúng kết quả: ảnh chụp có hàng nghìn sắc độ chuyển mượt, vector hoá sẽ gom chúng thành các mảng màu phẳng. Ảnh nhìn như tranh posterize, file nặng hơn nhiều so với logo.

Ảnh động: ảnh chụp mèo chuyển sang kiểu Minh hoạ, kéo thanh so sánh thấy bản SVG thành các mảng màu

Ảnh mèo ở kiểu Minh hoạ: kéo thanh để thấy các mảng màu. Ảnh: AdinaVoicu, Wikimedia Commons, CC0.

Ảnh mèo gốc và 3 bản SVG: Logo / icon 6 màu 673 KB, Minh hoạ 16 màu 1,76 MB, Đen trắng 188 KB kiểu stencil

Cùng một ảnh chụp qua 3 kiểu. Bản 6 màu làm mắt xanh thành xám; 32 màu, độ chi tiết Rất cao lên tới 11.920 path, 3,27 MB.

Nếu cần dùng ảnh chụp, kiểu Đen trắng cho hiệu ứng stencil khá đẹp để in áo, cắt decal. Xoá nền trước bằng công cụ Xoá nền ảnh (xem cách xoá nền ảnh online) cũng giúp: vùng trong suốt được giữ trong suốt ở SVG. Theo thử nghiệm của chúng tôi, vùng nền đã xoá thành các path ẩn (độ mờ 0), nhìn như không có nền.

6 kết quả thật làm bằng công cụ

Logo, icon, tranh phẳng, chữ viết tay, tranh khắc và ảnh chụp, tất cả tải về từ công cụ, không chỉnh thêm.

6 file SVG làm bằng công cụ: logo 4 màu, bộ 6 icon, tranh phong cảnh phẳng 10 màu, chữ viết tay đen trắng, tranh khắc tê giác đen trắng, ảnh mèo kiểu stencil

Nguồn: logo, icon, tranh phẳng, chữ viết tay do ColorME tự vẽ; "Rhinoceros" (1515) của Albrecht Dürer, phạm vi công cộng; ảnh mèo của AdinaVoicu, CC0 (Wikimedia Commons).

Một điều nên biết: ở tranh phẳng, kiểu Minh hoạ mặc định (16 màu) lại làm gần như mất hai cụm cây thông nhỏ; đổi sang 10 màu thì cây hiện lại rõ. Nếu một chi tiết nhỏ biến mất, thử tăng hoặc giảm số màu vài nấc. Tranh khắc gỗ ra đẹp nhưng nặng (4.758 path, 1,68 MB); ở kiểu Logo / icon 6 màu, tranh này lên tới 6,11 MB.

Mẹo để có file SVG gọn, đẹp

  • Dùng ảnh nền trơn, nét rõ: logo, icon, hình minh hoạ phẳng, chữ viết bằng bút đậm trên giấy trắng. Chụp chữ ký thì chụp thẳng, đủ sáng, rồi dùng kiểu Đen trắng.
  • Nền trắng cũng thành hình: ở kiểu Logo / icon và Đen trắng, nền trắng của ảnh thành một mảng trắng trong SVG. Muốn nền trong suốt, xoá nền ảnh trước, hoặc mở SVG trong Illustrator, Figma rồi xoá mảng trắng đó.
  • Bắt đầu từ ít màu: đếm số màu thật của logo, cộng 1 cho nền, rồi tăng dần nếu thiếu.
  • File còn nặng: giảm số màu và độ chi tiết, hoặc chạy qua công cụ Tối ưu SVG.
  • Cần bộ file logo đủ định dạng: sau khi có SVG, công cụ Xuất bộ file logo giúp xuất trọn bộ file logo SVG, PNG, JPG.
  • Logo dùng lâu dài: SVG tự động là bản nháp tốt, nhưng logo in bảng hiệu, in khổ lớn nên được vẽ lại bằng Pen Tool cho đường cong chuẩn.

So với Image Trace trong Illustrator

Image Trace là tính năng dò nét có sẵn trong Adobe Illustrator, cùng nguyên lý với công cụ này. Khác nhau chính:

  • Công cụ online: miễn phí, không cần cài phần mềm hay đăng nhập; 3 kiểu, số màu, độ chi tiết, làm mượt; xuất SVG; ảnh xử lý tối đa 900 px. Hợp khi cần nhanh một file SVG từ logo, icon, chữ ký.
  • Image Trace: cần Illustrator (phần mềm trả phí); nhiều preset và tuỳ chọn hơn (đường dẫn, góc, nhiễu, bỏ qua nền trắng…), xử lý ảnh lớn, rồi Expand để sửa từng điểm neo và lưu AI, EPS, PDF, SVG ngay trong phần mềm.

Cách làm từng bước trong Illustrator có ở bài Chuyển ảnh thành vector trong Illustrator. Bạn cũng có thể kết hợp: tạo SVG bằng công cụ online, mở trong Illustrator để chỉnh tiếp. Muốn học Pen Tool, Image Trace và vẽ logo vector bài bản, xem khoá học Illustrator của ColorME.

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

Chuyển PNG sang SVG trên điện thoại được không?

Được. Chúng tôi mở công cụ trên trình duyệt khổ điện thoại (390 px): thanh công cụ xuống 2 hàng, khung so sánh vừa màn hình, không phải cuộn ngang.

Công cụ Chuyển ảnh sang vector trên điện thoại: nút Logo / icon, Minh hoạ, Đen trắng, Tuỳ chỉnh, Ảnh khác, Tải SVG và khung so sánh logo

Giao diện trên điện thoại, khổ 390 px. Ảnh chụp màn hình: ColorME.

Có xuất được file AI, EPS, PDF không?

Không, công cụ chỉ xuất SVG. Illustrator, Inkscape, CorelDRAW mở được SVG và lưu lại sang AI, EPS, PDF. Figma và trình duyệt web cũng mở được SVG.

File SVG có in được không?

Có. SVG phóng to cho bảng hiệu, áo thun, decal mà không vỡ hạt. Chỉ lưu ý chi tiết của SVG chỉ bằng ảnh 900 px mà công cụ dò, nên ảnh vào càng rõ càng tốt.

SVG là gì, khác PNG thế nào?

SVG lưu hình bằng toạ độ đường và màu, nên phóng to không vỡ và sửa được từng phần. PNG lưu từng điểm ảnh. Đọc kỹ hơn ở bài SVG là gì, tại sao nên dùng SVG.

Tổng kết

Tải ảnh lên, chọn Logo / icon, Minh hoạ hoặc Đen trắng, chỉnh số màu cho khớp ảnh gốc rồi bấm Tải SVG. Ảnh vào càng rõ, càng ít màu thì SVG càng gọn và đẹp; ảnh chụp chỉ nên dùng khi bạn muốn hiệu ứng mảng màu hoặc stencil. Miễn phí, không cần đăng nhập. Chuyển ảnh ngay với công cụ Chuyển ảnh sang vector của ColorME.

Lộ trình Graphic Designer Học Lộ trình Graphic Designer cùng ColorME 88 buổi · 20.300.000đ Xem khoá học