0
Home  ›  CSS

Sử dụng SVG icon cho website

Tết Pro Tết Pro 3 min read
Khi xây dựng blog/website, icon không đến mức không có không được nhưng icon giúp giao diện đẹp hơn, dễ nhìn và trực quan hơn cho người dùng. Thay vì dùng hình ảnh hay font kiểu như Font Awesome, cá nhân mình chọn SVG, vì sao thì anh em cùng xem nhé

SVG icon là gì?

SVG là dạng đồ họa vector vì thế nên nó là có thể phóng to, thu nhỏ ở bất kỳ kích thước nào mà vẫn giữ được độ sắc nét.

Lợi ích khi dùng SVG icon

Sắc nét trên mọi màn hình

  • Dù bạn có xem trên loại màn hình nào đi nữa thì icon SVG luôn rõ ràng, không bị mờ.

Tùy biến dễ dàng

  • Có thể thay đổi màu sắc, kích thước bằng CSS.
  • Hỗ trợ hiệu ứng hover, animation, đặc biệt nhất là đổi màu từng chi tiết nhỏ bên trong icon.

Nhẹ và nhanh hơn

  • Thay vì tải cả bộ icon như Font Awesome, với SVG bạn chỉ cần chèn đúng icon mình cần → tiết kiệm dung lượng, tăng tốc độ website. Mình thích nhất là cái này 😁

Kết luận

Với cá nhân mình sử dụng SVG icon thấy rằng nó vừa nhẹ, vừa đẹp, vừa linh hoạt, tuy nhiên ban đầu hơi mất công hơn so với việc gọi class Font Awesome. Nhưng về lâu dài, SVG icon mình cảm thấy nó tối ưu hơn rất nhiều, chắc anh em tự cảm nhận thôi nhỉ?

Hướng dẫn dùng SVG icon

Cách dùng nó thì anh em có thể search ra rất nhiều nhưng mình sẽ chia sẻ cách mình đang sử dụng cho blog này

Lấy từ Font Awesome

Muốn icon nào bạn lên website của Font Awesome tìm và lấy luôn đoạn mã đó 😁
Đoạn mã có dạng như sau 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 440 146.7 540.8 258.2 568.5L258.2 398.2L205.4 398.2L205.4 320L258.2 320L258.2 286.3C258.2 199.2 297.6 158.8 383.2 158.8C399.4 158.8 427.4 162 438.9 165.2L438.9 236C432.9 235.4 422.4 235 409.3 235C367.3 235 351.1 250.9 351.1 292.2L351.1 320L434.7 320L420.3 398.2L351 398.2L351 574.1C477.8 558.8 576 450.9 576 320z"/></svg>
Tuy nhiên giờ icon nó nhìn rất to và màu mặc định, trước hết thêm class cho nó đã 
<svg class="icon-demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 440 146.7 540.8 258.2 568.5L258.2 398.2L205.4 398.2L205.4 320L258.2 320L258.2 286.3C258.2 199.2 297.6 158.8 383.2 158.8C399.4 158.8 427.4 162 438.9 165.2L438.9 236C432.9 235.4 422.4 235 409.3 235C367.3 235 351.1 250.9 351.1 292.2L351.1 320L434.7 320L420.3 398.2L351 398.2L351 574.1C477.8 558.8 576 450.9 576 320z"/></svg>
Sau đó thiết kế CSS cho class này 
.icon-demo{
    height: 20px;
    fill: #0866ff;
}
Và kết quả ta được
Để cho dễ hình dung, mình sẽ thêm các hiệu ứng khác cho icon trên như sau 
.icon-demo{
    height: 20px;
    fill: #0866ff;
}
.icon-demo:hover{
    fill: #333;
}
Khi đó kết quả ta sẽ được
Các bạn có thể xem toàn bộ icon từ blog này của mình đều sử dụng SVG 😁
Nếu gặp khó khăn, để lại bình luận bên dưới mình sẽ hỗ trợ 👌
12 nhận xét
Additional JS