SVG có một phần tử rất thú vị và mạnh mẽ được gọi là . Nó khá đơn giản trong khái niệm. Nó tìm thấy một bit khác của mã SVG, được tham chiếu bởi ID và sao chép nó vào bên trong phần tử.
Trường hợp sử dụng cơ bản nhất sẽ là: Tôi đã vẽ (các) hình dạng này một lần trên trang và tôi muốn vẽ lại nó ở một nơi khác. Đi lấy (các) hình dạng đó và vẽ lại.
Chúng ta có thể sử dụng khả năng đó làm khái niệm gốc cho (drumroll!) Và toàn bộ hệ thống biểu tượng! Chúng tôi có thể lấy tất cả các hình dạng mà chúng tôi dự định sử dụng trên trang trong một khối SVG lớn. Chúng tôi sẽ gói tất cả chúng trong một thẻ, đó là một cách ngữ nghĩa để nói "Chúng tôi chỉ xác định những thứ này để sử dụng sau này." Nó cũng làm cho chắc chắn họ sẽ không hiển thị (nhưng bạn cũng nên display: none;sự riêng của mình.
Nó hoạt động như thế này:
xlink:hrefThuộc tính trông sôi nổi đó tham chiếu đến một ID ở nơi khác. ID đó có thể nằm trên bất kỳ phần tử hình dạng nào, như a hoặc , hoặc có thể nằm trên một nhóm các phần tử như a .
Hơn hết trong trường hợp của một hệ thống biểu tượng, nó có thể nằm trên một phần tử. Ngoài việc chính xác về mặt ngữ nghĩa (một biểu tượng là một biểu tượng, không?), Phần tử có thể mang thuộc tính viewBox riêng và thông tin trợ năng, như và thẻ. Điều này làm cho việc thực hiện rất dễ dàng (như hình trên).
Vì vậy, bạn chỉ cần đảm bảo rằng điều này được xác định ở một nơi khác trong tài liệu:
Basketball Xem Pen JoDmd của Chris Coyier (@chriscoyier) trên CodePen.