×

Cách sử dụng thẻ <symbol> để định nghĩa biểu tượng trong SVG trong HTML

Avatar of admin
admin 0 Views

Khi thiết kế web, việc sử dụng biểu tượng (icon) đóng vai trò quan trọng trong việc cải thiện tính trực quan và trải nghiệm người dùng. Trong HTML, ta có thể sử dụng Scalable Vector Graphics (SVG) để tạo ra các biểu tượng có thể mở rộng mà không bị mất chất lượng. Một trong những thẻ hữu ích khi làm việc với SVG đó là thẻ <symbol>.

Tại sao nên sử dụng thẻ <symbol>?

Thẻ <symbol> trong SVG cho phép bạn định nghĩa một biểu tượng một lần và sử dụng nó nhiều lần trong tài liệu HTML mà không cần phải sao chép mã SVG. Điều này giúp giảm thiểu lượng mã lặp lại và dễ dàng quản lý hơn khi có sự thay đổi cần áp dụng cho biểu tượng.

Cách định nghĩa một biểu tượng với thẻ <symbol>

Đầu tiên, chúng ta cần định nghĩa các biểu tượng trong một phần tử <svg>, sử dụng thẻ <symbol> để định nghĩa từng biểu tượng riêng lẻ. Ta có thể đặt phần tử <svg> này ở đầu hoặc cuối tài liệu HTML để chèn các biểu tượng khác nhau.

Ví dụ, dưới đây là cách định nghĩa hai biểu tượng: một hình vuông và một hình tròn.

<svg style="display: none;">
    <symbol id="icon-square" viewBox="0 0 100 100">
        <rect x="10" y="10" width="80" height="80" style="fill:blue;" />
    </symbol>
    <symbol id="icon-circle" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" style="fill:green;" />
    </symbol>
</svg>
  • id: Là thuộc tính định danh duy nhất cho biểu tượng.
  • viewBox: Xác định hệ trục tọa độ của biểu tượng, giúp biểu tượng có thể mở rộng hoặc thu nhỏ mà vẫn giữ nguyên tỷ lệ.

Cách sử dụng các biểu tượng định nghĩa sẵn

Để sử dụng các biểu tượng đã được định nghĩa, ta sử dụng thẻ <use> với thuộc tính xlink:href hoặc href để tham chiếu đến biểu tượng.

Ví dụ:

<svg width="100" height="100">
    <use href="#icon-square" />
</svg>
<svg width="100" height="100">
    <use href="#icon-circle" />
</svg>

Kết hợp CSS với SVG symbols

Bạn cũng có thể sử dụng CSS để áp dụng phong cách cho các biểu tượng SVG đã định nghĩa. Điều này giúp tạo ra sự nhất quán trong giao diện web và dễ dàng tùy chỉnh.

Ví dụ, áp dụng màu sắc và kích thước thông qua CSS:

<style>
    .icon {
        width: 50px;
        height: 50px;
    }

    .icon-blue {
        fill: blue;
    }

    .icon-green {
        fill: green;
    }
</style>

<svg class="icon icon-blue">
    <use href="#icon-square" />
</svg>
<svg class="icon icon-green">
    <use href="#icon-circle" />
</svg>

Kết luận

Thẻ <symbol> trong SVG là công cụ mạnh mẽ và hữu ích giúp bạn dễ dàng định nghĩa và tái sử dụng các biểu tượng trong tài liệu HTML. Điều này không chỉ giúp giảm thiểu số lượng mã lặp lại mà còn giúp việc cập nhật và bảo trì trở nên đơn giản hơn. Khi kết hợp với CSS, các biểu tượng SVG có thể trở nên phong phú và đồng nhất, mang lại trải nghiệm tốt hơn cho người dùng.

Comments

Bài viết liên quan