Biểu tượng SVG so với biểu tượng PNG trong các trang web hiện đại

Tôi tự hỏi tại sao rất ít trang web hiện đại vẫn chỉ sử dụng PNG cho các biểu tượng (nhưng giả định này chỉ dựa trên quan sát của tôi). Cho đến nay tôi biết, lý do chính để sử dụng PNG trên SVG là IE8 và SVG sử dụng nhiều năng lượng CPU hơn (nhưng tôi không tin rằng đây là bất kỳ vấn đề nào đối với các biểu tượng 1K đơn giản). Tôi có thể thấy (và chúng tôi hiện đang sử dụng) nhiều lợi thế trong việc sử dụng SVG, khi nó được sử dụng dưới dạng sprite, dưới dạng hình ảnh hoặc SVG nội tuyến.

(Câu hỏi Đang tìm kiếm nghiên cứu: Phông chữ PNG Sprite vs SVG sprite vs Icon tập trung vào hiệu suất và không có câu trả lời liên quan, Phông chữ Icon so với SVG bộ nhớ đệm và mối quan tâm về mạng tập trung vào lưu lượng mạng, nhưng nó có thể dễ dàng giải quyết bằng cách ví dụ: tạo khuôn mẫu.)

Nếu trang web mới chỉ hỗ trợ các trình duyệt hiện đại, thì có lý do gì để không sử dụng SVG (hoặc - có lý do gì để sử dụng PNG cho các biểu tượng) không? Nếu chúng ta không quan tâm đến IE8 và việc sử dụng SVG được sao lưu bằng cách tạo khuôn mẫu và / hoặc bộ nhớ đệm, thì có cách nào để chỉ dựa vào SVG không?

Những lý do SVG có thể là một lựa chọn tốt:

• nó hỗ trợ liền mạch các trình duyệt ở mọi kích thước, đặc biệt là với css's background-size
• bạn có thể mở rộng quy mô chúng lên / xuống, chẳng hạn như hiệu ứng di chuột
• bạn có thể nhúng SVG và thực hiện sửa đổi theo thời gian thực đối với chúng bằng JavaScript và DOM
• bạn có thể tạo kiểu cho SVG và các phần của SVG bằng CSS (thay đổi màu sắc, đường viền, v.v.)
• bạn có thể tạo SVG động, trên máy khách hoặc máy chủ. Do bản chất dựa trên văn bản của chúng, bạn không cần thư viện cấp thấp hoặc máy chủ mạnh để tạo chúng.

Lý do PNG có thể là một lựa chọn tốt:

• hỗ trợ trình duyệt
• công cụ hiện có để tạo trang tính PNG
• hầu hết mọi người có một trình chỉnh sửa tương thích với PNG trên máy tính của họ
• đồ họa của bạn là ảnh hoặc những hình ảnh khó vector hóa khác

Các mối quan tâm khác:

• một số trình chỉnh sửa SVG có thể lưu trữ siêu dữ liệu trong SVG của bạn, làm tăng kích thước tệp và có thể vô tình làm lộ dữ liệu
  • ví dụ: khi bạn xuất PNG trong Inkscape, nó đã / không lưu đường dẫn tuyệt đối đến thư mục này trong SVG khi bạn lưu
  • Máy nén SVG có thể loại bỏ điều này, nhưng tôi chưa thử nghiệm nó (vui lòng chỉnh sửa nếu bạn có)

SVG rất tuyệt (cách FakeRainBrigand mô tả độc đáo) và hiển thị đẹp mắt nhưng có thể khá phức tạp. Trình duyệt có nhiều việc phải làm hơn khi xử lý dữ liệu vectơ thay vì hình ảnh dựa trên pixel. Hình ảnh là một phần tử, một SVG có thể có nhiều phần tử con thậm chí có thể được thêm vào DOM khi được sử dụng nội tuyến.

Tôi đã không thực hiện bất kỳ bài kiểm tra hiệu suất có giá trị nào nhưng theo quan điểm hợp lý, SVG nên được sử dụng cẩn thận khi nói đến hiệu suất, đặc biệt khi xử lý các trình duyệt di động tuổi trung niên (CPU-stress). Sẽ rất hữu ích nếu có một biểu đồ trong đó bạn có thể xem năng lượng CPU tiêu thụ bởi 100 hình ảnh SVG so với 100 hình ảnh PNG trên các thiết bị Android và IOS khác nhau ...

Một lỗi khác với SVG là Thẻ cần thuộc tính chiều rộng và chiều cao cho một số trình duyệt Android / Samsung và IE cũ của chúng tôi. Và hầu hết các Trình chỉnh sửa SVG hiện đại như A *** e Illustrator chỉ cần thêm thuộc tính "viewBox".

Điều thú vị nhất về SVG là nó hiển thị đẹp và sắc nét ở bất kỳ mật độ điểm ảnh nào.

Trừ khi bạn đang hiển thị các hình dạng / thiết kế rất đơn giản hoặc đặc biệt cần sửa đổi các phần của đồ họa bằng ứng dụng, thì sẽ không có nhiều động lực để sử dụng SVG. Bạn có thể tạo PNG với kích thước gấp đôi kích thước ban đầu (đối với màn hình retina) và vẫn có kích thước tệp nhỏ hơn theo thứ tự độ lớn - chưa kể đến mức độ phù hợp tốt hơn cho các trình duyệt cũ (không cần javascript hoặc polyfills).

Tôi nói điều này với tư cách là một người xây dựng giao diện người dùng với đồ họa vector. Đó là một công cụ thiết kế tuyệt vời, nhưng để phân phối / băng thông / phạm vi tiếp cận thì khó có thể lên đầu PNG. Mới đêm qua tôi đã thử nghiệm một logo nổi tiếng. CocaCola.svg là gần 20 nghìn. Vì nó là một màu đồng nhất / phẳng nên tôi đã xuất dưới dạng PNG-8 với nén bảng màu 12 màu và giảm xuống còn 1,6K (!!!) Đối với một vài logo thì đó không phải là vấn đề lớn, nhưng khi bạn phải hiển thị 40 trong số họ .. tốt, bạn sẽ có được bức tranh.

Phần tốt nhất là bạn có thể biến PNG thành một tiểu dữ liệu base64 và nhúng chúng ngay vào biểu định kiểu của bạn. Điều này không được khuyến nghị với SVG - một định dạng vốn đã nổi tiếng về các vấn đề hiệu suất và khả năng tương thích, đặc biệt là trên các trình duyệt di động.

Cuối cùng, tôi phải nói rằng có những điểm mạnh và trường hợp sử dụng cho cả hai, nhưng PNG đã làm bùng phát nhiều đường mòn hơn và bạn phải đối mặt với ít lực cản hơn khi đi với dòng điện. Đối với những trường hợp kỳ lạ mà SVG thực sự phù hợp hơn, tôi thực sự giới thiệu bài viết này và tài nguyên học tập này

Chúc bạn thiết kế vui vẻ!

Đó là sự thật, png được sử dụng hầu hết ở mọi nơi. Tôi nghĩ đó là vì SVG, trong hầu hết các trường hợp, khá vô dụng, hình ảnh phải lớn hơn (tôi nghĩ vậy) và máy tính phải tạo lại hình ảnh bất cứ khi nào bạn thu phóng nó (vì bạn luôn thu phóng hình ảnh, phải không? ?) Tôi nghĩ đây là lý do quan trọng nhất.

Hãy lưu ý rằng SVG hiệu suất có thể trở nên khủng khiếp. Ngay cả trên các trình duyệt hiện đại, chẳng hạn như Chrome (viết điều này vào năm 2019!), Một trang giống như CMS với vài 100 (thực tế là 3-800) biểu tượng svg thực sự sẽ treo trình duyệt trong hơn 5 giây để hoàn thành hiển thị. Trong khi đó, tối đa hóa CPU.

Như đã lưu ý ở phần khác, số lượng SVG được nhúng trong trang liên tục làm tăng tải trên trình duyệt, vì vậy nếu bạn tình cờ gặp phải tình huống như vậy

Tùy chọn # 1: chuyển đổi svgs thành webfont (Xem biểu đồ hiệu suất tại đây: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

Tùy chọn số 2: Quay trở lại các PNG cũ đơn giản

Trong những tình huống như vậy mà bạn ~ không bao giờ muốn làm bất cứ điều gì lạ mắt như sửa đổi màu sắc nhanh chóng và bạn có NHIỀU phiên bản SVG, PNG cũ thực hiện công việc và tiết kiệm thời gian!