Sử dụng SVG thay thế cho icon bằng hình ảnh trên website

Việc chúng ta sử dụng các hình ảnh để làm các biểu tượng cho blog/website là điều đương nhiên bởi để cho thêm đẹp và trực quan hơn ta không thể thiếu chúng. Tuy nhiên việc có quá nhiều hình ảnh dẫn đến việc ảnh hưởng tốc độ load của trang, việc dùng SVG thay thế cho các icon này sẽ giúp ta cải thiện khá nhiều. Để so sánh mình lấy luôn logo tại blog này nha

File SVG - 770 bytes

File ảnh PNG - 1,915 bytes

So sánh 2 hình ảnh phía trên bạn cũng thấy rõ ràng chất lượng tương đương nhau nhưng ảnh sử dụng SVG nhẹ hơn và hơn nữa hiển thị ảnh qua SVG sẽ không bị vỡ ảnh dù bạn có phóng to ra đến đâu, tuy nhiên logo mình làm qua SVG hơi xấu so với thiết kế nên phóng to ra nó hơi lỗi

SVG là gì?

SVG (Scalable Vector Graphics), là một định dạng hình ảnh sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector vì vậy có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh.
Ví dụ ta sử dụng SVG để vẽ hình tròn vàng với viền xanh bằng đoạn code bên dưới

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Ta sẽ được kết quả

Vì sao nên sử dụng SVG thay thế cho file ảnh?

Như đã nói phía trên vì là hình ảnh dạng vector nên có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh. Ví dụ luôn 2 logo phía trên của mình, bên trái sử dụng SVG và bên phải là file ảnh PNG khi phóng to ra. Rõ ràng hình ảnh file PNG bị vỡ đúng không nào?

Ưu điểm của SVG

Giảm dung lượng website
Tăng tốc độ tải trang
Hiển thị, co giãn thoải mái mà không làm giảm chất lượng hình ảnh

Nhược điểm của SVG

Rất khó khăn về vấn đề thiết kế chúng nếu bạn không phải là 1 pro về designer sử dụng các phần mềm như Corel, Illustrator

Kết luận

Hiện tại hầu hết mọi trình duyệt đều hỗ trợ tốt cho SVG chính vì thế bạn không cần phải lo lắng. Ví dụ như blog mình, 100% icon và logo mình đều sử dụng SVG để tạo ra chúng
Cảm ơn bạn đã theo dõi, đừng quên để lại góp ý để chúng ta cùng học hỏi ./.