SVG là định dạng tốt nhất cho các biểu tượng trên một trang web, có không nghi ngờ gì về điều đó. Nó cho phép bạn có các biểu tượng sắc nét bất kể mật độ pixel trên màn hình, bạn có thể thay đổi kiểu của SVG khi di chuột và thậm chí bạn có thể tạo hoạt ảnh cho các biểu tượng bằng CSS hoặc JavaScript.
Có nhiều cách để bao gồm một SVG trên một trang và mỗi kỹ thuật đều có những ưu và nhược điểm riêng. Trong vài năm qua, tôi đã sử dụng hàm Sass để nhập trực tiếp các biểu tượng vào CSS của mình và tránh phải làm rối tung đánh dấu HTML của mình.
Tôi có một danh sách Sass với tất cả các mã nguồn của các biểu tượng của tôi. Mỗi biểu tượng sau đó được mã hóa thành một URI dữ liệu có chức năng Sass và được lưu trữ trong tài sản tùy chỉnh trên thư mục gốc của trang.
TL; DR
Những gì tôi có cho bạn ở đây là một hàm Sass tạo thư viện biểu tượng SVG trực tiếp trong CSS của bạn.
Mã nguồn SVG được biên dịch với hàm Sass mã hóa chúng trong URI dữ liệu và sau đó lưu trữ các biểu tượng trong các thuộc tính tùy chỉnh CSS. Sau đó, bạn có thể sử dụng bất kỳ biểu tượng nào ở bất kỳ đâu trong CSS của mình như thể đó là một hình ảnh bên ngoài.
Đây là một ví dụ được lấy trực tiếp từ mã của trang web cá nhân của tôi:
.c-filters__summary h2:after {
content: var(--svg-down-arrow);
position: relative;
top: 2px;
margin-left: auto;
animation: closeSummary .25s ease-out;
}Demo
Cấu trúc Sass
/* All the icons source codes */
$svg-icons: (
burger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0...'
);
/* Sass function to encode the icons */
@function svg($name) {
@return url('data:image/svg+xml, #{$encodedSVG} ');
}
/* Store each icon into a custom property */
:root {
@each $name, $code in $svg-icons {
--svg-#{$name}: #{svg($name)};
}
}
/* Append a burger icon in my button */
.menu::after {
content: var(--svg-burger);
} Kỹ thuật này có cả ưu và nhược điểm, vì vậy hãy tính đến chúng trước khi triển khai giải pháp này cho dự án của bạn:
Ưu điểm
- Không có yêu cầu HTTP nào cho các tệp SVG.
- Tất cả các biểu tượng được lưu trữ ở một nơi.
- Nếu bạn cần cập nhật một biểu tượng, bạn không cần phải xem qua từng tệp mẫu HTML.
- Các biểu tượng được lưu trong bộ nhớ cache cùng với CSS của bạn.
- Bạn có thể chỉnh sửa thủ công mã nguồn của các biểu tượng.
- Nó không làm ô nhiễm HTML của bạn bằng cách thêm đánh dấu bổ sung.
- Bạn vẫn có thể thay đổi màu sắc hoặc một số khía cạnh của biểu tượng bằng CSS.
Nhược điểm
- Bạn không thể tạo hoạt ảnh hoặc cập nhật một phần cụ thể của SVG bằng CSS.
- Bạn càng có nhiều biểu tượng, tệp được biên dịch CSS của bạn sẽ càng nặng.
Tôi chủ yếu sử dụng kỹ thuật này cho các biểu tượng hơn là logo hoặc hình minh họa. SVG được mã hóa sẽ luôn nặng hơn tệp gốc của nó, vì vậy tôi vẫn tải SVG phức tạp của mình bằng tệp bên ngoài hoặc bằng url(path/to/file.svg).
Mã hóa SVG thành URI dữ liệu
Mã hóa SVG của bạn dưới dạng URI dữ liệu không phải là mới. Trong thực tế Chris Coyier đã viết một bài về nó hơn 10 năm trước để giải thích cách sử dụng kỹ thuật này và tại sao bạn nên (hoặc không nên) sử dụng nó.
Có hai cách để sử dụng SVG trong CSS của bạn với URI dữ liệu:
- Dưới dạng hình ảnh bên ngoài (sử dụng
background-image,hình ảnh biên giới,danh sách-kiểu-hình ảnh,…) - Là nội dung của một phần tử giả (ví dụ:
::beforeor::after)
Dưới đây là một ví dụ cơ bản cho thấy bạn làm thế nào để sử dụng hai phương pháp đó:
Vấn đề chính với việc triển khai cụ thể này là bạn phải chuyển đổi SVG theo cách thủ công mỗi khi bạn cần một biểu tượng mới và không thực sự dễ chịu khi có chuỗi mã dài không đọc được này trong CSS của bạn.
Đây là nơi Sass đến để giải cứu!
Sử dụng hàm Sass
Bằng cách sử dụng Sass, chúng tôi có thể làm cho cuộc sống của mình đơn giản hơn bằng cách sao chép mã nguồn của SVG trực tiếp trong cơ sở mã của chúng tôi, cho phép Sass mã hóa chúng đúng cách để tránh bất kỳ lỗi trình duyệt nào.
Giải pháp này chủ yếu được lấy cảm hứng từ một chức năng hiện có được phát triển bởi Threespot Media và có sẵn trong kho lưu trữ của họ.
Đây là bốn bước của kỹ thuật này:
- Tạo một biến với tất cả các biểu tượng SVG của bạn được liệt kê.
- Liệt kê tất cả các ký tự cần được bỏ qua cho một URI dữ liệu.
- Triển khai một chức năng để mã hóa SVG thành định dạng URI dữ liệu.
- Sử dụng chức năng của bạn trong mã của bạn.
1. Danh sách biểu tượng
/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
burger: ''
);2. Danh sách các ký tự thoát
/**
* Characters to escape from SVGs
* This list allows you to have inline CSS in your SVG code as well
*/
$fs-escape-chars: (
' ': '%20',
''': '%22',
'"': '%27',
'#': '%23',
'/': '%2F',
':': '%3A',
'(': '%28',
')': '%29',
'%': '%25',
'': '%3E',
'': '%5C',
'^': '%5E',
'{': '%7B',
'|': '%7C',
'}': '%7D',
);3. Chức năng mã hóa
/**
* You can call this function by using `svg(nameOfTheSVG)`
*/
@function svg($name) {
// Check if icon exists
@if not map-has-key($svg-icons, $name) {
@error 'icon “#{$name}” does not exists in $svg-icons map';
@return false;
}
// Get icon data
$icon-map: map-get($svg-icons, $name);
$escaped-string: '';
$unquote-icon: unquote($icon-map);
// Loop through each character in string
@for $i from 1 through str-length($unquote-icon) {
$char: str-slice($unquote-icon, $i, $i);
// Check if character is in symbol map
$char-lookup: map-get($fs-escape-chars, $char);
// If it is, use escaped version
@if $char-lookup != null {
$char: $char-lookup;
}
// Append character to escaped string
$escaped-string: $escaped-string + $char;
}
// Return inline SVG data
@return url('data:image/svg+xml, #{$escaped-string} ');
} 4. Thêm SVG vào trang của bạn
button {
&::after {
/* Import inline SVG */
content: svg(burger);
}
}Nếu bạn đã làm theo các bước đó, Sass sẽ biên dịch mã của bạn đúng cách và xuất ra những thông tin sau:
button::after {
content: url("data:image/svg+xml, %3Csvg%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%2024.8%2018.92%27%20width=%2724.8%27%20height=%2718.92%27%3E%3Cpath%20d=%27M23.8,9.46H1m22.8,8.46H1M23.8,1H1%27%20fill=%27none%27%20stroke=%27%23000%27%20stroke-linecap=%27round%27%20stroke-width=%272%27%2F%3E%3C%2Fsvg%3E ");
} Thuộc tính tùy chỉnh
Sass hiện đã được triển khai svg() chức năng hoạt động tuyệt vời. Nhưng lỗ hổng lớn nhất của nó là một biểu tượng cần thiết ở nhiều nơi trong mã của bạn sẽ bị trùng lặp và có thể làm tăng trọng lượng tệp CSS đã biên dịch của bạn lên rất nhiều!
Để tránh điều này, chúng tôi có thể lưu trữ tất cả các biểu tượng của mình vào Các biến CSS và sử dụng tham chiếu đến biến thay vì xuất ra URI được mã hóa mọi lúc.
Chúng tôi sẽ giữ nguyên mã mà chúng tôi đã có trước đây, nhưng lần này trước tiên chúng tôi sẽ xuất tất cả các biểu tượng từ danh sách Sass vào thư mục gốc của trang web của chúng tôi:
/**
* Convert all icons into custom properties
* They will be available to any HTML tag since they are attached to the :root
*/
:root {
@each $name, $code in $svg-icons {
--svg-#{$name}: #{svg($name)};
}
}Bây giờ, thay vì gọi svg() mỗi khi chúng ta cần một biểu tượng, chúng ta phải sử dụng biến được tạo với --svg tiếp đầu ngữ.
button::after {
/* Import inline SVG */
content: var(--svg-burger);
}Tối ưu hóa SVG của bạn
Kỹ thuật này không cung cấp bất kỳ tối ưu hóa nào trên mã nguồn của SVG bạn đang sử dụng. Đảm bảo rằng bạn không để lại mã không cần thiết; nếu không, chúng cũng sẽ được mã hóa và sẽ làm tăng kích thước tệp CSS của bạn.
Bạn có thể kiểm tra danh sách tuyệt vời này các công cụ và thông tin về cách tối ưu hóa đúng cách SVG của bạn. Công cụ yêu thích của tôi là Jake Archibald's SVGOMG - chỉ cần kéo tệp của bạn vào đó và sao chép mã đã xuất.
Phần thưởng: Cập nhật biểu tượng khi di chuột
Với kỹ thuật này, chúng tôi không thể chọn với các phần cụ thể CSS của SVG. Ví dụ: không có cách nào để thay đổi fill màu của biểu tượng khi người dùng di chuột qua nút. Nhưng có một số thủ thuật chúng ta có thể sử dụng với CSS để có thể sửa đổi giao diện của biểu tượng của mình.
Ví dụ: nếu bạn có một biểu tượng màu đen và bạn muốn nó có màu trắng khi di chuột, bạn có thể sử dụng invert() Bộ lọc CSS. Chúng ta cũng có thể chơi với hue-rotate() lọc.
Đó là nó!
Tôi hy vọng bạn thấy chức năng trợ giúp nhỏ này hữu ích trong các dự án của riêng bạn. Hãy cho tôi biết bạn nghĩ gì về cách tiếp cận - Tôi muốn biết cách bạn làm cho điều này tốt hơn hoặc giải quyết nó theo cách khác!
