Chúng tôi đã dành nhiều thời gian để nói về việc sử dụng nội tuyến và phần tử. Bạn có thể xây dựng một hệ thống biểu tượng với đầy đủ các lợi thế.
Bạn có thể tạo hệ thống biểu tượng SVG theo những cách khác. Bạn có thể bố trí một bảng sprite có lưới truyền thống trong SVG và tạo các sprite vị trí nền giống như chúng ta đã từng làm với hình ảnh raster. Trong tương lai, bạn sẽ có thể sử dụng số nhận dạng phân đoạn, do đó, việc này thậm chí còn dễ dàng hơn một chút. Thông tin thêm về những điều này.
Một cách khác là nhúng URI dữ liệu của ảnh SVG ngay vào tệp CSS. Đó là cách tiếp cận mà Grunticon thực hiện.
Grunticon là một plugin Grunt để tự động hóa hệ thống biểu tượng SVG. Nó có một thư mục chứa đầy SVG và xử lý chúng thành một tệp CSS. Có một loạt các bộ chọn trong đó, dựa trên tên tệp của ảnh SVG, có một background-imageURI dữ liệu SVG (mặc dù không phải Base64).
Làm theo cách này có nghĩa là bạn nhận được khả năng mở rộng của SVG và lợi ích về kích thước tệp, nhưng đó là về nó. Tuy nhiên, thường thì đó là tất cả những gì bạn cần.
Tuy nhiên, có lẽ phần tốt nhất về Grunticon là nó cung cấp cho bạn mọi thứ cần thiết để dự phòng. Điều này bao gồm một biểu định kiểu thay thế cho các tệp PNG của URI dữ liệu và thậm chí các tệp PNG riêng lẻ (mà nó tạo cho bạn). Ngoài ra, một tập lệnh bạn sử dụng trên trang của mình để xác định hỗ trợ và chỉ tải biểu định kiểu thích hợp.
Tôi nghĩ thật công bằng khi nói rằng điều này làm cho việc xử lý dự phòng trở nên dễ dàng hơn so với kỹ thuật / kỹ thuật defs . Không phải là nó không thể.
Grumpicon là phiên bản trong trình duyệt của Grunticon mà chúng tôi đã sử dụng trong video truyền hình này.
Grunticon, khi tôi viết bài này, đang làm việc trên một cách để cải tiến dần dần lên SVG nội tuyến được nhúng, điều này sẽ khá tuyệt!