SVG so với PNG cho đồ họa web: Khi nào nên sử dụng từng định dạng

SVG và PNG phục vụ các mục đích cơ bản khác nhau, nhưng chúng trùng nhau đến mức gây nhầm lẫn. Một cửa hàng các hình dạng toán học. Các pixel lưu trữ khác. Chọn sai sẽ khiến bạn mất chất lượng hoặc hiệu suất - đôi khi là cả hai.

SVG (Đồ họa vectơ có thể mở rộng) là định dạng vectơ dựa trên XML. Thay vì lưu trữ dữ liệu pixel, nó mô tả hình dạng, đường dẫn và văn bản bằng tọa độ toán học. Tệp SVG về cơ bản là mã — bạn có thể mở tệp đó trong trình soạn thảo văn bản và đọc hướng dẫn cho trình duyệt biết cách vẽ hình ảnh.

SVG có thể được tạo kiểu bằng CSS và được thao tác bằng JavaScript. Bạn có thể thay đổi màu sắc khi di chuột, tạo hiệu ứng cho từng phần tử riêng lẻ và làm cho SVG phản hồi nhanh bằng cách điều chỉnh các thuộc tính viewBox. Đối với đồ họa đơn giản như logo và biểu tượng, SVG thường nặng từ 1-5 KB.

PNG (Đồ họa mạng di động) là định dạng raster lưu trữ hình ảnh dưới dạng lưới các pixel màu. Nó sử dụng tính năng nén không mất dữ liệu nên chất lượng giống hệt với bản gốc — không có hiện tượng nén như JPEG. PNG hỗ trợ độ trong suốt hoàn toàn (kênh alpha), khiến nó trở thành lựa chọn ưa thích cho những hình ảnh cần nền trong suốt.

PNG vượt trội trong việc tái tạo hình ảnh phức tạp: ảnh chụp màn hình, ảnh có độ trong suốt, họa tiết chi tiết và độ chuyển màu mượt mà. Tuy nhiên, vì nó lưu trữ mọi pixel nên các tệp PNG có thể lớn. Ảnh chụp màn hình 4K dưới dạng PNG có thể dễ dàng vượt quá 5 MB.

Đối với logo công ty thông thường, phiên bản SVG có thể nặng 2-5 KB. Logo tương tự được xuất dưới dạng PNG ở độ phân giải 2x cho màn hình retina có thể dễ dàng là 30-80 KB. Đó là sự khác biệt 10-15 lần.

Nhân số đó lên tất cả các biểu tượng, logo và thành phần giao diện người dùng trên một trang và SVG sẽ mang lại tải trọng nhẹ hơn đáng kể. Từ thử nghiệm trên một trang web thương mại điện tử có hơn 60 biểu tượng, việc chuyển từ PNG sang SVG đã cắt giảm 87% băng thông liên quan đến biểu tượng.

Nhưng lợi thế này lại ảnh hưởng đến đồ họa phức tạp. Một hình minh họa SVG với hàng nghìn điểm neo và đường dẫn chi tiết thực sự có thể vượt quá kích thước tệp của PNG được nén tốt. Nếu nhà thiết kế của bạn tạo một hình minh họa có hàng trăm thành phần riêng lẻ, hãy kiểm tra cả hai định dạng và so sánh.

Đây là lợi thế xác định SVG. Một SVG trông hoàn hảo đến từng pixel dù được hiển thị ở độ rộng 32 pixel hay 3200 pixel. Không có khái niệm về độ phân giải - trình duyệt vẽ lại các đường dẫn vectơ ở bất kỳ kích thước nào cần thiết.

Điều này quan trọng trên các màn hình từ màn hình máy tính để bàn 72 dpi đến điện thoại 460+ dpi. Một tệp SVG bao gồm mọi thiết bị. Một PNG thì không.

PNG có lưới pixel cố định. Hiển thị PNG 200x200 ở 400x400 pixel (xảy ra trên màn hình retina) và trình duyệt sẽ nội suy, làm cho hình ảnh trông mờ hoặc mờ. Cách giải quyết là xuất PNG ở độ phân giải 2x hoặc 3x, nhưng điều đó làm tăng kích thước tệp tương ứng - bộ biểu tượng 3x có thể lớn hơn 9 lần.

PNG là lựa chọn phù hợp bất cứ khi nào hình ảnh có tính chất nhiếp ảnh hoặc phức tạp về mặt nhiếp ảnh. Ảnh chụp màn hình, ảnh sản phẩm có độ trong suốt, kết cấu phức tạp, hình ảnh với hàng nghìn màu sắc và độ chuyển màu tinh tế - tất cả những thứ này đều thuộc định dạng raster.

PNG cũng chiến thắng đối với nghệ thuật pixel và hình ảnh trong đó mỗi pixel đều quan trọng ở một kích thước cụ thể. Các họa tiết trò chơi, chi tiết favicon ở 16x16 và hình ảnh trong đó hành vi khử răng cưa cần kiểm soát chính xác đều được phân phát tốt hơn dưới dạng PNG.

SVG là người chiến thắng rõ ràng cho logo, biểu tượng, hình minh họa, đồ họa thông tin, bản đồ, biểu đồ và các thành phần giao diện người dùng - bất kỳ thứ gì bao gồm các hình dạng, đường nét và màu sắc rõ ràng. Nếu đồ họa được tạo trong Figma hoặc Illustrator, việc xuất dưới dạng SVG sẽ duy trì chất lượng nguồn một cách hoàn hảo.

SVG cũng vượt trội về thiết kế đáp ứng. Bạn có thể tạo một hình minh họa SVG chỉnh lại hoặc ẩn các phần tử ở các điểm dừng khác nhau bằng cách sử dụng các truy vấn phương tiện CSS bên trong chính SVG. Các biểu tượng trong SVG có thể thay đổi màu sắc dựa trên chủ đề (chế độ tối/chế độ sáng) mà không cần phân phát các tệp hình ảnh riêng biệt.

SVG có thể chứa các thành phần văn bản thực tế mà công cụ tìm kiếm có thể lập chỉ mục. Nếu đồ họa thông tin của bạn có tiêu đề và nhãn dưới dạng văn bản SVG, Google có thể đọc chúng. Đây là một lợi thế SEO có ý nghĩa so với PNG, nơi tất cả văn bản được đưa vào lưới pixel và vô hình đối với trình thu thập thông tin.

Đối với trình đọc màn hình, SVG nội tuyến có role và aria-label các thuộc tính cung cấp khả năng truy cập tốt hơn hình ảnh raster. Hình ảnh PNG phụ thuộc hoàn toàn vào thay thế thuộc tính cho khả năng truy cập.

Cần chuyển đổi giữa các định dạng? bạn có thể chuyển đổi SVG sang PNG khi bạn cần một phiên bản raster để chia sẻ trên mạng xã hội, các ứng dụng email không hiển thị SVG hoặc các nền tảng chỉ chấp nhận hình ảnh raster.

Đi theo hướng khác, bạn có thể chuyển đổi PNG sang SVG cho những hình ảnh sẽ được hưởng lợi từ khả năng mở rộng vectơ. Quá trình chuyển đổi hoạt động tốt nhất trên đồ họa đơn giản với các cạnh rõ ràng và màu sắc hạn chế. Hình ảnh chi tiết sẽ không chuyển đổi tốt sang SVG.

Để thay đổi định dạng nhanh chóng mà không cần cài đặt bất kỳ phần mềm nào, iformat.io xử lý cả hai chuyển đổi trực tiếp trong trình duyệt của bạn. Tải lên, chuyển đổi và tải xuống trong vòng chưa đầy 10 giây.

Sử dụng SVG cho logo, biểu tượng, hình minh họa và bất kỳ thứ gì có hình dạng rõ ràng — nó có tỷ lệ hoàn hảo và giữ cho các tệp có kích thước nhỏ (thông thường là 1-5 KB). Sử dụng PNG cho ảnh chụp màn hình, ảnh có độ trong suốt và tác phẩm nghệ thuật có độ chính xác đến từng pixel. Đối với hầu hết các dự án web, việc chuyển đổi bộ biểu tượng của bạn từ PNG sang SVG sẽ giảm trọng lượng trang và cải thiện khả năng hiển thị trên màn hình có độ phân giải cao. Kiểm tra cả hai định dạng khi có nghi ngờ — việc so sánh kích thước tệp mất 30 giây và thường bạn sẽ dễ dàng đưa ra lựa chọn đúng.