SVG є найкращим форматом для піктограм на веб-сайті без сумніву. Це дозволяє отримувати чіткі значки незалежно від щільності пікселів на екрані, ви можете змінювати стилі SVG під час наведення курсора та навіть анімувати значки за допомогою CSS або JavaScript.
Існує багато способів включити SVG на сторінку, і кожна техніка має свої переваги та недоліки. Протягом останніх кількох років я використовував функцію Sass, щоб безпосередньо імпортувати свої піктограми в мій CSS і уникнути необхідності псувати розмітку HTML.
У мене є список Sass з усіма вихідними кодами моїх піктограм. Кожен значок потім кодується в URI даних за допомогою функції Sass і зберігається в a користувацька власність в корені сторінки.
TL, д-р
Тут я маю для вас функцію Sass, яка створює бібліотеку піктограм SVG безпосередньо у вашому CSS.
Вихідний код SVG скомпільовано за допомогою функції Sass, яка кодує їх в URI даних, а потім зберігає піктограми в настроюваних властивостях CSS. Потім ви можете використовувати будь-яку піктограму в будь-якому місці вашого CSS, ніби це зовнішнє зображення.
Це приклад, взятий прямо з коду мого особистого сайту:
.c-filters__summary h2:after {
content: var(--svg-down-arrow);
position: relative;
top: 2px;
margin-left: auto;
animation: closeSummary .25s ease-out;
}Демонстрація
Структура 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);
} Ця техніка має як плюси, так і мінуси, тож візьміть їх до уваги, перш ніж застосовувати це рішення у своєму проекті:
профі
- Немає запитів HTTP для файлів SVG.
- Усі значки зберігаються в одному місці.
- Якщо вам потрібно оновити піктограму, вам не потрібно переглядати кожен файл шаблону HTML.
- Значки зберігаються в кеші разом із вашим CSS.
- Ви можете вручну редагувати вихідний код піктограм.
- Він не забруднює ваш HTML додаванням додаткової розмітки.
- Ви все ще можете змінити колір або деякі аспекти піктограми за допомогою CSS.
мінуси
- Ви не можете анімувати або оновлювати певну частину SVG за допомогою CSS.
- Чим більше у вас піктограм, тим важчим буде скомпільований файл CSS.
Я в основному використовую цю техніку для ікон, а не для логотипів чи ілюстрацій. Закодований SVG завжди буде важчим за вихідний файл, тому я все одно завантажую свій складний SVG із зовнішнім файлом або за допомогою url(path/to/file.svg).
Кодування SVG в URI даних
Кодування вашого SVG як URI даних не є новим. Насправді Chris Coyier написав допис про це понад 10 років тому, щоб пояснити, як використовувати цю техніку та чому ви повинні (чи не повинні) її використовувати.
Є два способи використання SVG у вашому CSS з URI даних:
- Як зовнішнє зображення (використовуючи
background-image,кордон-зображення,список-стиль-зображення,…) - Як вміст псевдоелемента (наприклад,
::beforeor::after)
Ось базовий приклад, який показує, як використовувати ці два методи:
Основна проблема з цією конкретною реалізацією полягає в тому, що вам потрібно конвертувати SVG вручну кожного разу, коли вам потрібна нова піктограма, і не дуже приємно мати цей довгий рядок нечитабельного коду у вашому CSS.
Ось де Sass приходить на допомогу!
Використання функції Sass
Використовуючи Sass, ми можемо спростити наше життя, скопіювавши вихідний код нашого SVG безпосередньо в нашу кодову базу, дозволивши Sass кодувати їх належним чином, щоб уникнути помилок браузера.
Це рішення здебільшого натхненно існуючою функцією, розробленою Threespot Media і доступною в їх сховище.
Ось чотири кроки цієї техніки:
- Створіть змінну з усіма вашими значками SVG у списку.
- Перелічіть усі символи, які потрібно пропустити для URI даних.
- Реалізуйте функцію для кодування SVG у формат URI даних.
- Використовуйте свою функцію у своєму коді.
1. Список значків
/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
burger: ''
);2. Список екранованих символів
/**
* 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. Функція кодування
/**
* 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. Додайте SVG на свою сторінку
button {
&::after {
/* Import inline SVG */
content: svg(burger);
}
}Якщо ви виконали ці кроки, Sass повинен правильно скомпілювати ваш код і вивести наступне:
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 ");
} Спеціальні властивості
Тепер реалізований Sass svg() функція працює чудово. Але його найбільший недолік полягає в тому, що значок, який потрібен у кількох місцях вашого коду, буде продубльований і може значно збільшити вагу вашого скомпільованого файлу CSS!
Щоб уникнути цього, ми можемо зберігати всі наші значки в Змінні CSS і використовуйте посилання на змінну замість кожного разу виводити закодований URI.
Ми збережемо той самий код, який був у нас раніше, але цього разу ми спочатку виведемо всі значки зі списку Sass у корінь нашої веб-сторінки:
/**
* 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)};
}
}Тепер замість того, щоб телефонувати svg() кожного разу, коли нам потрібна піктограма, ми повинні використовувати змінну, яку було створено за допомогою --svg префікс.
button::after {
/* Import inline SVG */
content: var(--svg-burger);
}Оптимізація ваших SVG
Ця техніка не забезпечує жодної оптимізації вихідного коду SVG, який ви використовуєте. Переконайтеся, що ви не залишаєте непотрібний код; інакше вони також будуть закодовані та збільшать розмір файлу CSS.
Ви можете перевірити цей великий список інструментів та інформації про те, як правильно оптимізувати ваш SVG. Мій улюблений інструмент – інструмент Джейка Арчибальда SVGOMG — просто перетягніть туди свій файл і скопіюйте виведений код.
Бонус: оновлення значка при наведенні
За допомогою цієї техніки ми не можемо вибрати за допомогою CSS певні частини SVG. Наприклад, немає можливості змінити fill колір значка, коли користувач наводить курсор на кнопку. Але є кілька трюків, які ми можемо використати з CSS, щоб все одно мати можливість змінювати вигляд нашої піктограми.
Наприклад, якщо у вас є чорний значок і ви хочете, щоб він був білим при наведенні курсора, ви можете скористатися invert() CSS фільтр. Ми також можемо грати з hue-rotate() фільтр
Це воно!
Сподіваюся, вам стане в нагоді ця маленька допоміжна функція у ваших власних проектах. Дайте мені знати, що ви думаєте про підхід — мені було б цікаво дізнатися, як ви могли б покращити це чи вирішити це по-іншому!
