Зачем тебе CSS и HTML, иллюстратор?!
Недавно заказывал иконки в формате svg для нового проекта. В этом проекте нужно, чтобы цвет иконки можно было задавать CSS-свойством fill. Довольно простая задача как мне казалось. Хоть я и не являюсь иллюстратором или создателем иконок, с данной задачей я справляюсь в пару кликов. И я никак не мог представить, что всё так плохо, так мало исполнителей, которые поймут что мне нужно.
Проблемы
Прежде чем рассказать как перейти к основному рассказу, я хочу рассказать, что именно меня не устраивало в иллюстраторах (дизайнерах).
Готовые svg-иконки имеют слишком много строк кода
Даже самые простые иконки у них занимали в 3-6 раз больше строк кода, чем мои референсы. Это для svg-иконки крайне критично, особенно если их много, особенно если их вкладывать инлайново в документ, кстати, что такое «инлайново» они тоже не понимали.
SVG с вложенными стилями
В svg файле были стили, что тоже неприемлемо, т.к. в таком случае селекторы слоёв иконки были слишком персонализированными и нормальный css для них не написать.
Что такое CSS?! Я дизайнер, мне не нужен css
Этот ответ вообще самая страшная фраза для исполнителя, который мне писал такое. В ТЗ было сразу прописано, что иконка должна быть восприимчива к свойству fill.
Причины. CSS иллюстратору/дизайнеру?!
Ты что тупой что ли?
С каждым годом всё больше и больше становится предложений на рынке дизайна, иллюстрации и т.д в России. Сейчас нужно не только уметь «калякать», но и делать так, чтобы файл технически соответствовал требованиям. Это касается не только иконок, такая ситуация повсеместна. Дизайн рекламы, например, target mail, в котором твой креатив должен весить в среднем 150kb. Твоя иконка вообще не должна весить ничего.
А вообще, разбираться нужно в том, с чем придётся работать твоим коллегам. И не кидайся в них говном, а то и самого забрызгает. И найдите хоть пару способов использовать SVG не в веб’е.
О коллегах
Конечно же иконки будет размещать не дизайнер. а верстальщик и он будет очень расстраиваться из-за того, что его 1005000+ иконок не будут грузиться или будут грузиться очень медленно. Например, 1 из фрилансеров прислал мне уточку размером 9 килобайт. После нехитрых манипуляций я получил 1,4kb, экономия 7,6kbб, учитывая, что таких на странице 40 штук, перерасход бы составил 304kb. Это катастрофически много. Особенно если сайт рассчитан работать на мобильных.
Презентация и сдача проектов
Наверное каждый дизайнер, иллюстратор работает над своим личным брендом. Личный брэнд в этом деле, наверное, самый надёжный и простой способ найти клиентов. Важно не только иметь профиль на behance и dribble, но и вести свой бложек. И вот там однозначно придётся стилизовать свои иконки, чтобы всё не валялось, как тупое мясо . Если у вас всё будет аккуратно и красиво, то и новые клиенты к вам подтянуться. Это одна сторона медали.
Другая сторона. В проектах, в которых нужно создать несколько десятков иконок, надо ещё и ориентироваться. Согласитесь, что не сразу можно понять, что за иконка по названию файла в папке. Поэтому «bets practice» будет создавать html файл, в котором будут все иконки и название файлов, содержащихся в них.
Анимация
SVG можно использовать для живой анимации с помощью CSS. А это еще один вариант заработка.
Какой код SVG?!
Многие исполнители не понимают, что такое SVG. В отличие от JPG, PNG и т.д., которые из себя представляют бинарные данные, SVG это интерпретируемый файл и представляет из себя код, который можно редактировать. Из-за этого его и можно вкладывать в html (как принято называть инлайново).
Советы по созданию svg-иконок
Напоследок, для тех кто занимается созданием иконок и хочет совершенствовать свои навыки в создании svg, я приготовил несколько советов. Ну и конечно я провел несколько тестов, чтобы написать их. Результаты можно скачать тут
Разбирать/Не разбирать объекты
Говоря о размере SVG, разбор объекта ничего не меняет. Но есть исключения. Например, фигуры, в которых элементы расположены независимо друг от друга, размер разобранного объекта целиком будет больше, чем если бы вы разобрали части по отдельности.
Оптимизировать размер
Один из самых эффективных способов оптимизировать размер SVG -это объединить фигуры в один объект.
CSS внутри SVG
Старайтесь не использовать css внутри SVG иконки, а в одноцветных не используйте никогда. В настройке «Свойства таблиц CSS» выставляйте «Атрибуты представления». Тогда вы спокойно сможете изменять обводку у вашей иконки.
