Chuyển SVG sang PNG

Về Chuyển Đổi SVG sang PNG

Chuyển đổi SVG sang PNG biến đổi một mô tả vector không phụ thuộc độ phân giải thành ảnh raster với độ phân giải cố định. SVG dùng XML để lưu các đối tượng hình học cơ bản — đường, hình tròn, gradient, văn bản — co giãn sắc nét ở mọi kích thước; PNG lưu lưới pixel có hạn. Quá trình chuyển đổi gọi là rasterization: trình duyệt phân tích markup SVG, thực thi CSS nhúng và tra cứu font, tính toán hình học theo kích thước đầu ra bạn chọn, rồi ghi dữ liệu pixel vào container PNG, JPEG hoặc WebP. Công cụ này chạy toàn bộ pipeline cục bộ qua Canvas API, hỗ trợ nền trong suốt, kích thước tùy chỉnh đến 4096 pixel và thanh trượt chất lượng cho đầu ra có tổn hao. Xem thêm PNG sang SVG và WebP sang PNG/JPG.

Tại sao phải chuyển SVG sang PNG — SVG không tốt hơn sao?

SVG vượt trội hơn PNG ở mọi nơi nó được hỗ trợ: co giãn vô hạn, file thường nhỏ hơn cho biểu tượng và logo, có thể animate đường dẫn bằng CSS, và trình đọc màn hình có thể lấy văn bản từ nó để hỗ trợ tiếp cận. Nhưng SVG bị giới hạn ở nhiều nơi thực tế. Các client email (Outlook, Gmail ở chế độ tối, Apple Mail di động) thường loại bỏ tệp đính kèm SVG hoặc chặn SVG nội tuyến hoàn toàn. WebView Android cũ, ứng dụng đọc Kindle, clipboard Word/PowerPoint, tải lên mạng xã hội (Twitter/X, Instagram, LinkedIn), driver máy in, và công cụ thiết kế sản phẩm như Etsy hay Printful đều yêu cầu đầu vào raster. Hãy chuyển sang PNG bất cứ khi nào bạn bước vào những môi trường đó — giữ SVG gốc cho mọi thứ hỗ trợ nó.

PNG xử lý độ trong suốt khác JPEG và WebP thế nào?

PNG-24 hỗ trợ kênh alpha 8-bit, cho phép 256 mức trong suốt mỗi pixel — hoàn hảo cho logo, biểu tượng và phần tử UI cần hòa trộn trên nền tùy ý. JPEG hoàn toàn không hỗ trợ trong suốt; mọi pixel trong suốt của SVG sẽ trở thành màu nền bạn chỉ định, thường là trắng. WebP hỗ trợ cùng alpha 8-bit như PNG nhưng kích thước file thường nhỏ hơn 25-50% nhờ thuật toán nén mới hơn. Để có raster trong suốt nhỏ nhất, chọn WebP nếu người xem dùng trình duyệt hiện đại (Chrome 32+, Safari 16+, Firefox 65+); để tương thích tối đa (bao gồm client email cũ và phần mềm thiết kế), chọn PNG. Đừng dùng JPEG cho đồ họa có vùng trong suốt trừ khi bạn cụ thể muốn nền có màu.

Tôi nên xuất SVG ở độ phân giải nào?

Khớp với màn hình mục tiêu lớn nhất của bạn. Cho hero web trên màn hình Retina/HiDPI, render ở 2x hoặc 3x kích thước CSS pixel: hero 600px cần PNG 1800px để vẫn sắc nét trên iPhone 3x. Cho biểu tượng app, tuân theo hướng dẫn nền tảng: iOS yêu cầu master 1024px, Android 512px, favicon thường đa kích thước 16/32/48/180/192/512px. Cho in ấn, nhân inch với 300 DPI: logo 4 inch in ở 300 DPI cần PNG 1200px. Cho emoji Slack và sticker Discord, PNG 256px là giới hạn. Khi không chắc, chọn kích thước lớn hơn — giảm kích thước rẻ, nhưng phóng to PNG quá nhỏ tạo ra mờ mà không phần mềm nào sửa được.

Tại sao SVG có font nhúng lại render sai chữ sau khi chuyển đổi?

SVG tham chiếu font bằng tên họ (font-family="Helvetica") thay vì nhúng dữ liệu font. Trong quá trình rasterization, trình duyệt tra cứu Helvetica trên hệ thống của bạn; nếu thiếu, trình duyệt thay thế bằng font dự phòng (thường là Times hoặc DejaVu Sans), và PNG đã render sẽ giữ font sai. Cách sửa theo độ tin cậy: (1) chuyển văn bản thành đường dẫn trong trình soạn thảo SVG trước khi xuất từ Illustrator hoặc Inkscape — mọi ký tự trở thành hình học vector độc lập với font cài đặt; (2) nhúng font bằng @font-face bên trong SVG; (3) đảm bảo cùng font được cài đặt trên hệ thống thực hiện chuyển đổi. Chuyển sang đường dẫn là tiêu chuẩn vàng cho phân phối vì PNG sẽ trông giống nhau trên mọi thiết bị.

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

Cho chuyển đổi từng cái một, công cụ trình duyệt này đủ nhanh — mỗi lần render dưới một giây. Cho hàng trăm hoặc hàng nghìn SVG (thư viện biểu tượng, token hệ thống thiết kế), dùng cách tiếp cận dòng lệnh: Inkscape cung cấp 'inkscape --export-type=png --export-width=512 icon.svg' có thể script trong vòng lặp for Bash; ImageMagick 'magick icon.svg icon.png' đơn giản hơn nhưng renderer SVG yếu hơn với tài liệu phức tạp. Cho pipeline Node.js, thư viện 'sharp' là tiêu chuẩn sản xuất — dùng librsvg bên dưới và nhanh hơn đáng kể so với Chrome không đầu. Các hệ thống thiết kế hiện đại dùng plugin Storybook hoặc Style Dictionary để tái tạo dự phòng raster mỗi lần build.

Tại sao PNG xuất ra có cạnh răng cưa hoặc đường cong bị pixel hóa?

Hiện tượng aliasing xảy ra khi bạn render ở độ phân giải quá thấp — đường dẫn toán học của đường cong bị lượng tử hóa vào lưới pixel thô, tạo ra hiệu ứng bậc thang. Giải pháp: (1) xuất ở 2x hoặc 3x kích thước hiển thị mục tiêu để cho trình duyệt nhiều pixel hơn để chống răng cưa; (2) đảm bảo SVG của bạn có 'shape-rendering="geometricPrecision"' hoặc dựa vào mặc định 'auto' thay vì 'crispEdges' vốn cố tình tắt chống răng cưa; (3) kiểm tra không có stroke nào được đặt ở 1px trên ranh giới pixel không nguyên, gây ra render nửa pixel và mờ thị giác. Cho đầu ra hoàn hảo từng pixel, snap hình học SVG vào tọa độ nguyên trong công cụ thiết kế trước khi xuất.