Bộ chuyển đổi SVG sang PNG: Chuyển đồ họa vector thành bitmap ở mọi kích thước

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

SVG và PNG là hai loại hình ảnh cơ bản khác nhau. SVG là định dạng vector — nó lưu trữ các hình dạng dưới dạng toán học, vì vậy nó có thể mở rộng sang bất kỳ kích thước nào mà không bị mất độ sắc nét. PNG là định dạng raster — nó lưu trữ một lưới pixel cố định, do đó nó có một độ phân giải gốc và sẽ bị nhòe khi phóng to. Chuyển đổi SVG sang PNG nghĩa là bạn phải chọn kích thước pixel, bởi vì một khi đã được raster hóa, khả năng mở rộng sẽ biến mất. Hướng dẫn này bao gồm cách chọn độ phân giải phù hợp, khi nào thực sự cần chuyển đổi, và cách xuất các tệp PNG sắc nét từ SVG.

Câu trả lời nhanh: làm thế nào để chuyển đổi SVG sang PNG?

Mở SVG trong một công cụ chuyển đổi hoặc thiết kế, đặt kích thước pixel mục tiêu (có tính đến retina nếu cần — xuất ở kích thước gấp 2 lần màn hình), và xuất dưới dạng PNG. Chọn kích thước đủ lớn cho mọi nơi mà PNG sẽ được sử dụng, bởi vì bạn không thể phóng to một PNG sau này mà không làm giảm chất lượng. Sử dụng SVG to PNG converter để xuất nhanh các tệp đơn lẻ, hoặc một công cụ thiết kế cho khối lượng công việc lớn. Hãy giữ lại SVG gốc, bởi vì nó vẫn là nguồn có thể mở rộng nếu bạn cần kích thước khác.

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

Sự phân biệt vector so với raster giải thích mọi thứ về lý do và thời điểm nên chuyển đổi.

• SVG giữ độ sắc nét ở bất kỳ độ phân giải nào — một logo vẫn rõ nét ở 16px và 1600px từ cùng một tệp.
• PNG bị giới hạn bởi kích thước pixel của nó — nếu bạn xuất quá nhỏ, nó không thể được phóng to một cách sạch sẽ.
• SVG không thể đại diện cho ảnh chụp; PNG có thể, đó là lý do tại sao ảnh chụp không bao giờ là SVG.

Khi nào nên chuyển đổi SVG sang PNG?

SVG là định dạng tốt hơn khi môi trường hỗ trợ nó, vì vậy việc chuyển đổi chỉ là phương án dự phòng trong các trường hợp mà SVG không hoạt động. Chỉ chuyển đổi khi bạn buộc phải làm, nếu không hãy giữ lại SVG.

• Môi trường không hỗ trợ — một số ứng dụng email và công cụ cũ hơn không hiển thị SVG.
• Yêu cầu raster nhúng — một hệ thống chỉ chấp nhận PNG hoặc JPG.
• Nội dung ảnh chụp hỗn hợp — mặc dù trong trường hợp đó nguồn gốc không nên là SVG.
• Bộ nhớ đệm và hiệu suất — một tệp PNG được render trước có thể phục vụ nhanh hơn việc phân tích cú pháp SVG ở mỗi lần tải.

Đối với các trang web, SVG thường được ưu tiên vì nó giữ độ sắc nét trên màn hình retina và tải xuống nhỏ. Hướng dẫn hiển thị retina giải thích tại sao đồ họa vector loại bỏ hoàn toàn vấn đề về độ phân giải đối với logo và biểu tượng.

Làm thế nào để chọn độ phân giải phù hợp?

Quyết định về độ phân giải là vĩnh viễn, vì vậy nó rất quan trọng. Xuất PNG ở kích thước lớn nhất mà nó sẽ được hiển thị, nhân với tỷ lệ pixel thiết bị để có độ sắc nét retina.

• Nếu PNG sẽ được sử dụng ở nhiều kích thước, hãy xuất ở kích thước lớn nhất và để CSS thu nhỏ nó.
• Để có độ sắc nét retina, hãy xuất ở 2x (hoặc 3x cho điện thoại) kích thước hiển thị.
• Xuất quá nhỏ là lỗi phổ biến và không thể khắc phục được.

Phép tính rất đơn giản: xác định chiều rộng hiển thị lớn nhất, nhân nó lên hai lần cho retina, và xuất ở chiều rộng pixel đó. Hướng dẫn hiển thị retina đề cập chi tiết về quy trình 2x và 3x.

Làm thế nào để chuyển đổi SVG sang PNG?

Có nhiều phương pháp hoạt động, tùy thuộc vào khối lượng và nhu cầu kiểm soát.

1. Công cụ trực tuyến — tải lên SVG, đặt kích thước, tải xuống PNG. Nhanh cho các trường hợp đơn lẻ.
2. Công cụ thiết kế (Figma, Illustrator, Inkscape) — mở SVG, xuất ở kích thước đã chọn. Kiểm soát tốt nhất.
3. Dòng lệnh (rsvg-convert, ImageMagick) — có thể viết kịch bản để xử lý hàng loạt.
4. Trình duyệt — mở SVG, chụp màn hình ở kích thước mục tiêu.

Đối với công việc hàng loạt, dòng lệnh chiến thắng vì nó áp dụng các cài đặt giống hệt nhau cho mọi tệp. Đối với một logo quan trọng đơn lẻ, công cụ thiết kế mang lại khả năng kiểm soát tối đa đối với các tùy chọn xuất.

Chuyển đổi hàng loạt cho bộ biểu tượng (icon sets)

Việc chuyển đổi một thư mục các biểu tượng SVG sang PNG là phổ biến khi phát hành ứng dụng hoặc hệ thống thiết kế — bạn cần mọi biểu tượng ở nhiều kích thước, và việc làm thủ công không thể mở rộng được. Phương pháp xử lý hàng loạt áp dụng cùng các cài đặt xuất cho mọi tệp trong bộ.

1. Sắp xếp các SVG vào một thư mục, với tên gọi nhất quán.
2. Xác định các kích thước xuất (ví dụ: 16, 32, 64 cho một bộ biểu tượng).
3. Chạy một rasterizer hàng loạt để xuất từng SVG ở mỗi kích thước.
4. Kiểm tra vài đầu ra về độ sắc nét và tính trong suốt.

Lợi thế của việc rasterize hàng loạt là tính nhất quán — mọi biểu tượng đều được xuất với các cài đặt chính xác giống nhau, vì vậy bộ trông đồng nhất. Hướng dẫn xử lý hàng loạt đề cập đến quy trình làm việc rộng hơn để áp dụng các thao tác trên các thư mục hình ảnh, và một khi đã rasterize, các tệp PNG có thể được nén cùng nhau để giảm thiểu kích thước phục vụ của chúng.

Các lỗi chuyển đổi phổ biến

• Xuất quá nhỏ — PNG không thể được phóng to sau này. Hãy xuất ở 2x kích thước hiển thị.
• Mất SVG gốc — luôn giữ nó; đó là nguồn có thể mở rộng cho các kích thước trong tương lai.
• Chuyển đổi khi SVG hoạt động tốt — nhiều môi trường hiện đại hỗ trợ SVG trực tiếp.
• Quên tính trong suốt — PNG hỗ trợ alpha; hãy đảm bảo rằng việc xuất vẫn giữ được nó nếu cần.
• Trộn vector và raster — nếu nguồn có ảnh nhúng, kết quả là một loại lai mất đi lợi thế của SVG.

Khi nào nên giữ lại SVG thay vì chuyển đổi

Mặc định mạnh nhất là giữ SVG và chỉ chuyển đổi khi bị buộc phải làm. SVG phục vụ một tệp duy nhất sắc nét trên mọi màn hình, tải xuống nhỏ, và vẫn có thể chỉnh sửa được. PNG hợp lý khi môi trường từ chối SVG, khi bạn cần raster cố định cho yêu cầu hệ thống, hoặc khi hiệu suất đòi hỏi một tệp đã render trước mà trình duyệt có thể lưu vào bộ nhớ đệm mà không cần phân tích cú pháp.

Việc chuyển đổi vì sự tiện lợi hơn là nhu cầu chỉ làm mất đi khả năng mở rộng vốn đã khiến SVG trở thành lựa chọn phù hợp ngay từ đầu. Đối với các thông số kỹ thuật, tiêu chuẩn SVG của W3C xác định những gì SVG có thể biểu đạt, và thông số kỹ thuật PNG tài liệu hóa định dạng raster mà nó chuyển đổi tới. Hãy khớp định dạng với ràng buộc — và khi không có ràng buộc nào buộc phải là PNG, hãy để SVG làm nhiệm vụ của nó.

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

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

SVG là định dạng vector (hình dạng được mô tả bằng toán học, độc lập độ phân giải); PNG là raster (một lưới pixel). SVG mở rộng mà không mất độ sắc nét; PNG cố định ở kích thước pixel của nó. Hãy chuyển đổi SVG sang PNG khi bạn cần một hình ảnh raster cố định.

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

Khi mục tiêu không hỗ trợ SVG (một số ứng dụng email, phần mềm cũ hơn), khi bạn cần raster có kích thước cố định, hoặc khi SVG có các hiệu ứng phức tạp được 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ợ.

Làm thế nào để tôi chọn độ phân giải phù hợp?

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

Tôi có thể chuyển đổi hàng loạt SVG sang PNG không?

Có — ImageMagick (magick mogrify), rsvg-convert, hoặc một trình duyệt headless xử lý các thư mục SVG. Đối với bộ biểu tượng, một kịch bản sẽ render mọi SVG ở mọi kích thước bạn cần trong một lần chạy. Xem SVG to PNG guide.

SVG có hỗ trợ tính trong suốt không?

Có — SVG là vector và hỗ trợ tính trong suốt gốc, vì vậy một SVG với các khu vực trong suốt sẽ rasterize thành PNG trong suốt. Đây là một lý do khiến SVG phù hợp cho logo và biểu tượng. JPEG sẽ không bảo toàn tính trong suốt.

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

Không — bạn rasterize vector ở bất kỳ độ phân giải nào bạn chọn, vì vậy PNG sắc nét như kích thước bạn render. Mất chất lượng chỉ xảy ra khi render ở độ phân giải quá thấp. Hãy render ở 2x kích thước hiển thị để có độ sắc nét trên màn hình retina, và PNG sẽ không thể phân biệt được với raster gốc ở kích thước đó.

Tôi có thể chuyển đổi SVG sang PNG ở bất kỳ kích thước nào không?

Có — bởi vì SVG là vector và độc lập độ phân giải, bạn rasterize nó ở bất kỳ kích thước pixel nào bạn cần, từ biểu tượng 16px đến banner 4000px, mà không mất chất lượng. Đó là lợi thế chính so với các định dạng raster. Hãy render ở 2x kích thước hiển thị để có độ sắc nét trên màn hình retina. Bản thân SVG không bao giờ mất độ sắc nét; chỉ PNG được rasterize mới cố định ở kích thước xuất của nó.