Набор от svg икони. Как да внедрите SVG икони за различни браузъри
Прочетете също
В тази публикация ще демонстрирам как да внедрявам SVG икони, как да прилагам резервен вариант и как да превръщам иконите в SVG спрайт.
Основна интеграция на SVG елементи
Специално за този урок ще използвам една страница, която ще работи като онлайн визитка. Ще представя накратко услугите си и ще покажа три профила от професионални мрежи, свързани с работата ми. Ще използваме SVG икони.
Можете да видите от екранната снимка по-горе, че използвам икони (Twitter, Dribbble и GitHub) за символна връзка към моите работни профили. Изтеглих тези икони от flaticon, който имаше много различни икони и символи във векторни и растерни формати.
png и svg
Ще започнем с използването на PNG версиите на тези икони за съвместимост с предишни версиии след това подгответе SVG икони за работа в поддържащи браузъри.
Използвах Sketch, за да получа PNG иконите, и ще го използвам отново, за да подготвя SVG иконите.
Ако погледнете екранната снимка по-горе, ще забележите, че съм наименувал съответно всички групи и фигури в левия панел (Adobe Illustrator има същия списък в панела със слоеве). Много е важно да посочите правилно всички източници, това не само ще помогне за добрата организация на проекта, но и ще помогне в следващите стъпки на този урок.
Експортиране на SVG версии
Сега експортирам иконите като SVG икони, това се прави много лесно с инструмента за нарязване на Sketch. За още Подробно описаниеЗа да видите как работи тази опция, вижте Разбиране на опциите за експортиране на Sketch. Ще ги експортирам като отделни файловеи ги поставя в папката с изображения в моя проект.
Обикновено, за да покажете изображение на сайт, свързвате източника, като използвате елемент с атрибут src или нещо подобно:
Но при SVG файловете има няколко други начина, които могат да се използват в HTML документ. Например, можете да използвате директно SVG кода - ето как трябва да изглежда:
Това е една от иконите, към които експортирах XML формат. Този код е много подобен на HTML (това е структуриран формат), което означава, че можем да го вградим направо в страницата.
Добавяне на SVG към HTML
Нека започнем с основна HTML страница, която включва PNG икони с техните котви и контейнер:
И сега ще копирам и поставя SVG кода, въпреки че ще го игнорирам горен ред, което се отнася до естеството на вграждането на файла и други подробности за атрибута. HTML документът вече съдържа информация, която не е необходимо да се дублира.
Поставих SVG директно над съответните PNG икони в HTML страницата. На този моментЩе обвия реда с обикновеното PNG изображение в етикет за коментар, така че да не се показва до SVG версията
По-чист SVG
Също така ще почистя кода в моя SVG. Премахването на елементите на атрибута не е задължително, тъй като повечето от фрагментите, които премахвам, няма да променят поведението на SVG. Ето кода преди и след, в случай че искате да направите същото:
Вижте какви елементи премахнах. Елементите
След това трябва да поставя иконите там. Не е необходимо да обгръщам целия SVG, имам нужда само от груповия елемент с неговото съдържание. Мога да вградя това в елемент
Забележка: Ако ви е удобно да използвате Grunt, ето плъгин, който автоматизира сливането на всички отделни SVG файлове.
Крия!
Сега имаме всички SVG икони в главата и трябва да ги скрием; добавете атрибута display=”none” към новия svg>, което означава, че няма да се появи икона в горната част на страницата.
Дефиниране на всяка SVG икона
Следващата стъпка е да дефинираме всяка икона, така че да можем да я използваме на страницата, където преди това премахнахме елемента defs. С този етикет за обвиване на всички групи, като обвивам съответно всички икони, мога да посоча, че искам да ги използвам повторно където и да е на страницата.
Как да използвате SVG икони
Иконите вече са дефинирани, но също така трябва да посочим метод за използването им, като за това ще вземем елемента use. елемент
Ако сте направили всичко като мен и не сте направили никакви грешки, няма да видите никакви промени в начина, по който се изобразяват графиките, но сега можете да използвате повторно SVG икони (в какъвто размер искате) и да извиквате всяка от тях толкова пъти както искате на страницата.
Подобряване на нашия SVG спрайт
Друго предимство от използването на SVG спрайтове е, че кодът на страницата е много по-чист и по-лесен за четене от други хора, които също работят на сайта. Можем да подобрим резултата още малко. По-долу смених елементите
Използване
Чрез промяна на груповия елемент на символ. Ние можем да приложим всички тези подобрения. Можете да изтриете елемент
Заключение
Е, това, което започна с прости растерни икони, се превърна в супер мощен набор векторни графикикойто може лесно да се приложи където е необходимо и във всеки необходим размер. Надявам се, че сте намерили този урок за полезен и че ще продължите да експериментирате и да създавате SVG икони в следващия си проект.
Етикети: , ,PSD иконите са незаменим елемент от всеки дизайн на потребителския интерфейс, не отстъпват по важност дори на шрифтовете, но на практика рядко някой разработва свои собствени икони за всеки уеб проект. От друга страна, търсенето на икони с подходящо качество и дизайн също отнема много време, но днес решихме да ви помогнем и подготвихме селекция от безплатни комплекти икони за всички поводи.
01.Икони8
Icons8 е набор от 20 хиляди плоски икони във всякакъв формат, размер и цвят! Тук можете да намерите категории като бизнес, дрехи, храна и много други. Icons8 може да се изтегли като приложение за Mac или като ZIP архив.
02. Freepik
Ярка колекция от векторни икони от специализиран ресурс Freepik е само една от многото представени. Идеален е за бизнес и независими проекти. Освен това можете да изтеглите PSD икони във формати .AI, .EPS и .SVG.
03. Iconfinder
Проектиран в черно и бяло, този комплект съдържа комбинация от ясни функционални и емоционални векторни икони. С изключение стандартни иконитози комплект съдържа икони на сърце и очи, които ще ви позволят да давате собствени проектиемоционален цвят.
04. 195 PSD икони с плосък флаг
Отличен набор от PSD икони за уебсайт, който може да се използва при разработването на международен уебсайт, онлайн магазин или блог за пътуване. Комплектът включва 195 безплатни икони със заоблени ъгли.
05.Metro UI набор от икони
Ако сте фен на Windows 8, тогава трябва да разгледате този безплатен пакет с икони. Той включва 700 добре проектирани икони, които могат да се прилагат свободно към всякакъв тип проекти.
06. Модерни UI икони
Друг набор от безплатни икони, които можете да използвате, когато създавате потребителски интерфейс софтуерза Windows или Android/iOS. Като изтеглите този комплект, ще получите 1000 ръчно рисувани плоски икони, включително дори икони за чекмеджето на приложението Windows Phone.
07. 350 пиксела перфектни икони
Невероятен набор от 350 идеално ясни икони за приложения или уебсайтове. Те обаче могат да бъдат преоразмерени без загуба на качество.
08.80 мини икони
80 перфектно ясни миниатюрни икони, които могат да бъдат изтеглени както във формат PSD, така и като емблематичен шрифт. Тези спретнати и изтънчени социални PSD икони са идеални за всеки тип проект.
09. Проста и практична векторна графика на уеб икона
Много полезни икони за използване в лични и търговски проекти.
10. Безплатни плоски икони
Набор от икони с плосък стил, включително календар, имейл, часовник, карти и др.
11.Моно икони
Комплект, който включва 108 уникални монохромни икони, направени в минималистичен стил. Всички те са налични в PNG формат с размер 32 на 32.
12. Метрични икони
Безплатна колекция в стил Metro, която можете да използвате в собствените си приложения и уеб проекти. PSD иконите за социални медии са безплатни както за лични, така и за обществени търговска употреба. Архивът съдържа не само PSD, SVG, ESP и AI формати, но и уеб шрифтове.
13. Икони на лентата с раздели iOS 7
Елегантен пакет с икони, вдъхновен от iOS 7, който можете да използвате в собствените си приложения. Можете да изтеглите икони в следните формати: PSD, AI и ESP.
14 комплект икони за буци Pika
Икони в стил Пика, създадени от агенция Dutch Icon от Дания. Този комплект включва 42 идеално ясни икони.
15. Емблематичен
Друг набор от прости, но привличащи окото икони, идеални за минималистичен дизайн. Iconic е набор с отворен код, който може да бъде изтеглен в PNG, SVG, SWC и други формати, което ви позволява да ги адаптирате към вашите собствени дизайни.
16. 44 нюанса безплатни икони
Комплект от 44 икони. Той съдържа PSD икони за форума, които ще ви позволят лесно да ги редактирате и адаптирате към вашите собствени проекти.
17. Набор от икони за токени
Token включва 128 уникални икони, налични в ICO формат 16x16px, 32x32px и 256x256px и PNG формат 128x128px. Всяка икона се предлага в тъмна и светла версия и е пълна с .psd файл.
18. Плоски икони (PSD)
Цветни икони в плосък стил, които можете да изтеглите в PSD формат и да редактирате според собствените си нужди.
19. Безплатен набор от 32px икони
Комплект, в който ще намерите PSD икона за всякакви цели: Skype, Facebook, Twitter, RSS, чаша кафе, „харесване“ и много други.
20. 48 плоски дизайнерски икони
Ако сте почитатели на минимализма, то този комплект със сигурност ще ви хареса. Състои се от 48 безплатни икони, представящи офис задачи, социални аспекти и пътуване. Всички те са представени в AI и PNG формати и могат да бъдат мащабирани без загуба на качество.
21. Комплект икони Plex
Комплектът включва над 100 икони, включително календари, антивирусна програма, часовник, електронна поща, приложения Microsoft офис , социална медияи още много.
22. Vectory mini безплатно
Комплект от над 1000 PSD икони, проектирани от екипа на Icojam. Всички те също са в PNG формат. Те са идеални за използване при разработване на нов сайт, тъй като са безплатни за използване както в лични, така и в търговски проекти.
23. Елдорадо мини безплатно
Друга колекция от мини икони от Icojam, включваща над 1200 икони в 40 x 40 пиксела.
Иконите, които намирате в тези ресурси, могат също да се използват за илюстриране на информация в слайдшоута, украса на визитни картички, менюта, листовки и др.
Писахме, че иконите на тези сайтове са безплатни, но все пак обърнете внимание на условията за изтегляне, тъй като те могат да се променят по всяко време.
01. Списание Smashing
22.PixelsMarket
26.Blugraphic
Blugraphic - опции за PSD, PNG и векторни икони. Търсенето е ограничено до етикети, но можете да се абонирате за бюлетина и да получавате ежеседмично свободен изборчрез имейл.
27 Icon Shock
Icon Shock е хиляди безплатни икони за лична употреба. За да използвате изображение в комерсиален проект, трябва да направите еднократно плащане.
28. CSS автор
CSS Author предлага седмични селекции от най-добрите безплатни икони в мрежата.
29. Творческа опашка
Искате свежи икони? В Creative Tail има комплекти, които няма да намерите никъде другаде.
30. Безплатно изтегляне
All-Free-Download предлага лесно търсене и директно изтегляне на PSD, PNG и вектори.
31. Его икони
Ego Icons предлага над 1500 премиум икони и 100 безплатни векторни икони. Посетете и подсайтовете, като щракнете върху бутоните в горната лента за навигация.
32. Извънземната долина
AlienValley предлага широка гама от висококачествени икони в замяна на вашия имейл адрес.
33. Dreamtale
Dreamstale ще ви предостави страхотни безплатни премиум икони с приписване.
34. DuckFiles
35. 1001 безплатни изтегляния
1001 безплатни изтегляния са специализирани в плоски икони, които идват с разнообразие от красиви и причудливи опции.
36. Графичен залив
37.Пикседен
В Pixeden можете да търсите икони в няколко размера. Има богат избор от 16x16 до 512x512 в PNG формат.
38. Съществително Проект
NounProject е удобно търсене, лесно зареждане и високо качествоикони. Линк към автора е задължителен. Членството с месечна такса премахва ограниченията за изтегляне.
39. Iconmonstr
Iconmonstr предлага икони в няколко размера без приписване.
40 Фюжън плоча
Подготовката на SVG за използване в мрежата е много прост процес, не по-труден от експортирането на JPEG или PNG. Използвайте какъвто и да е редактор на изображения, с който сте свикнали (Illustrator, Sketch, Inkscape [безплатно] и т.н. [или дори Photoshop, ако използвате слоеве с форми]) с размера на изображението, който планирате да използвате. Обикновено работя в Illustrator, така че ще обясня някои от начините за подготовка на файлове в тази програма, но като цяло те са приложими за всяка друга програма. Може да искате да конвертирате текста в контури, тъй като шрифтът най-вероятно няма да се изобрази правилно, освен ако не планирате да ги стилизирате с уеб шрифта, използван на страницата, разбира се (което е възможно!). Също така не е добра идея да превръщате всички обекти в единични форми, особено ако имате щрих, който ще трябва да контролирате на страницата, особено след като конвертирането на обекти често не намалява размера на файла. Всички имена, дадени на групи или слоеве, ще бъдат добавени към SVG като идентификатор на елемент. Това е доста удобно за оформяне, но леко ще увеличи общия размер на файла.
Преди да експортирате, трябва да проверите дали всички изображения са в мрежа с цели пиксели (това е, например, не 23,3px × 86,8px). В противен случай най-вероятно изображението няма да има достатъчно яснота и част от изображението ще бъде отрязана. В Illustrator това може да се направи по следния начин: Object > Artboards > Fit to Artwork Bounds . След това щракнете върху Запиши като и изберете SVG и оставете настройките по подразбиране. Тук трябва да се направи малко оптимизация, но всъщност не си заслужава, тъй като по-късно ще приложим различни подобрения, така че засега няма да губим време за тези настройки.
Техники за намаляване на размера на файловете.
(Виж оптимизация)
За да постигнете най-малкия размер на SVG, би било логично да премахнете всичко ненужно от него. Най-известните и полезна програма(поне аз така мисля) за SVG обработка е SVGO. Той премахва целия ненужен код. Но! Внимавайте с тази програма, ако планирате да манипулирате SVG, когато CSS помощ/ JS , тъй като може да изчисти твърде много кода, затруднявайки по-нататъшните промени. Удобството на SVGO е също, че може да се включи в процеса на автоматично изграждане на проекта, но можете също да използвате GUIако искаш.
Разбирайки по-подробно с правилното премахване на всички ненужни, можем да направим нещо друго в графичен редактор. Първо трябва да се уверите, че използвате възможно най-малко пътища/форми, както и точки по тези пътища. Можете да комбинирате и опростите всичко, което може да бъде опростено, и да премахнете всички ненужни точки. Illustrator има плъгин VectorScribe с инструмента Smart Remove Brush Tool, който ще ви помогне да премахнете точки, като същевременно запазите общата форма същата.
Предварителна оптимизация
Smart Remove Brush Tool премахва точките
След това ще увеличим изображението. В Illustrator е удобно да включите изгледа на пикселна решетка View > Pixel Preview и да проверите как са подредени пътеките. Ще отнеме малко време, за да поставите пътеките върху мрежата, но усилията ще се отплатят и ще доведат до по-рязко изобразяване (по-добре е да обърнете внимание на това предварително).
Точки извън решетката
Подравняване на мрежата
Ако има два или повече обекта за подравняване, тогава си струва да премахнете всички ненужни припокривания. Понякога, дори ако контурите са внимателно подравнени, може да се види тънка бяла линия. За да предотвратите това, можете леко да наслагвате обекти един върху друг на местата на припокриване. Важно: В SVG z-index има определен ред, който зависи от обекта, който е отдолу, така че си струва да поставите най-горния обект в Долна частфайл в код.
И накрая, не на последно място, нещо, което обикновено се забравя, е да активирате gzip компресия на SVG на вашия сайт във файла .htaccess.
AddType изображение/svg+xml svg svgz
Като пример за това колко ефективна е тази техника, ще взема оригиналното лого на Breaking Borders и ще го оптимизирам по следния начин: увеличете размера до това, което трябва да бъде; Ще подредя контурите; Ще изтрия максималния възможен брой точки; преместване на точки с цели пиксели; преместете всички области на припокриване и ги изпратете на SVGO.
Оригинал: 1,413b
След оптимизация: 409b
В резултат на това размерът на файла стана ~ 71% по-малък (и ~ 83% по-малък при компресиране)