SVG on paras muoto kuvakkeille verkkosivustolla ei epäilystäkään siitä. Sen avulla voit saada teräviä kuvakkeita näytön pikselitiheydestä riippumatta, voit muuttaa SVG:n tyylejä leijuttaessa ja voit jopa animoida kuvakkeet CSS:llä tai JavaScriptillä.
On monia tapoja sisällyttää SVG sivulle, ja jokaisella tekniikalla on omat etunsa ja haittansa. Parin viime vuoden ajan olen käyttänyt Sass-toimintoa tuodakseni kuvakkeet suoraan CSS:ään ja välttääkseni HTML-merkintöjeni sotkemisen.
Minulla on Sass-luettelo, jossa on kaikki kuvakkeideni lähdekoodit. Jokainen kuvake koodataan sitten tieto-URI:ksi, jossa on Sass-toiminto, ja tallennetaan a mukautettu ominaisuus sivun juuressa.
TL; DR
Minulla on sinulle tässä Sass-toiminto, joka luo SVG-kuvakekirjaston suoraan CSS:ään.
SVG-lähdekoodi on käännetty Sass-funktiolla, joka koodaa ne data-URI:iin ja tallentaa sitten kuvakkeet mukautettuihin CSS-ominaisuuksiin. Voit sitten käyttää mitä tahansa kuvaketta missä tahansa CSS:ssäsi kuin se olisi ulkoinen kuva.
Tämä on esimerkki suoraan henkilökohtaisen sivustoni koodista:
.c-filters__summary h2:after {
content: var(--svg-down-arrow);
position: relative;
top: 2px;
margin-left: auto;
animation: closeSummary .25s ease-out;
}esittely
Sass rakenne
/* 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);
} Tällä tekniikalla on sekä hyviä että huonoja puolia, joten ota ne huomioon ennen kuin otat tämän ratkaisun käyttöön projektissasi:
Plussat
- SVG-tiedostoille ei ole HTTP-pyyntöjä.
- Kaikki kuvakkeet on tallennettu yhteen paikkaan.
- Jos sinun on päivitettävä kuvake, sinun ei tarvitse käydä läpi jokaista HTML-mallitiedostoa.
- Kuvakkeet tallennetaan välimuistiin CSS:n mukana.
- Voit muokata kuvakkeiden lähdekoodia manuaalisesti.
- Se ei saastuta HTML-koodiasi lisäämällä ylimääräisiä merkintöjä.
- Voit silti muuttaa kuvakkeen väriä tai jotakin osa-aluetta CSS:llä.
MIINUKSET
- Et voi animoida tai päivittää tiettyä SVG:n osaa CSS:llä.
- Mitä enemmän kuvakkeita sinulla on, sitä raskaampi CSS-käännöstiedostosi on.
Käytän tätä tekniikkaa enimmäkseen kuvakkeisiin logojen tai kuvitusten sijaan. Koodattu SVG tulee aina olemaan raskaampi kuin alkuperäinen tiedosto, joten lataan silti monimutkaisen SVG:ni ulkoisella tiedostolla joko url(path/to/file.svg).
SVG-koodaus data-URI:ksi
SVG:n koodaus data-URI:ksi ei ole uutta. Itse asiassa Chris Coyier kirjoitti julkaisun siitä yli 10 vuotta sitten selittääksesi, kuinka tätä tekniikkaa käytetään ja miksi sinun pitäisi (tai ei pitäisi) käyttää sitä.
On kaksi tapaa käyttää SVG:tä CSS:ssä data-URI:n kanssa:
- Ulkoisena kuvana (käyttäen
background-image,raja-kuva,listatyylinen kuva,…) - Pseudoelementin sisältönä (esim
::beforeor::after)
Tässä on perusesimerkki, joka näyttää kuinka käytät näitä kahta menetelmää:
Suurin ongelma tässä toteutuksessa on, että sinun on muutettava SVG manuaalisesti joka kerta, kun tarvitset uuden kuvakkeen, eikä ole todella miellyttävää, että tämä pitkä lukukelvoton koodijono on CSS:ssäsi.
Tässä Sass tulee apuun!
Sass-toiminnon käyttäminen
Käyttämällä Sassia voimme tehdä elämästämme yksinkertaisempaa kopioimalla SVG:n lähdekoodin suoraan koodikantaamme ja antamalla Sassin koodata ne oikein selainvirheiden välttämiseksi.
Tämä ratkaisu on enimmäkseen saanut inspiraationsa olemassa olevasta Threespot Median kehittämästä ja saatavilla olevasta toiminnosta niiden arkiston.
Tässä on tämän tekniikan neljä vaihetta:
- Luo muuttuja, jossa on lueteltu kaikki SVG-kuvakkeet.
- Luettele kaikki merkit, jotka on ohitettava data-URI:ssa.
- Toteuta toiminto, joka koodaa SVG:t data-URI-muotoon.
- Käytä funktiotasi koodissasi.
1. Kuvakeluettelo
/**
* Add all the icons of your project in this Sass list
*/
$svg-icons: (
burger: ''
);2. Luettelo poistetuista merkeistä
/**
* 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. Koodaustoiminto
/**
* 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. Lisää SVG sivullesi
button {
&::after {
/* Import inline SVG */
content: svg(burger);
}
}Jos olet noudattanut näitä vaiheita, Sassin pitäisi kääntää koodisi oikein ja tulostaa seuraavat:
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 ");
} Mukautetut ominaisuudet
Nyt toteutettu Sass svg() toiminto toimii loistavasti. Mutta sen suurin puute on, että kuvake, jota tarvitaan useissa paikoissa koodissasi, monistuu ja voi lisätä käännetyn CSS-tiedoston painoa paljon!
Tämän välttämiseksi voimme tallentaa kaikki kuvakkeet sisään CSS-muuttujat ja käytä viittausta muuttujaan sen sijaan, että tulostaisit koodatun URI:n joka kerta.
Säilytämme saman koodin, joka meillä oli aiemmin, mutta tällä kertaa tulostamme ensin kaikki Sass-luettelon kuvakkeet verkkosivumme juureen:
/**
* 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)};
}
}Nyt sen sijaan, että soitat svg() -toimintoa aina kun tarvitsemme kuvaketta, meidän on käytettävä muuttujaa, joka luotiin --svg etuliite.
button::after {
/* Import inline SVG */
content: var(--svg-burger);
}SVG-tiedostojesi optimointi
Tämä tekniikka ei tarjoa optimointia käyttämäsi SVG:n lähdekoodille. Varmista, että et jätä tarpeetonta koodia; muuten ne myös koodataan ja ne lisäävät CSS-tiedostosi kokoa.
Voit tarkistaa tämä loistava lista työkaluja ja tietoja SVG:n oikeasta optimoinnista. Suosikkityökaluni on Jake Archibald's SVGOMG - Vedä tiedostosi sinne ja kopioi tulostettu koodi.
Bonus: Päivitä kuvake hiirellä
Tällä tekniikalla emme voi valita CSS:llä tiettyjä SVG:n osia. Esimerkiksi ei ole mitään keinoa muuttaa fill kuvakkeen väri, kun käyttäjä pitää painiketta. Mutta on olemassa muutamia temppuja, joita voimme käyttää CSS:n kanssa, jotta voimme silti muokata kuvakkeen ulkoasua.
Jos sinulla on esimerkiksi musta kuvake ja haluat, että se on valkoinen, voit käyttää invert() CSS-suodatin. Voimme myös leikkiä hue-rotate() suodattaa.
Se siitä!
Toivottavasti tämä pieni aputoiminto on sinulle kätevä omissa projekteissasi. Kerro minulle, mitä mieltä olet lähestymistavasta – olisin kiinnostunut tietämään, kuinka voisit parantaa asiaa tai käsitellä sitä toisin!
