Strávili sme veľa času rozhovormi o použití inline a prvku. Môžete si zostaviť ikonový systém, ktorý má množstvo výhod.
Systém ikon SVG môžete vytvoriť aj inými spôsobmi. Mohli by ste rozložiť tradičný mriežkovaný sprite list v SVG a urobiť sprite na pozíciu na pozadí, ako sme to zvykli robiť s rastrovými obrázkami. V budúcnosti budete môcť používať identifikátory fragmentov, aby to bolo ešte trochu jednoduchšie. Viac informácií o týchto veciach.
Ďalším spôsobom je vložiť dátové URI obrázku SVG priamo do súboru CSS. To je prístup, ktorý zastáva Grunticon.
Grunticon je doplnok Grunt na automatizáciu systému ikon SVG. Trvá priečinok plný SVG a spracuje ich do súboru CSS. Je tam veľa selektorov, založených na názvoch súborov obrázkov SVG, ktoré majú background-imageURI dát SVG (nie však Base64).
Ak to urobíte týmto spôsobom, získate škálovateľnosť výhod SVG a veľkosti súboru, ale to je tak všetko. Napriek tomu je to často všetko, čo potrebujete.
Snáď najlepšia časť o Grunticon je však to, že vám poskytne všetko potrebné pre núdzové situácie. Patrí sem alternatívna šablóna štýlov pre údaje PNR URI údajov a dokonca aj samotné jednotlivé súbory PNG (ktoré pre vás vytvorí). Navyše skript, ktorý na svojej stránke používate na určenie podpory, a načíta sa iba príslušná šablóna so štýlmi.
Myslím si, že je spravodlivé povedať, že vďaka tomu sú záložné riešenia zatiaľ ľahšie zvládnuteľné ako defs / technika. Nie že by to nebolo možné.
Grumpicon je verzia Grunticon v prehliadači, ktorú sme použili v tomto vysielaní.
Grunticon, ako to píšem, pracuje na spôsobe, ako postupne vylepšiť až na vložený vložený SVG, čo by bolo celkom fajn!