Az SVG a legjobb formátum az ikonokhoz a webhelyeken Semmi kétség felőle. Lehetővé teszi, hogy éles ikonok legyenek a képernyő pixelsűrűségétől függetlenül, megváltoztathatja az SVG stílusát lebegve, és még animálhatja is az ikonokat CSS vagy JavaScript segítségével.
Sokféleképpen lehet SVG-t elhelyezni egy oldalon, és mindegyik technikának megvannak a maga előnyei és hátrányai. Az elmúlt néhány évben Sass függvényt használtam, hogy közvetlenül importáljam az ikonjaimat a CSS-be, és ne kelljen összezavarnom a HTML-jelölésemet.
Van egy Sass listám az ikonjaim összes forráskódjával. Ezután minden ikon egy Sass-függvénnyel ellátott adat-URI-ba van kódolva, és a egyedi ingatlan az oldal gyökerén.
TL, DR
Itt egy Sass-függvényem van, amely egy SVG ikonkönyvtárat hoz létre közvetlenül a CSS-ben.
Az SVG-forráskódot a Sass függvénnyel állítják össze, amely adat-URI-ban kódolja azokat, majd az ikonokat egyéni CSS-tulajdonságokban tárolja. Ezután bármelyik ikont használhatja bárhol a CSS-ben, mintha az egy külső kép lenne.
Ez egy példa közvetlenül a személyes webhelyem kódjából:
.c-filters__summary h2:after {
content: var(--svg-down-arrow);
position: relative;
top: 2px;
margin-left: auto;
animation: closeSummary .25s ease-out;
}Demó
Sass szerkezet
/* 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);
} Ennek a technikának vannak előnyei és hátrányai is, ezért kérjük, vegye figyelembe ezeket, mielőtt ezt a megoldást megvalósítaná a projektben:
Érvek
- Az SVG-fájlokhoz nincsenek HTTP-kérések.
- Az összes ikon egy helyen van tárolva.
- Ha frissítenie kell egy ikont, nem kell minden egyes HTML-sablonfájlt átnéznie.
- Az ikonok a CSS-sel együtt gyorsítótárban vannak.
- Manuálisan szerkesztheti az ikonok forráskódját.
- Nem szennyezi a HTML-kódot extra jelölések hozzáadásával.
- Továbbra is módosíthatja az ikon színét vagy egyes aspektusait a CSS segítségével.
Hátrányok
- Az SVG adott része nem animálható vagy frissíthető CSS-sel.
- Minél több ikonja van, annál nehezebb lesz a lefordított CSS-fájl.
Leginkább ikonokhoz használom ezt a technikát, nem pedig logókhoz vagy illusztrációkhoz. A kódolt SVG mindig nehezebb lesz, mint az eredeti fájl, ezért továbbra is betöltöm az összetett SVG-t egy külső fájllal vagy egy url(path/to/file.svg).
SVG kódolása adat-URI-ba
Az SVG adat-URI-ként való kódolása nem új keletű. Valójában Chris Coyier bejegyzést írt több mint 10 évvel ezelőtt, hogy elmagyarázza, hogyan kell használni ezt a technikát, és miért kell (vagy nem szabad) használnia.
Kétféleképpen használhat SVG-t az adat-URI-val rendelkező CSS-ben:
- Külső képként (használva
background-image,határ-kép,lista-stílusú kép,…) - Egy pszeudo elem tartalmaként (pl
::beforeor::after)
Íme egy alapvető példa, amely bemutatja, hogyan kell használni ezt a két módszert:
A fő probléma ezzel a konkrét megvalósítással az, hogy minden alkalommal kézzel kell konvertálni az SVG-t, amikor új ikonra van szüksége, és nem igazán kellemes, ha ez a hosszú olvashatatlan kódsor van a CSS-ben.
Itt Sass segít!
Sass függvény használata
A Sass használatával egyszerűbbé tehetjük az életünket, ha az SVG-nk forráskódját közvetlenül a kódbázisunkba másoljuk, és hagyjuk, hogy a Sass megfelelően kódolja azokat a böngészőhibák elkerülése érdekében.
Ezt a megoldást főként a Threespot Media által kifejlesztett és itt elérhető funkció ihlette tárhelyüket.
Íme a technika négy lépése:
- Hozzon létre egy változót az összes SVG ikonjával.
- Sorolja fel az összes olyan karaktert, amelyet ki kell hagyni egy adat-URI-hoz.
- Valósítson meg egy függvényt az SVG-k adat-URI formátumba kódolásához.
- Használja a függvényt a kódban.
1. Ikonok listája
/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
burger: ''
);2. A megtisztított karakterek listája
/**
* 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. Kódolás funkció
/**
* 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. Adjon hozzá egy SVG-t az oldalához
button {
&::after {
/* Import inline SVG */
content: svg(burger);
}
}Ha követte ezeket a lépéseket, a Sass-nek megfelelően le kell fordítania a kódot, és ki kell adnia a következőket:
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 ");
} Egyéni tulajdonságok
A most megvalósított Sass svg() funkció remekül működik. De a legnagyobb hibája az, hogy a kódban több helyen szükséges ikon megkettőződik, és jelentősen megnövelheti a lefordított CSS-fájl súlyát!
Ennek elkerülése érdekében az összes ikonunkat eltárolhatjuk CSS-változók és használjon hivatkozást a változóra ahelyett, hogy minden alkalommal a kódolt URI-t adná ki.
Megtartjuk ugyanazt a kódot, mint korábban, de ezúttal először a Sass listából az összes ikont kiírjuk a weboldalunk gyökerébe:
/**
* 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)};
}
}Most ahelyett, hogy a svg() függvény minden alkalommal, amikor szükségünk van egy ikonra, a változót kell használnunk, amelyet a --svg előtagot.
button::after {
/* Import inline SVG */
content: var(--svg-burger);
}Az SVG-k optimalizálása
Ez a technika nem optimalizálja az Ön által használt SVG forráskódját. Ügyeljen arra, hogy ne hagyjon felesleges kódot; különben ezek is kódolva lesznek, és megnövelik a CSS-fájl méretét.
Ellenőrizheted ezt a nagyszerű listát eszközöket és információkat az SVG megfelelő optimalizálásához. A kedvenc eszközöm Jake Archibald SVGOMG – egyszerűen húzza oda a fájlt, és másolja ki a kiadott kódot.
Bónusz: Az ikon frissítése az egérrel
Ezzel a technikával nem tudjuk CSS-sel kiválasztani az SVG egyes részeit. Például nincs mód megváltoztatni a fill az ikon színe, amikor a felhasználó rámutat a gombra. De van néhány trükk, amit a CSS-sel használhatunk, hogy továbbra is módosíthassuk ikonunk megjelenését.
Például, ha van egy fekete ikonja, és azt szeretné, hogy az egérmutató fehér legyen, használhatja a invert() CSS szűrő. Játszhatunk is a hue-rotate() szűrő.
Ez az!
Remélem, hasznosnak találja ezt a kis segítő funkciót saját projektjei során. Mondja el, mit gondol a megközelítésről – érdekelne, hogyan tehetné ezt jobbá, vagy hogyan kezelné másként!
