Chuyển đổi SVG sang PNG

Chuyển đổi SVG sang PNG là gì?

SVG (Scalable Vector Graphics) và PNG (Portable Network Graphics) là hai định dạng hình ảnh hoàn toàn khác nhau về bản chất. SVG là định dạng vector — lưu trữ hình ảnh dưới dạng mô tả toán học (đường, hình, màu sắc), cho phép phóng to vô hạn mà không bị vỡ ảnh. PNG là định dạng raster — lưu trữ từng điểm ảnh (pixel) trong một lưới cố định.

Việc chuyển đổi SVG sang PNG là quá trình rasterization — chuyển mô tả vector thành lưới pixel cố định với kích thước xác định. Đây là thao tác thiết yếu trong quy trình làm việc với đồ họa số, đặc biệt khi cần xuất icon ứng dụng, ảnh cho email, hoặc tài nguyên cho các nền tảng không hỗ trợ SVG.

Với công cụ này, toàn bộ quá trình chuyển đổi xảy ra trực tiếp trên trình duyệt của bạn thông qua Canvas API của HTML5. File SVG không bao giờ được gửi lên bất kỳ máy chủ nào — đảm bảo quyền riêng tư tuyệt đối, đặc biệt quan trọng với logo và tài sản thương hiệu nhạy cảm.

Đồ họa vector vs raster

Hiểu sự khác biệt giữa vector và raster là nền tảng để dùng đúng công cụ:

• Vector (SVG, AI, EPS): Mô tả hình học — đường cong Bézier, hình dạng, màu sắc. Kích thước file rất nhỏ (thường dưới 10KB cho icon). Phóng to đến bất kỳ kích thước nào mà không bị vỡ. Không thể biểu diễn ảnh chụp phức tạp (quá nhiều điểm ảnh để mô tả bằng vector).
• Raster (PNG, JPG, WebP): Lưới pixel cố định — mỗi pixel có màu sắc riêng. Phù hợp cho ảnh chụp, đồ họa phức tạp. Phóng to sẽ bị vỡ (pixelate). Kích thước file tỉ lệ với số pixel.

Khi nào chuyển SVG sang PNG? Khi nền tảng đích không hỗ trợ SVG (một số email client, app store, các ứng dụng legacy), khi cần ảnh với kích thước pixel chính xác (avatar, favicon, icon set), hoặc khi muốn tối ưu hóa thời gian render — PNG render nhanh hơn SVG phức tạp.

Hiểu về tỷ lệ ảnh cho Retina

Màn hình Retina (Apple) và HiDPI (các nhà sản xuất khác) có mật độ pixel cao hơn — thường gấp đôi (2x) hoặc gấp ba (3x) so với màn hình thường. Để hình ảnh hiển thị sắc nét trên những màn hình này, bạn cần cung cấp tài nguyên ở độ phân giải tương ứng.

Quy tắc thực tế:

• 1x: Kích thước CSS — ví dụ icon 24px trên web thông thường. File nhỏ nhất.
• 2x: Retina display — icon 24px CSS cần ảnh 48×48px. Tiêu chuẩn cho hầu hết web hiện đại.
• 3x: iPhone Pro, một số Android cao cấp. Yêu cầu bởi iOS App Store cho icon @3x.
• 4x: In ấn (300 DPI), màn hình 4K, banner kỹ thuật số lớn.

Trong phát triển web, dùng thẻ <img srcset="icon@2x.png 2x, icon@1x.png 1x"> để trình duyệt tự chọn độ phân giải phù hợp. Khi dùng CSS background: background-image: -webkit-image-set(url(icon@2x.png) 2x, url(icon.png) 1x).

SVG sang PNG cho phát triển ứng dụng

Trong phát triển ứng dụng di động, bạn cần nhiều phiên bản icon ở các mật độ pixel khác nhau:

• iOS: @1x (44px), @2x (88px), @3x (132px) cho UI icons. App Store icon: 1024×1024px (xuất @1x từ SVG 1024px).
• Android: mdpi (1x), hdpi (1.5x), xhdpi (2x), xxhdpi (3x), xxxhdpi (4x). Adaptive icons yêu cầu foreground và background layer riêng biệt.
• React Native: Dùng @2x và @3x suffix: icon@2x.png, icon@3x.png.
• Flutter: Thư mục assets/images/1.0x/, 2.0x/, 3.0x/.

Với công cụ này, workflow đơn giản: thiết kế icon ở SVG gốc, sau đó xuất 4 lần với tỷ lệ 1x/2x/3x/4x để có đầy đủ tài sản cho cả iOS và Android trong vài phút.

Vấn đề thường gặp khi chuyển SVG

• SVG không có viewBox: Công cụ sẽ cố gắng đọc thuộc tính width/height. Nếu không có, mặc định 300×300px. Thêm viewBox="0 0 W H" vào SVG để kiểm soát kích thước xuất.
• Font chữ trong SVG: Nếu SVG sử dụng font chữ không được nhúng, text có thể render sai trên trình duyệt khác. Chuyển text thành path (Object to Path trong Inkscape/Illustrator) trước khi xuất.
• External resources: SVG tham chiếu ảnh bên ngoài hoặc filter phức tạp có thể không render đúng. Nhúng tất cả tài nguyên vào file SVG (inline).
• Nền trong suốt vs trắng: PNG hỗ trợ transparency. Nếu đích dùng (email, PowerPoint, app cũ) không xử lý tốt transparency, chọn nền trắng khi xuất.
• SVG animation: Canvas API chỉ capture frame tại thời điểm render, không xuất animation. Dùng công cụ chuyên dụng nếu cần xuất animation thành GIF/video.
• CORS restrictions: SVG tham chiếu ảnh từ domain khác có thể bị chặn bởi CORS policy. Đảm bảo tất cả ảnh trong SVG là inline base64 hoặc từ cùng domain.

Xem thêm công cụ liên quan: Chuyển PNG sang JPG, Nén ảnh, và Thay đổi kích thước ảnh.