Bỏ qua tới nội dung
Toolars
Khám phá

Chuyển SVG sang PNG

Mở một tệp SVG và trang này làm sạch nó theo danh sách cho phép nghiêm ngặt, rồi kết xuất phiên bản an toàn thành PNG nền trong suốt ở tỷ lệ bạn chọn, tất cả trong trình duyệt. Script không bao giờ được chạy và tệp không bị tải lên. Điều cần biết: mọi thứ nằm ngoài danh sách cho phép, như định kiểu CSS, bộ lọc, marker hay ảnh nhúng, đều bị loại bỏ trước khi kết xuất.

Thông tin công cụ

Giới hạn dung lượng SVG
2 MiB mã đánh dấu, được nhận diện là image/svg+xml
Tỷ lệ
Nút 1x, 2x, 3x và 4x, ở đây đặt sẵn 2x; ô “Tỷ lệ xuất” còn nhận giá trị từ 0,01 đến 32
Giới hạn đầu ra
8.192 px mỗi cạnh và 24 MP sau khi phóng tỷ lệ
Bị loại bỏ trước khi kết xuất
Script, trình xử lý sự kiện, thuộc tính style và <style>, bộ lọc, marker, <image>, foreignObject, URL bên ngoài và URL data:
Bị từ chối ngay
Khai báo DOCTYPE hoặc ENTITY, và tệp không có width/height lẫn viewBox
Nền
Trong suốt với PNG; màu lấp chỉ áp dụng khi bạn chuyển sang JPEG

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách chuyển SVG thành ảnh PNG

  1. 01

    Thêm SVG

    “Chọn tệp” nhận mỗi lần một tệp .svg. Mã đánh dấu gốc không bao giờ được chèn vào trang; bản xem trước chỉ xuất hiện sau khi kết xuất phiên bản đã làm sạch.

  2. 02

    Chọn kích thước

    Bấm 1x, 2x, 3x hoặc 4x bên dưới “Tỷ lệ xuất”, hoặc nhập số pixel chính xác vào “Chiều rộng đầu ra” và “Chiều cao đầu ra”.

  3. 03

    Làm sạch và chuyển đổi

    Bấm “Làm sạch và chuyển đổi”. Phần tóm tắt nêu kích thước pixel cuối cùng và số mục không an toàn hoặc không được hỗ trợ đã bị loại bỏ.

  4. 04

    Kiểm tra và tải về

    Nếu số mục bị loại bỏ lớn hơn 0, hãy so bản xem trước với tác phẩm gốc trước khi tải PNG.

Biến hình vector thành điểm ảnh

SVG mô tả hình khối nên luôn sắc nét ở mọi kích thước, nhưng nhiều nơi như công cụ trình chiếu, trình soạn thảo tài liệu và trang giới thiệu trên kho ứng dụng lại cần ảnh bitmap kích thước cố định. Chuyển sang PNG giữ được độ trong suốt và không mất gì ngoài giới hạn của lưới điểm ảnh bạn chọn.

Lưới đó mới là quyết định quan trọng. Tỷ lệ nhân với width và height của chính tệp SVG, hoặc với viewBox khi thiếu các thuộc tính đó, nên biểu tượng 64×64 thành 128×128 ở mức 2x. Phóng to PNG về sau sẽ làm ảnh nhoè, vì vậy hãy kết xuất ngay ở kích thước lớn nhất bạn cần.

Phần lớn bất ngờ đến từ bước làm sạch. Path, hình cơ bản, chữ, dải màu, clip path, mask, pattern và tham chiếu <use> cục bộ được giữ lại, cùng các thuộc tính trình bày như fill và stroke. Định kiểu nằm trong class CSS, thuộc tính style hoặc khối <style> bị bỏ đi, nên hình được xuất theo cách đó có thể hiện màu đen hoặc không có màu lấp.

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

Vì sao PNG của tôi bị đen hoặc mất màu?
Nhiều khả năng màu được đặt bằng CSS: khối <style>, quy tắc class hoặc thuộc tính style. Những thứ đó bị loại bỏ, và hình SVG mặc định được tô màu đen. Hãy xuất lại SVG bằng thuộc tính trình bày (fill, stroke) thay cho CSS, hoặc chọn chế độ xuất thuộc tính nội tuyến trong công cụ thiết kế.
Nên chọn tỷ lệ nào cho màn hình mật độ cao?
Trang này mở ở mức 2x, nhân đôi kích thước khai báo của SVG và phù hợp với hầu hết màn hình mật độ cao. Dùng 3x hoặc 4x cho vị trí hiển thị lớn hơn, nhưng nhớ rằng kết quả vẫn phải nằm trong 8.192 px mỗi cạnh và 24 MP.
Vì sao đầu mũi tên hoặc bóng đổ bị mất?
Trong SVG, đầu mũi tên được vẽ bằng phần tử marker còn bóng đổ bằng phần tử filter, và cả hai đều không nằm trong danh sách cho phép của bộ làm sạch. Hãy chuyển các hiệu ứng đó thành path thường trong trình chỉnh sửa trước khi xuất SVG.
Vì sao tệp SVG của tôi bị từ chối?
Lý do thường gặp là có khai báo DOCTYPE hoặc ENTITY, tệp lớn hơn 2 MiB, tệp không được nhận là image/svg+xml, hoặc phần tử gốc không có width, height hay viewBox. Tỷ lệ khiến bản kết xuất vượt giới hạn pixel cũng bị từ chối, kèm theo mức giới hạn cụ thể.
Phông chữ và ảnh liên kết có xuất hiện trong PNG không?
Không. URL bên ngoài, URL data: và phần tử <image> bị loại bỏ, nên ảnh liên kết và phông web không bao giờ được tải. Chữ được vẽ bằng phông mà trình duyệt đã có cho font-family được chỉ định, vì vậy hãy chuyển chữ thành đường viền trong trình chỉnh sửa khi cần nét chữ chính xác.

Chuyển đổi SVG sang ảnh