Chuyển vector SVG có thể co giãn thành ảnh PNG sẵn sàng sử dụng
Tệp SVG là một tập hợp các hướng dẫn, không phải bức tranh đã hoàn chỉnh. Mở một tệp trong trình soạn thảo văn bản và bạn sẽ thấy XML mô tả các đường dẫn, hình dạng, màu tô và đường cong — một công thức mà trình duyệt theo đó để vẽ tác phẩm tươi mới ở bất kỳ kích thước nào bạn yêu cầu. PNG thì ngược lại: một lưới các điểm ảnh có màu được đóng băng ở chiều rộng và chiều cao cố định. Chuyển đổi từ cái này sang cái kia được gọi là rasterization, và công cụ này thực hiện hoàn toàn trong trình duyệt của bạn. Bạn chọn kích thước đầu ra, SVG được vẽ lên canvas HTML, và một PNG được trả lại — không có tệp nào rời khỏi thiết bị của bạn.
Vector so với raster, nói một cách đơn giản
Sự khác biệt cốt lõi là cách xử lý độ phân giải. Vì SVG lưu trữ toán học thay vì điểm ảnh, nó không phụ thuộc độ phân giải: phóng logo từ favicon lên biển quảng cáo và mỗi cạnh được tính lại để luôn sắc nét về mặt toán học. PNG không có sự tự do đó. Các điểm ảnh của nó đã được cố định, vì vậy phóng to quá kích thước gốc của nó buộc người xem phải kéo giãn các chấm hiện có, và bạn bắt đầu thấy sự mờ nhạt và bậc thang cho thấy đó là ảnh raster.
Sự đánh đổi đó có hai chiều. Vector không thể sánh bằng cho logo, biểu tượng và hình minh họa phẳng làm từ các hình dạng sạch, và các tệp thường rất nhỏ. Các định dạng raster như PNG xử lý gradient, bóng mềm và chi tiết ảnh chụp tự nhiên hơn, và — quan trọng là — chúng được hiểu bởi hầu như mọi thứ. Khi bạn rasterize, bạn đang đánh đổi khả năng co giãn vô hạn của SVG lấy khả năng tương thích phổ quát của PNG ở một kích thước đã chọn.
Tại sao phải rasterize SVG?
Nếu SVG co giãn đẹp như vậy, tại sao phải chuyển đổi nó? Tương thích thường là câu trả lời. Nhiều nơi đơn giản là không chấp nhận SVG: nhiều ứng dụng email loại bỏ hoặc từ chối hiển thị nó, các trình soạn thảo tài liệu và phần mềm trình chiếu thường muốn ảnh phẳng, các sàn thương mại và mạng quảng cáo yêu cầu PNG hoặc JPG, và hầu hết các nền tảng mạng xã hội bỏ qua hoàn toàn các tải lên vector. Một số hệ thống nội dung cũng chặn SVG hoàn toàn vì lý do bảo mật, vì định dạng có thể nhúng script.
Lý do thứ hai là đôi khi bạn muốn một tài nguyên có kích thước cố định. Biểu tượng ứng dụng, hình thu nhỏ, ảnh xem trước Open Graph và tài liệu in đều mong đợi kích thước điểm ảnh chính xác. PNG khóa tác phẩm vào đó sao cho nó hiển thị giống hệt nhau ở mọi nơi, không có bất ngờ từ trình xem diễn giải vector khác nhau. Chuyển đổi SVG nguồn của bạn thành các kích thước chính xác mà một nền tảng yêu cầu thường là con đường sạch nhất đến kết quả nhất quán.
Chọn độ phân giải xuất phù hợp
Vì PNG không thể phóng to đẹp, kích thước bạn xuất quan trọng hơn bất kỳ vector nào. Xuất quá nhỏ và ảnh trông mềm trên màn hình hiện đại; xuất quá lớn không cần thiết thì lãng phí băng thông. Quy tắc đơn giản: quyết định kích thước lớn nhất mà ảnh sẽ được hiển thị, sau đó render ít nhất bằng đó, và lý tưởng là nhiều hơn cho màn hình mật độ cao.
Màn hình tiêu chuẩn ổn ở 1x — kích thước danh nghĩa của tác phẩm. Màn hình high-DPI và Retina chứa khoảng gấp đôi điểm ảnh trong cùng không gian, vì vậy xuất 2x giữ các biểu tượng và đồ họa sắc nét thay vì mờ. Để in, áp phích hoặc màn hình rất lớn, 3x hoặc 4x cho bạn dư địa. Vì nguồn là vector, xuất lớn hơn không tốn gì về chất lượng — các đường cong chỉ đơn giản được tính toán lại ở số điểm ảnh cao hơn trước khi được làm phẳng. Khi nghi ngờ, hãy render ở kích thước rộng rãi; bạn luôn có thể thu nhỏ PNG lớn, nhưng không bao giờ có thể khôi phục chi tiết bằng cách phóng to một cái nhỏ.
Độ trong suốt đi theo cùng
PNG hỗ trợ kênh alpha đầy đủ, có nghĩa là độ trong suốt sống sót qua quá trình chuyển đổi. Nếu SVG của bạn không có nền được tô, PNG kết quả giữ các vùng đó trong suốt, vì vậy logo hoặc biểu tượng rơi xuống sạch sẽ trên bất kỳ màu nào mà không có hộp trắng xấu xí xung quanh. Nếu bạn muốn nền đặc thay vào đó, hãy đặt cho SVG một cái trước khi chuyển đổi. Dù thế nào, những gì bạn thấy trong vector là những gì PNG sẽ bảo toàn, đó chính xác là lý do tại sao PNG — thay vì JPG — là đích tự nhiên cho biểu tượng, huy hiệu và lớp phủ.
Mọi thứ ở lại trên thiết bị của bạn
Công cụ chuyển đổi này chạy như mã cục bộ trong trình duyệt của bạn sử dụng canvas API. SVG của bạn được đọc, vẽ và xuất mà không bao giờ được gửi đến máy chủ, vì vậy không có tải lên, không có hàng chờ và không có bản sao tác phẩm của bạn trong bộ nhớ của người khác. Điều đó nhanh hơn cho bạn và an toàn hơn cho bất cứ thứ gì bạn không muốn giao cho bên thứ ba, từ thương hiệu chưa phát hành đến sơ đồ nội bộ. Khi xong ở đây, hãy khám phá phần còn lại của công cụ ảnh của chúng tôi — nếu bạn đang xây dựng tài nguyên Windows hoặc favicon, công cụ PNG sang ICO là bước tiếp theo tự nhiên.
Câu hỏi thường gặp
PNG có trông sắc nét như SVG không?
Ở kích thước bạn xuất, có. Vì vector được render mới ở độ phân giải bạn chọn, các cạnh vẫn sắc. Sự khác biệt là PNG không thể phóng to sau đó mà không bị mờ, trong khi SVG gốc luôn có thể.
Quá trình chuyển đổi có bảo toàn độ trong suốt không?
Có. PNG có kênh alpha, vì vậy bất kỳ vùng trong suốt nào trong SVG đều vẫn trong suốt trong PNG. Thêm nền vào SVG trước nếu bạn muốn tô đặc thay vào đó.
Tôi nên chọn độ phân giải nào?
Khớp hoặc vượt quá kích thước lớn nhất mà ảnh sẽ được hiển thị. Dùng 1x cho màn hình tiêu chuẩn, 2x cho màn hình Retina và high-DPI, và 3x hoặc 4x để in hoặc đồ họa kích thước lớn. Render lớn hơn không tốn gì về chất lượng vì nguồn là vector.
Tại sao không chỉ dùng SVG ở mọi nơi?
Nhiều ứng dụng email, trình soạn thảo tài liệu, sàn thương mại và nền tảng mạng xã hội không chấp nhận hoặc hiển thị SVG đáng tin cậy. PNG hoạt động ở hầu hết mọi nơi và khóa tác phẩm ở kích thước cố định có thể dự đoán được.
Tệp của tôi có được tải lên bất cứ đâu không?
Không. Mọi thứ chạy cục bộ trong trình duyệt của bạn. SVG của bạn không bao giờ được gửi đến máy chủ, vì vậy không có gì được tải lên, lưu trữ hoặc theo dõi.
Tôi có thể chuyển PNG trở lại thành SVG không?
Không trung thực được. Rasterization loại bỏ toán học gốc, vì vậy quay trở lại có nghĩa là tracing các điểm ảnh thành các đường dẫn vector mới, hiếm khi khớp với nguồn. Hãy giữ SVG gốc của bạn làm tệp chính.