Икона на начална страница. Как да внедрите SVG икони за различни браузъри
Икона на начална страница. Как да внедрите SVG икони за различни браузъри
Отзивчивият дизайн е популярна тема. Екраните отдавна са надхвърлили стандартните разделителни способности и сайтовете могат да се гледат както на устройства с размер на длан, така и на големи монитори. Сайтът трябва да изглежда еднакво добре, независимо от размера на устройството и плътността на пикселите. Има много различни техники и технологии за адаптиране на дизайна и съдържанието. Векторната графика, SVG, според мен е една от най-интересните теми в тази посока.
SVG графиките са страхотни за икони, няма да изглеждат сапунени на устройства с ретина и могат да бъдат разтегнати без загуба на качество.
Ето, например, един SVG спрайт в 4 различни размера, оригиналният е 32px:
SVG се справя чудесно с това и е много подходящ за използване в адаптивни оформления.
Можете да вземете икони за дизайн от готови комплекти или да нарисувате свои собствени.
Комплекти готови икони
iconmelon.com
Голяма колекция от икони на различни теми. Предлага се изтеглените икони да бъдат вмъкнати в HTML чрез използване на .
icomoon.io
Най-удобният инструмент. Можете не само да изберете и изтеглите готови икони, но можете също да качите свои собствени и да ги получите под формата на шрифт и / или спрайт. Заедно със спрайта се предлага да изтеглите неговата PNG версия.
flaticon.com
Голяма колекция, иконите са удобно разделени на категории. Избраните икони могат да бъдат изтеглени в отделни формати (шрифт, SVG, PNG) или всички наведнъж.
Ние рисуваме себе си
За да създадете свой собствен набор от икони, имате нужда от векторен редактор:
Adobe Illustrator е най-добрият според мен. 599 RUB/месец като част от абонамент за Creative Cloud;
Inkscape е безплатен и не е много лесен за използване;
Sketch - за Mac OS, $79,99. Има някои проблеми с векторизирането на щрихи, но като цяло е доста удобно.
Отслабване
Готовият SVG файл обикновено съдържа много излишък, но се поддава добре на оптимизация. Ненужните атрибути, интервали и тирета са премахнати от кода, а броят на знаците след точката е намален на цифри. Теглото на пилата се намалява с 30-50%. Инструменти за оптимизация:
грухтене-svgmin- задача за използване на Grunt svgo. В този случай самите файлове ще бъдат взети от папката източник, оптимизирани и добавени към папката с резултати. Много удобно.
Шрифт спрайт или икона?
Шрифтът е удобна алтернатива на спрайта. Няма нужда да се занимавате с мрежата и местоположението на иконите, удобно е да добавяте нови знаци, въпреки че това изисква допълнителни инструменти.
С помощта на шрифт можете да правите не само монофонични икони, но и многоцветни.
Можете да създадете свой собствен шрифт, например на icomoon.io/app/. Приблизителна последователност от действия:
Изберете икони от комплекта и/или качете свои собствени.
Щракнете върху бутона Шрифт по-долу.
На тази стъпка можете да преназначите символи за икони или да изтеглите получения шрифт веднага.
Заедно с шрифта в четири формата (.woff, .svg, .ttf, .eot) се зарежда CSS и демо файл.
Вградените шрифтове работят дори в IE 8, но имат неочаквани проблеми с поддръжката в някои съвременни браузъри. Opera Mini изобщо не поддържа персонализирани шрифтове, Firefox се нуждае от заклинания за сървъра, където се намира шрифтът (решено с base64), Chrome може да разтовари шрифта, ако оставите раздел отворен за дълго време:
също в Chrome на Windows7 страница с вградени шрифтове може да виси при отваряне, а в някои други браузъри вместо икони може да се появи всичко:
Изображение от статията на Chris Koer Icon System with SVG Sprites. По някакъв начин видях йероглифи на същото място, но сега има SVG, така че екранът няма да работи. CSS-tricks, между другото, използва SVG много активно в новия си дизайн, а разработчиците на Codepen в новия дизайн на редактора изоставиха използването на шрифтове с икони в полза на SVG.
Въпреки лекотата на използване, проблемите с поддръжката на шрифтове в момента налагат избор в полза на SVG иконите.
Надяваме се, че вграждащите шрифтове ще се поддържат по-добре в бъдеще.
Как има начини да вмъкнете SVG в страница?
Спрайт
.icon (фоново изображение: url(your.svg); )
Професионалисти:
кратък четим код;
картината е кеширана;
минуси:
заявка към сървъра;
фоновият SVG се поддържа странно в старите опери: може да има проблеми при добавяне на рамка към елемент с SVG фон, докато в Opera Mini работят само фонове без viewBox;
иконите на спрайтове не са налични за стилове на страници;
големите спрайтове могат да причинят проблеми с производителността.
