Пълното ръководство за SVG

Страница 6 от 6: Силата на спрайтовете

Силата на спрайтовете

SVG ни позволява да създаваме икони във файлов формат, който не зависи от разделителната способност, което е страхотно, но поради ограниченията на HTTP протокола не искаме да отправяме още една заявка за файл за всяка икона в нашия уебсайт. Това скоро ще се промени с протокола HTTP / 2.

как да нарисувам лицето на черен мъж

За да не се налага да правим отделна заявка за всяка икона, можем да се върнем към нашия стар приятел спрайтът, освен този път в SVG. За да създадем спрайт в SVG, използваме таг и приложите идентификатор за препращане по-късно и viewBox атрибут за определяне на размера на платното. Вътре в иконата на символа ние създаваме нашите форми, текст и всякакви други елементи, които съставят нашата икона.



Вътре в символния маркер можем да добавим и допълнителни елементи за достъпност, като например и етикети. Ние създаваме нашите икони в етикет, за да ги дефинирате за по-късна употреба и да се уверите, че не се извеждат на страницата.



Има редица начини, по които можете да създавате спрайтове в SVG. Те могат да бъдат създадени с помощта на векторен софтуер - като Adobe Илюстратор CC или Скица - чрез просто поставяне на иконите върху художествена дъска и експортиране на файла като SVG. Кодът, който те произвеждат, обаче се нуждае от известно редактиране, за да се използва като система за икони. Друг начин е ръчно да създадете система от икони. Това не е твърде трудно и вие имате пълен контрол над маркирането. Спрайтовете на SVG също могат да бъдат включени в системи за изграждане като gulp или grunt, при което избирате папка, съдържаща SVG файлове и конфигурирате компилацията да извежда един SVG спрайт.

След като създадем или генерираме нашия SVG спрайт, има няколко начина да го използваме. Можем да копираме съдържанието на файла и да го поставим в горната част на нашата страница - това се нарича вграждане. Като алтернатива, ако използваме php, можем да използваме file_get_contents () функция за включване на файла глобално. Единственият недостатък е, че файлът няма да се кешира, защото се третира като код от браузъра, а не като изображение.



Как да създам SVG спрайт

01. Създайте рамката

За този урок ще поставим SVG в тялото на уебсайта, но ще видим как работи, като използваме файла външно. Основният код изисква SVG таг и празното етикет.

най-добрите компютри за Adobe Creative Cloud

02. Създайте нашия символ

Вътре в таг ще създадем първата си икона, като използваме символния таг, трябва да дадем на иконата идентификатора и viewBox атрибути. Вътре ще предоставим заглавие и форми, за да съставим нашата икона.

Facebook

03. Повторете

Сега създадохме първата си икона, ще направим същото и за останалите. Уверете се, че сте предоставили уникален идентификатор и включите viewBox атрибут.



... ...

04. Използвайте иконата

Сега сме дефинирали всички наши икони, можем да ги извадим и да ги използваме на страницата, където и да ни трябват.

За да използваме спрайта като външен файл, трябва да актуализираме елемента use за препратка към файла и след това към идентификатора.

05. Имена на класове

Можем да повторим предишната стъпка, за да изведем всички наши икони. Ако увием маркирайте около иконата и добавете класове към двете и можем да стилизираме нашите икони с CSS.

06. CSS

Сега имаме свои икони и те имат имена на отделни класове, можем да приложим различни цветове на запълване към всяка наша икона.

.icon--facebook { fill: #3b5998; } .icon--twitter { fill: #1da1f2; } .icon--linkedin { fill: #0077b5; }

Тази статия първоначално е публикувана в брой 267 на списание Web Designer. Абонирайте се за уеб дизайнер тук .

Свързани статии:

направете филм със специални ефекти

Текуща страница: Силата на спрайтовете

Предишна страница Добавете анимация към SVG