svg-icons-va-font-icons
svg-icons-va-font-icons

Thời gian qua, khi nhắc đến web icons dành cho wordpress là người ta nghĩ ngay đến việc sử dụng font icons. Tuy nhiên gần đây với sự phát triển mạnh mẽ của SVG thì dường như luật chơi đang dần được thay đổi. Nhưng trước khi bắt đầu bàn sâu hơn về việc sử dụng kỹ thuật nào thì chúng ta cần tìm hiểu SVG là gì?

Định nghĩa SVG icon và Font icon

Về SVG icon

Vào những năm 2000-2008 thì hầu hết các website đều sử dụng ảnh để làm icon. Đây là cách làm khá hay, thẻ <img/> kết hợp với thuộc tính :hover của thẻ <a> có thể cho ra những hiệu ứng rất đẹp mắt.

Tuy nhiên, có một nhược điểm đó là nó ảnh hưởng đến tốc độ tải trang vì khi có nhiều icon dẫn đến có rất nhiều ảnh. Để khắc phục nhược điểm này, người ta lại nghĩ đến việc sử dụng thuộc tính background-position để xử lý (kỹ thuật css prites). Cả website chỉ có duy nhất 1 ảnh và chỉ mất công download ảnh này về thôi, việc còn lại thì css sẽ xử lý sao cho phù hợp nhất. Tất cả các icon được xếp vào với nhau sau đó sử dụng background-position để điều chỉnh.

svg-icons
Tất cả các icon được xếp vào với nhau sau đó sử dụng background-position để điều chỉnh

Nhưng nó vẫn chưa đáp ứng được với sự phát triển ngày càng mạnh của đồ họa, nó tỏ ra yếu thế trong việc hiển thị ở độ phân giải màn hình và màu sắc khác nhau. Và font icon ra đời.

Font icon là gì?

Bước phát triển trong việc sử dụng các icon đó là chuyển từ ảnh sang font, ưu điểm của cách làm này là:

  • Tùy ý thay đổi “font-size” mà không sợ bị vỡ (do font là dạng vector)
  • Thay đổi màu sắc dễ dàng.

Tuy nhiên, font icon lại có một nhược điểm là nếu bạn sử dụng font icon thì bạn phải nhúng cả bộ font vào khiến lãng phí bộ nhớ. Và điều này thường xuyên xảy ra, cứ nghĩ mà xem một bộ font thì có đến cả trăm icons nhưng bạn chỉ sử dụng một vài trong số đó. Hơn nữa một số trường hợp trình duyệt không load được các icon (có thể do network, hiccup, server failure..)

Lợi ích khi sử dụng SVG

  • SVG là định dạng vector có thể tự co dãn với mọi kích cỡ phân giải khác nhau.
  • Chỉ hỗ trợ từ IE9 trở lên, tuy nhiên không có chuyện không load được giống như sử dụng font.
  • Dễ dàng sử dụng, tùy chỉnh với người mới hơn font icon.
  • Cho phép tùy chỉnh css tới từng phần trong icons, chính vì vậy mà mức độ tùy biến cao hơn (nếu là font thì bạn chỉ có thể thay đổi màu cho toàn bộ icon mà thôi, hoặc là đỏ hai là xanh. Tất nhiên là cũng sẽ có những font cho phép chúng ta tùy chỉnh màu ở nhiều phần, nhưng nói chung nó vẫn phức tạp hơn khi sử dụng SVG.

Tổng kết

Qua bài viết ta dễ dàng thấy được nên chọn SVG để tùy chỉnh phần icons cho website/blog. Hiện nay SVG đã được cải tiến mạnh mẽ có thể hỗ trợ tốt các trình duyệt IE 9 hoặc hơn.

So sánh SVG icons và Font Icons Ai nhanh hơn, ai tốt hơn?
Đánh giá bài viết!

LEAVE A REPLY

Please enter your comment!
Please enter your name here