tooly

Chuyển SVG sang PNG online

Kết xuất biểu tượng và hình minh họa SVG thành ảnh PNG sắc nét ở đúng chiều rộng bạn cần. Độ trong suốt được giữ nguyên và không có gì được tải lên.

Tệp của bạn không bao giờ rời khỏi trình duyệt

Cách sử dụng

  1. 1

    Nhập chiều rộng đầu ra theo pixel, hoặc để trống để giữ kích thước gốc của SVG.

  2. 2

    Thả tệp SVG vào ô hoặc nhấp để chọn.

  3. 3

    Tải từng PNG hoặc tải tất cả dưới dạng ZIP.

Đầu vào là vector, đầu ra là điểm ảnh

Tệp SVG không chứa điểm ảnh. Nó là bản mô tả hình dạng bằng văn bản: một hình tròn tại tọa độ này, một đường đi qua những điểm này, tô bằng màu này. Đó là lý do logo SVG trông sắc nét trên cả điện thoại lẫn màn hình 5K, và vì sao cùng một tệp có thể chỉ nặng 4 KB ở mọi kích thước hiển thị.

Rất nhiều nơi không dùng được bản mô tả đó trực tiếp. Mạng xã hội, sàn thương mại điện tử, bản tin email, tài liệu Office, hầu hết ứng dụng nhắn tin, kho ứng dụng và nhiều hệ thống nội dung yêu cầu ảnh raster. Chuyển sang PNG sẽ kết xuất các hình dạng ở một kích thước cố định, giữ nguyên vùng trong suốt, nên kết quả dùng được ở mọi nơi nhận hình ảnh.

Vì việc vẽ diễn ra ngay lúc chuyển đổi, kích thước đích không làm mất chất lượng. Một ảnh PNG kết xuất ở 3000 px trực tiếp từ SVG hoàn toàn sắc nét, trong khi cùng logo đó xuất ở 300 px rồi phóng to lên sẽ bị mờ.

Kích thước đầu ra được xác định thế nào

Chỉ có một thiết lập duy nhất là chiều rộng tính bằng điểm ảnh. Chiều cao luôn được tính từ tỷ lệ của SVG, nên hình không bao giờ bị kéo giãn.

Khi để trống ô này, công cụ dùng kích thước riêng của SVG:

  1. Thuộc tính width và height trên phần tử gốc <svg>, khi cả hai đều là số thuần hoặc giá trị pixel, như width="512" height="256".
  2. Nếu không có, dùng viewBox: viewBox="0 0 120 80" cho ra 120×80 px. Điều này cũng xảy ra khi kích thước được ghi bằng phần trăm, em hoặc centimet.
  3. Nếu vẫn không có, dùng kích thước mà trình duyệt gán cho ảnh.

Nhiều bộ biểu tượng khai báo kích thước 24×24 hoặc 16×16, cho ra ảnh PNG rất nhỏ. Hãy nhập chiều rộng để kết xuất lớn hơn: 512 cho biểu tượng kiểu ứng dụng sắc nét, 1200 cho ảnh xem trước trên mạng xã hội. Danh sách tệp hiển thị chiều rộng × chiều cao kết quả và dung lượng của từng ảnh PNG, nên bạn có thể kiểm tra trước khi tải về.

Mọi tệp trong một loạt dùng cùng chiều rộng. Với các biểu tượng có tỷ lệ khác nhau, điều đó có nghĩa là chiều rộng bằng nhau nhưng chiều cao khác nhau.

Chọn chiều rộng cho các mục đích thường gặp

  • Màn hình Retina và mật độ cao: kết xuất gấp hai hoặc ba lần kích thước hiển thị. Logo hiển thị rộng 200 px trong header trang nên có ảnh PNG rộng 400 hoặc 600 px.
  • Tài liệu và slide: rộng 1500 đến 2000 px giữ logo sắc nét ngay cả khi slide được chiếu toàn màn hình.
  • In ấn: nhân chiều rộng khi in tính bằng inch với 300. Logo in rộng 4 inch cần 1200 px.
  • Favicon và biểu tượng ứng dụng: để có trọn bộ kích thước biểu tượng trong một lần, Tạo favicon tiện hơn.

Chiều rộng rất lớn bị giới hạn bởi trình duyệt chứ không phải bởi công cụ. Trình duyệt giới hạn tổng số điểm ảnh của canvas; trên iPhone và iPad, giới hạn vào khoảng 16 triệu điểm ảnh, xấp xỉ 4000×4000. Nếu chuyển đổi thất bại với chiều rộng lớn trên điện thoại, hãy thử nhỏ hơn hoặc dùng trình duyệt trên máy tính.

Vì sao PNG có thể trông khác bản xem trước trong trình chỉnh sửa

SVG được trình duyệt kết xuất như một ảnh độc lập, giống cách thẻ <img> trên trang web hiển thị nó. Vì lý do an toàn, SVG ở chế độ này không thể chạy script hay tải bất cứ thứ gì từ mạng. Trên thực tế, điều đó gây ra vài khác biệt điển hình:

  • Phông chữ. Chữ dùng phông web được liên kết thay vì nhúng sẽ chuyển về phông mặc định. Nếu tên phông tình cờ đã cài trên thiết bị của bạn thì phông đó được dùng, nghĩa là cùng một SVG có thể hiển thị khác trên máy tính khác. Chuyển chữ thành đường viền (outline) trong công cụ thiết kế sẽ loại bỏ vấn đề này.
  • Ảnh liên kết. Ảnh raster được tham chiếu qua URL sẽ bị thiếu; ảnh nhúng dưới dạng dữ liệu bên trong SVG hiển thị bình thường.
  • Hoạt ảnh và tương tác. Hiệu ứng khi rê chuột và hành vi bằng script không được áp dụng, còn SVG động được chụp lại thành một khung hình tĩnh.
  • Hiệu ứng. Bộ lọc và chế độ hòa trộn phụ thuộc vào khả năng hỗ trợ SVG của trình duyệt, nên hiệu ứng phức tạp có thể hơi khác nhau giữa Chrome, Firefox và Safari.

Nền, tệp và quyền riêng tư

Vùng trống vẫn trong suốt trong ảnh PNG. Nếu bạn cần nền đặc, chẳng hạn cho một nền tảng hiển thị vùng trong suốt thành màu đen, hãy chạy kết quả qua Chuyển PNG sang JPG và chọn màu nền tại đó.

Nhận tệp SVG đến 20 MB. Việc kết xuất và mã hóa PNG diễn ra trong trình duyệt, nên các tệp, vốn thường chứa logo và tác phẩm thương hiệu chưa công bố, không bao giờ được tải lên. Kết quả có thể tải về từng tệp hoặc dưới dạng ZIP.

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

Tệp của tôi có bị tải lên máy chủ không?

Không. SVG được trình duyệt kết xuất và mã hóa sang PNG cục bộ. Không có gì được gửi qua mạng.

PNG có bị mờ nếu chọn chiều rộng lớn không?

Không. SVG là định dạng vector nên được kết xuất trực tiếp ở kích thước bạn chọn — 4000 px sắc nét như 400 px.

Nếu để trống chiều rộng thì dùng kích thước nào?

Chiều rộng và chiều cao khai báo trong SVG, hoặc viewBox của nó. SVG không có cả hai sẽ mặc định 300×150.

Độ trong suốt có được giữ không?

Có. Vùng không có hình vẫn trong suốt trong PNG.

Vì sao SVG của tôi hiển thị khác?

Ảnh, phông chữ và script bên ngoài được tham chiếu từ SVG không được tải vì lý do bảo mật. Hãy nhúng phông chữ hoặc chuyển chữ thành đường nét để có kết quả giống hệt.

Đọc thêm

Công cụ liên quan

Tạo faviconTạo favicon.ico (16/32/48), apple-touch-icon và biểu tượng PNG từ PNG, JPG, WebP hoặc SVG. Mọi kích thước trong một ZIP, tạo ngay trong trình duyệt.Chuyển PNG sang JPG onlineChuyển PNG sang JPG trong trình duyệt. Chọn chất lượng và màu nền, chuyển nhiều tệp cùng lúc và tải ZIP về. Tệp không bao giờ rời khỏi thiết bị của bạn.Thay đổi kích thước ảnh onlineĐổi kích thước JPG, PNG hoặc WebP theo pixel hoặc phần trăm, hoặc chọn kích thước sẵn như Full HD hay Instagram. Hàng loạt, tải ZIP. Không tải lên.