14: Hệ thống biểu tượng SVG - Xây dựng Defs - Thủ thuật CSS

Anonim

Các phần tử là ly hợp để toàn bộ ý tưởng này của một hệ thống biểu tượng SVG nội tuyến. Chúng tôi đã học được rằng một cách dễ dàng để làm điều đó là đặt mọi thứ bạn định vẽ sau này vào một khối để nó không hiển thị và chúng tôi có thể tham chiếu chúng sau (yêu cầu trình duyệt vẽ biểu tượng đó).

Trong video này, chúng ta sẽ dành một chút thời gian để xây dựng khối của riêng mình bằng tay. Nó không đặc biệt khó và, tôi nghĩ, lái xe về nhà như thế nào tất cả điều này hoạt động.

Chúng tôi sẽ tạo ra nó từ SVG mà chúng tôi tìm thấy ở những nơi khác nhau trên web. Chúng tôi lấy một từ The Noun Project, một từ IcoMoon và một từ Shutterstock. Chúng tôi thực hiện thẩm định của mình trong việc mở SVG, sửa bất kỳ hình dạng kỳ lạ nào, thu gọn kích thước canvas và những thứ khác. Ở đây không có giới hạn về nguồn thông tin vectơ này. Ba nguồn này chỉ để cho bạn thấy SVG có thể đến từ bất kỳ vector nào.

Sau này, hy vọng chúng ta sẽ đơn giản hóa quá trình này, nhưng hiểu được các đai ốc và bu lông về cách nó hoạt động luôn hữu ích. Bạn không bao giờ biết khi nào mình cần phải tìm hiểu sâu hơn (ví dụ: để tìm ra lý do tại sao điều gì đó không hoạt động đúng).