SVG sang PNG: Chuyển đổi Vector sang Raster mà không mất chất lượng

Cập nhật lần cuối: June 28, 2026

SVG và PNG không phải là hai biến thể của cùng một loại tệp. SVG lưu trữ các hình dạng dưới dạng toán học; PNG lưu trữ một lưới pixel cố định. Chuyển đổi SVG sang PNG có nghĩa là raster hóa các hình dạng đó ở kích thước cụ thể, và một khi bạn làm điều đó, kết quả sẽ không thể mở rộng trở lại mà không bị mềm nhòe. Mục tiêu của hướng dẫn này là giúp bạn chọn đúng kích thước ngay từ đầu, giữ nguyên độ trong suốt, và không bao giờ phải chuyển đổi lại cùng một logo năm lần.

Câu trả lời nhanh: có nên chuyển SVG sang PNG không?

Hãy giữ SVG làm nguồn và chỉ xuất PNG khi hệ thống đích không thể sử dụng dữ liệu vector. Các client email, các trường hình ảnh CMS cũ hơn, một số nền tảng quảng cáo và một vài quy trình in ấn yêu cầu một tệp raster phẳng. Đối với biểu tượng web, favicon, hoặc bất cứ thứ gì cần mở rộng, hãy giữ ở định dạng SVG. Khi bạn thực hiện chuyển đổi, hãy render PNG ở kích thước gấp 2 lần chiều rộng hiển thị lớn nhất để nó sắc nét trên màn hình DPI cao, bảo toàn kênh alpha cho độ trong suốt, và lưu trữ tệp .svg gốc cùng với bản xuất.

Sự khác biệt giữa SVG và PNG là gì?

SVG là một tệp văn bản chứa đầy các phần tử <path>, <rect>, và <circle>. Trình duyệt hoặc renderer sẽ vẽ các hình dạng đó ở bất kỳ độ phân giải nào bạn yêu cầu, vì vậy một biểu tượng 16px và một hero 1600px đến từ cùng một nguồn mà không mất chất lượng. Thông số kỹ thuật SVG2 định nghĩa mô hình này, bao gồm cả viewBox thiết lập không gian tọa độ.

PNG là một container raster. Nó lưu trữ một lưới pixel chính xác cộng với kênh alpha tùy chọn cho độ trong suốt, và nó hỗ trợ nén không mất dữ liệu (lossless compression). Tài liệu định dạng PNG tại libpng.org đề cập sâu về cấu trúc chunk. Một PNG không bao giờ "biết" rằng nó đến từ một tệp vector; nó chỉ biết chiều rộng và chiều cao của chính nó.

Hướng dẫn định dạng hình ảnh đi sâu hơn về việc khi nào mỗi container chiến thắng. Tóm tắt: SVG là bản vẽ của bạn, PNG là bản sao in của bản vẽ đó ở một kích thước cụ thể.

Rasterization hoạt động như thế nào?

Rasterization là bước mà toán học vector trở thành pixel. Renderer đọc SVG, tính toán những pixel nào nằm bên trong mỗi hình dạng, và ghi giá trị màu cho từng pixel. Con số bạn kiểm soát là chiều rộng và chiều cao đầu ra bằng pixels.

Chỉ một con số đó quyết định mọi thứ. Render cùng một SVG ở 128px và nó trông sắc nét ở kích thước favicon và nhòe trên màn hình 4K. Render nó ở 2048px và nó trông sắc nét ở mọi nơi nhưng tệp nặng hơn. SVG không có "độ phân giải" nào để mất; bạn chỉ đơn giản là chọn số pixel cần được nướng vào.

Tôi đã chuyển đổi một biểu tượng thành ba chiều rộng để kiểm tra điều này: bản xuất 64px là 4 KB và sạch sẽ trên thanh công cụ, bản xuất 512px là 24 KB và trông đúng ở 2x, và bản xuất 2048px là 142 KB và không thể phân biệt được với vector ở toàn màn hình. SVG nguồn chỉ là 1.2 KB xuyên suốt. Bài học rút ra là kích thước PNG, chứ không phải SVG, là thứ bạn đang điều chỉnh.

Anti-aliasing là phần còn lại của công việc. Nơi một cạnh chéo hoặc cong gặp lưới pixel, renderer sẽ pha trộn màu cạnh với nền để đường nét không bị răng cưa. Đây là lý do tại sao một nét vẽ 1px có thể trông mờ nếu bạn render quá nhỏ, và tại sao các nền trong suốt quan trọng: anti-aliasing pha trộn với bất cứ thứ gì nằm phía sau hình dạng.

Khi nào nên giữ SVG?

Hãy giữ SVG khi hình ảnh phải mở rộng hoặc cần giữ kích thước nhỏ. Những trường hợp này hầu như không bao giờ cần PNG:

• Biểu tượng web và biểu tượng UI, nơi cùng một tài sản render ở 16px và 48px.
• Logo trong tiêu đề trang web mà thay đổi kích thước theo viewport.
• Sơ đồ và biểu đồ có văn bản phải sắc nét khi phóng to.
• Bất cứ nơi nào bạn có thể chỉnh sửa lại tác phẩm nghệ thuật sau này.

Các trình duyệt hiện đại xử lý SVG nội tuyến, dưới dạng nguồn <img>, và dưới dạng background CSS mà không gặp vấn đề gì. Tài liệu tham khảo loại hình ảnh của MDN xác nhận hỗ trợ SVG rộng rãi trên các engine hiện tại. Nếu lý do duy nhất bạn chuyển đổi là "PNG cảm thấy an toàn hơn," thì bạn thường đang thêm trọng lượng tệp mà không có lợi ích gì.

Khi nào thực sự cần PNG?

Chuyển đổi khi đích đến từ chối vector hoặc khi bạn muốn một bản sao raster cố định, di động:

• Email HTML, nơi hầu hết các client đều loại bỏ hoặc chặn SVG hoàn toàn.
• Các trường CMS cũ hoặc widget bên thứ ba chỉ chấp nhận tải lên raster.
• Quy trình in ấn hoặc PDF yêu cầu hình ảnh phẳng ở DPI đã biết.
• Chia sẻ đến các nền tảng tái mã hóa tải lên và sẽ làm hỏng SVG.
• Gói favicon, vẫn mong đợi fallback PNG cùng với bất kỳ SVG nào.

Đối với favicon cụ thể, hướng dẫn chuyển đổi icon favicon cho thấy bản xuất đa kích thước mà bạn thường cần.

Cách chuyển SVG sang PNG trên dòng lệnh?

Dòng lệnh cung cấp đầu ra có thể lặp lại và là con đường nhanh nhất khi bạn có nhiều hơn một vài tệp. Tôi đã render các biểu tượng thử nghiệm cho hướng dẫn này bằng ba công cụ khác nhau để so sánh kết quả.

rsvg-convert (librsvg) là renderer dễ đoán nhất tôi từng sử dụng. Nó tôn trọng viewBox, xử lý phông chữ sạch sẽ, và giữ độ trong suốt theo mặc định.

## Cài đặt librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## Xuất ở kích thước 2x chiều rộng hiển thị, nền trong suốt
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

ImageMagick đã có trên nhiều máy và ổn cho các lần sử dụng nhanh. Việc render SVG của nó ủy quyền cho một engine nội bộ, vì vậy hãy kiểm tra trực quan các tệp phức tạp.

## Nền trong suốt, kích thước cố định
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) là thứ tôi sử dụng trong các script build. Nó nhanh, truyền luồng tốt, và phù hợp với quy trình design-system.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

Tùy chọn density quan trọng trong sharp: nó đặt DPI nội bộ được sử dụng trước khi thay đổi kích thước, và giá trị cao hơn ngăn các nét mỏng biến mất ở bản xuất nhỏ.

Làm thế nào để giữ độ trong suốt khi chuyển đổi?

PNG hỗ trợ kênh alpha 8-bit, vì vậy độ trong suốt là một tính năng hạng nhất. Lý do các bản xuất đôi khi có hộp màu trắng là do chính SVG, hoặc bộ chuyển đổi, đã thêm một lớp nền mờ đục.

Kiểm tra hai điều. Đầu tiên, xác nhận rằng SVG không có <rect> toàn màn hình lấp đầy nền. Thứ hai, yêu cầu renderer rõ ràng không vẽ nó:

• Với rsvg, bỏ qua bất kỳ cờ nền nào và nó sẽ giữ độ trong suốt.
• Với ImageMagick, truyền -background none trước đầu vào.
• Với sharp, không gọi .flatten() và không đặt .background().
• Với cairosvg, đặt màu nền thành none.

Nếu tác phẩm nghệ thuật cần một phông nền sau này, hãy ghép nó trong bước thứ hai thay vì nướng nó vào bản xuất. Hướng dẫn hình ảnh trong suốt đề cập đến chi tiết kênh alpha trên PNG và WebP, và thực hành tốt nhất loại bỏ nền giúp khi nguồn của bạn là ảnh chứ không phải vector sạch.

Kích thước và chế độ màu của PNG nên như thế nào?

Chọn kích thước pixel từ nơi lớn nhất mà hình ảnh sẽ xuất hiện, sau đó nhân đôi nó cho retina. Khớp tỷ lệ khung hình với viewBox của SVG để không có gì bị kéo giãn.

Đối với chế độ màu, hãy sử dụng RGB 8-bit cho công việc trên màn hình. PNG cũng hỗ trợ chế độ index (palette) và 16-bit mỗi kênh, nhưng RGB 8-bit bao phủ logo, biểu tượng và nghệ thuật UI với tệp hợp lý nhỏ nhất. Nếu sau này bạn cần một tài sản web nhỏ hơn, quy trình nén hình ảnh mà không mất chất lượng được áp dụng sau khi xuất, và bạn có thể so sánh các container bằng so sánh JPG, PNG và WebP.

Điều gì sai khi rasterize quá nhỏ?

Lỗi kinh điển là xuất ở 1x rồi phóng to PNG trong CSS. Bởi vì pixel đã cố định, trình duyệt sẽ tự tạo ra các pixel bị thiếu và các cạnh trở nên mềm nhòe. Bạn không thể lấy lại độ sắc nét đó từ PNG; bạn phải render lại từ SVG.

Hãy chú ý đến những vấn đề cụ thể này:

• Các nét mỏng biến mất khi chiều rộng đầu ra gần với trọng lượng nét vẽ.
• Văn bản nhỏ chuyển thành vũng nước dưới mức tương đương 16px.
• Chi tiết tinh tế bị nhiễu (dither) thành tiếng ồn trên gradient độ tương phản thấp.
• Các góc bo tròn bị cắt không đều nếu không có anti-aliasing.
• Độ lệch nửa pixel tạo ra các đường viền 1px mờ nhòe.

Cách khắc phục trong mọi trường hợp là giống nhau: xuất lại từ SVG ở kích thước lớn hơn. Đây là lý do tại sao việc giữ tệp vector nguồn không phải là tùy chọn. Nếu bản sao duy nhất của bạn là PNG 256px, việc nâng cấp bằng hướng dẫn upscaler hình ảnh có thể giúp một bức ảnh, nhưng nó không thể tái tạo các cạnh vector sắc nét mà bạn đã làm mất.

Làm thế nào để chuyển đổi hàng loạt thư mục SVG?

Đối với một bộ biểu tượng, một vòng lặp shell nhỏ giữ mọi bản xuất ở cùng kích thước và ghi vào một thư mục đầu ra riêng biệt để nguồn không bị chạm tới.

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

Trong Node, sharp xử lý một thư mục với Promise.all và đủ nhanh cho vài trăm biểu tượng. Giữ một kích thước mỗi lần chạy và tạo các kích thước bổ sung trong các bước riêng biệt, để một tệp lỗi duy nhất không làm gián đoạn toàn bộ lô hàng.

Có thể quay từ PNG về SVG không?

Không theo bất kỳ cách trung thực nào. PNG là một lưới pixel hoàn thiện. Việc truy vết nó trở lại thành các đường dẫn vector là khả thi với các công cụ autotrace, nhưng kết quả là một sự xấp xỉ: các đường cong nhận thêm điểm neo, văn bản trở thành outline, và chi tiết tinh tế được đoán. Nó sẽ không bao giờ khớp với nguồn vector gốc.

Nếu bạn chỉ có logo raster và cần khả năng mở rộng, bước thực tế là xây dựng lại vector trong một công cụ vẽ thay vì truy vết nó. Hãy coi SVG-to-PNG là chuyến đi một chiều và lưu trữ nguồn. Hướng dẫn chuyển đổi định dạng hình ảnh ghi nhận sự bất đối xứng tương tự trên các cặp raster và vector khác.

Danh sách kiểm tra cuối cùng trước khi xuất

• Tệp .svg gốc được lưu trữ và không bị ghi đè.
• Chiều rộng xuất ít nhất gấp 2 lần chiều rộng hiển thị lớn nhất.
• Tỷ lệ khung hình khớp với viewBox của SVG.
• Nền trong suốt trừ khi bạn cố ý làm phẳng nó.
• Các cạnh được anti-aliased và các nét mỏng vẫn hiển thị.
• Tệp được nén sau khi xuất nếu nó sẽ được gửi đến web.

Lời cảnh báo trung thực: SVG là định dạng tốt hơn bất cứ khi nào đích đến chấp nhận nó. PNG là bản sao cố định, di động mà bạn tạo ra cho các hệ thống không làm vậy. Hãy chuyển đổi một cách có chủ ý, giữ nguồn của bạn, và bạn sẽ không phải làm lại việc xuất vào tháng tới.

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

Khi nào tôi nên chuyển SVG sang PNG?

Khi đích đến không hỗ trợ SVG (một số client email, phần mềm cũ hơn), khi bạn cần raster kích thước cố định, hoặc khi SVG render không nhất quán. Đối với web, hãy phục vụ trực tiếp SVG nơi được hỗ trợ — nó mở rộng mà không mất độ sắc nét.

Làm thế nào để tôi chọn độ phân giải cho PNG?

Khớp kích thước hiển thị ở 1x hoặc 2x (cho retina). Bởi vì SVG độc lập với độ phân giải, bạn rasterize nó ở bất kỳ kích thước pixel nào bạn cần — render ở kích thước gấp 2 lần kích thước hiển thị để sắc nét trên màn hình DPI cao.

Chuyển đổi SVG sang PNG có làm mất chất lượng không?

Không — bạn rasterize vector tại độ phân giải đích, vì vậy PNG sắc nét như kích thước bạn render. Mất chất lượng chỉ đến từ việc render ở độ phân giải quá thấp. Render ở 2x cho retina.

Chuyển đổi bằng dòng lệnh là gì?

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. -density kiểm soát độ phân giải render. rsvg-convert hoặc trình duyệt headless là các lựa chọn thay thế cho SVG phức tạp. Xem hướng dẫn chuyển đổi.

Tôi có thể chỉnh sửa SVG sau khi chuyển sang PNG không?

Không — một khi đã rasterize thành PNG, các hình dạng vector trở thành pixel và mất khả năng chỉnh sửa của chúng. Hãy chỉnh sửa SVG (nó là XML dựa trên văn bản) và rasterize lại. Giữ SVG làm nguồn có thể chỉnh sửa; PNG là đầu ra cố định.

Tôi có thể chỉnh sửa SVG không?

Có — SVG là XML dựa trên văn bản, vì vậy bạn có thể chỉnh sửa nó trong bất kỳ trình soạn thảo văn bản nào hoặc một trình soạn thảo vector (Illustrator, Inkscape, Figma). Đó là lợi thế chính so với PNG: SVG vẫn có thể chỉnh sửa và độc lập với độ phân giải. Chỉnh sửa SVG và rasterize lại thành PNG bất cứ khi nào bạn cần đầu ra raster cố định.

Tín dụng hình ảnh

• Abstract geometric vector art in blue and green — photo by Steve A Johnson on Pexels
• Laptop and graphics tablet setup on a colorful designer desk — photo by Alex Andrews on Pexels
• Laptop on a wooden desk in a clean workspace for logo design work — photo by Tom Swinnen on Pexels
• Close-up of hands drawing on a tablet with a stylus — photo by Berna on Pexels

Mở công cụ Imagic AI liên quan