Câu trả lời:
Tôi muốn nói PNG đơn giản vì thực tế nó có vẻ là một định dạng được chấp nhận hơn so với SVG.
Thực tế là bạn đã đặt tên cho SVG là một tùy chọn, có nghĩa là chúng ta có thể loại trừ đồ họa ảnh như một trường hợp sử dụng dự định - bởi vì SVG chỉ tốt cho đồ họa nghệ thuật đường nét như logo, biểu tượng và hình minh họa giống như clip.
Nếu bạn đang xem xét lựa chọn này cho đồ họa ảnh, không có lựa chọn nào; PNG có thể sẽ luôn luôn tốt hơn. Đối với đồ họa trong đó SVG là một tùy chọn khả thi, SVG là tùy chọn tốt nhất với dự phòng PNG / JPEG. PNG có nhiều điểm mạnh, nhưng về khả năng mở rộng và kích thước tệp, nó thường sẽ không khớp với SVG.
Cân nhắc chúng với nhau, PNG chắc chắn sẽ được hỗ trợ bởi nhiều trình duyệt hơn SVG tại thời điểm hiện tại, nhưng độ phân giải của các thiết bị mới được phát hành sẽ tăng mãi mãi, có nghĩa là PNG sẽ cần được phục vụ dựa trên nhiều độ phân giải khác nhau (thông qua Truy vấn phương tiện, JavaScript hoặc Đánh hơi tác nhân người dùng) hoặc được các trình duyệt thu nhỏ, có thể tạo ra một số kết quả không hoàn hảo.
Nhìn vào những gì chúng ta biết tương lai nắm giữ; độ phân giải cao hơn mãi mãi, hỗ trợ rộng hơn và sử dụng rộng rãi hơn các SVG trên internet; nó có ý nghĩa để xây dựng cho những gì sắp tới.
Nói chung, các trang web nên được xây dựng để tồn tại trong nhiều năm; trong 5 năm nữa, trang web tương thích ngược đẹp mắt của bạn có thể trông tuyệt vời đối với 2% người dùng internet vẫn sử dụng các trình duyệt cũ, nhưng khá kém trên các trình duyệt cập nhật với độ phân giải điên rồ - vì vậy, rất nhiều lựa chọn khó khăn thỏa hiệp.
Chỉ dành cho PNG
Vì mục đích chất lượng, bạn sẽ cần phục vụ ít nhất năm phiên bản khác nhau tùy thuộc vào kích thước và độ phân giải màn hình - và đó là một dự đoán rất bảo thủ, bạn có thể kết thúc với 10 - 15 phiên bản của cùng một hình ảnh nếu bạn muốn cực kỳ kỹ lưỡng . Điều này cũng mất một thời gian để thực hiện.
Nếu bạn chọn phục vụ một đồ họa duy nhất và có quy mô trình duyệt, kết quả có thể sẽ không hoàn hảo và thậm chí có thể xấu tùy thuộc vào số lượng tỷ lệ.
Một số lượng lớn các truy vấn phương tiện có thể làm phình to CSS một cách không cần thiết và ảnh hưởng tiêu cực đến tốc độ tải trang.
Sẽ trông tuyệt vời trên các trình duyệt và thiết bị cũ hơn, nhưng không tuyệt vời trên các trình duyệt mới hơn.
Các SVG với dự phòng PNG / JPEG / GIF
Bạn có thể sử dụng SVG ở mọi nơi và sau đó chuyển sang định dạng khác cho các trình duyệt không hỗ trợ SVG. Ưu điểm chính là bạn chỉ cần một tệp cho tất cả các độ phân giải khác nhau.
Nếu bạn thỏa hiệp và chấp nhận rằng người dùng trên các trình duyệt lỗi thời có thể sống với đồ họa không hoàn hảo, bạn sẽ chỉ cần một phiên bản khác của mỗi tệp ở định dạng PNG, JPEG hoặc GIF.
Điều này sẽ mất một khoảng thời gian tương tự để thực hiện vì các truy vấn phương tiện chỉ dành cho PNG - thậm chí có thể ít hơn, có nghĩa là nó có thể sẽ có cùng mức giá.
Sẽ trông tuyệt vời trên tất cả các thiết bị mới, với sự hy sinh được thực hiện trên công nghệ cũ.
SVG với nhiều dự phòng PNG / JPEG / GIF phụ thuộc vào độ phân giải và kích thước màn hình
Bạn có thể phục vụ SVG trước, sau đó là PNG phụ thuộc vào độ phân giải cho các trình duyệt không hỗ trợ SVG. Đây sẽ là tùy chọn triệt để nhất, ngược nhất và tương thích nhất, phù hợp nhất và tốn thời gian nhất .
Nó có thể sẽ mất nhiều thời gian như 1 & 2 kết hợp, cộng thêm một chút để xử lý các nút thắt.
Sẽ trông tuyệt vời trên hầu hết mọi thiết bị.
<picture>yếu tố trợ giúp với các kích thước hình ảnh khác nhau
SVG có thể mở rộng, nếu bạn có một đồ họa vector là một lợi thế rõ ràng. Đối với PNG đồ họa pixel thì tốt hơn. Một nhược điểm là, Internet Explorer chỉ hỗ trợ SVG với phiên bản 9 sắp tới (trước đó có plugin). Các trình duyệt di động cũng có thể có hỗ trợ hạn chế cho SVG.
EDIT : Như ClemDesm chỉ ra, các phiên bản IE cũ hơn không hỗ trợ PNG hoàn toàn trong suốt, vì IE8 được hỗ trợ. PNG không trong suốt hoạt động tốt. Câu trả lời của Computerish hiện có một giải pháp tuyệt vời để xử lý hình ảnh vector: Giữ chúng dưới dạng SVG, nhưng xuất chúng cho web dưới dạng PNG. Tôi hoàn toàn đồng ý với giải pháp này.
Chắc chắn sử dụng PNG cho một trang web. SVG đơn giản là không được hỗ trợ rộng rãi và nó có một số lợi ích đáng kể (nếu có) so với PNG cho xuất khẩu phẳng. Điều đó nói rằng, giữ tất cả các bản sao làm việc của bạn trong SVG.
Tôi sẽ gắn bó với PNG để ở bên an toàn. SVG vẫn chưa được chấp nhận hoàn toàn bởi nhiều công ty và trình duyệt internet lớn. Mặc dù các SVG có khả năng mở rộng và là các vectơ chúng thường không cần thiết, chiếm nhiều không gian hơn và quá phức tạp cho trang web.
Tôi hy vọng rằng đã trả lời câu hỏi của bạn :)
Mặc dù SVG không được chấp nhận trên toàn cầu và một số người gặp khó khăn khi nhân rộng các PNG, tôi luôn thấy rằng việc tạo một biểu tượng trong Adobe Illustrator hoạt động tốt nhất trong việc tăng hoặc giảm số lượng "hợp lý".