Как изменить толщину svg иконки

Предисловие

Каждый дизайнер хоть раз, да сталкивался с иконками. Эта статья о процессе работы с готовыми иконками и их подготовкой перед тем, как отдать разработчику. Разберёмся с рядом проблем и постараемся улучшить процесс. Затронем роль дизайнера и разработчика.

Если некоторые абзацы вам знакомы — смело пропускайте!

Форматы файлов

Существует несколько форматов изображений: jpg, tiff, png, webp, gif, svg и тд. Они разделяются на растровый и векторный форматы.

Нас не интересует растр. Наши изображения должны минимально весить и хорошо отображаться на любом устройстве, даже с дисплеем Retina. Поэтому говорить мы сегодня будем о векторе, а именно о формате svg.

SVG иконка = код

Да, вы не ослышались. Если вы смотрите на svg-изображение, то будьте уверены, что это 100% код.

Формат содержит специальную разметку, где указываются параметры: заливка, обводка, размер, точки на плоскости.

Любое svg-изображение можно открыть не только в режиме его просмотра, но и в любом текстовом редакторе.

Вот так мы видим иконку Figma в любом браузере, веб или мобильном:

А вот так она выглядит в коде:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.03769 3.78769C9.02226 2.80312 10.3576 2.25 11.75 2.25H20.25C21.6424 2.25 22.9777 2.80312 23.9623 3.78769C24.9469 4.77226 25.5 6.10761 25.5 7.5C25.5 8.89239 24.9469 10.2277 23.9623 11.2123C23.7656 11.409 23.5549 11.5885 23.3325 11.7498C24.646 12.704 25.5 14.2523 25.5 16C25.5 18.8995 23.1495 21.25 20.25 21.25C19.0228 21.25 17.8939 20.8289 17 20.1234V24.5C17 25.5384 16.6921 26.5534 16.1152 27.4167C15.5383 28.2801 14.7184 28.953 13.7591 29.3504C12.7998 29.7477 11.7442 29.8517 10.7258 29.6491C9.70738 29.4466 8.77192 28.9465 8.03769 28.2123C7.30347 27.4781 6.80345 26.5426 6.60088 25.5242C6.39831 24.5058 6.50227 23.4502 6.89963 22.4909C7.27123 21.5938 7.88381 20.8186 8.66778 20.25C8.4453 20.0887 8.23449 19.9091 8.03769 19.7123C7.05313 18.7277 6.5 17.3924 6.5 16C6.5 14.6076 7.05313 13.2723 8.03769 12.2877C8.23448 12.0909 8.44529 11.9113 8.66776 11.75C8.44529 11.5887 8.23448 11.4091 8.03769 11.2123C7.05313 10.2277 6.5 8.89239 6.5 7.5C6.5 6.10761 7.05313 4.77226 8.03769 3.78769ZM11.75 10.75C10.888 10.75 10.0614 10.4076 9.45191 9.7981C8.84241 9.1886 8.5 8.36195 8.5 7.5C8.5 6.63805 8.84241 5.8114 9.45191 5.2019C10.0614 4.59241 10.888 4.25 11.75 4.25H15V10.75H11.75ZM15 12.75H11.75C10.888 12.75 10.0614 13.0924 9.45191 13.7019C8.84241 14.3114 8.5 15.138 8.5 16C8.5 16.862 8.84241 17.6886 9.45191 18.2981C10.0614 18.9076 10.888 19.25 11.75 19.25H15V12.75ZM15 21.25H11.75C11.1072 21.25 10.4789 21.4406 9.9444 21.7977C9.40994 22.1548 8.99338 22.6624 8.74739 23.2563C8.50141 23.8501 8.43705 24.5036 8.56245 25.134C8.68785 25.7645 8.99738 26.3436 9.4519 26.7981C9.90643 27.2526 10.4855 27.5621 11.116 27.6876C11.7464 27.813 12.3999 27.7486 12.9937 27.5026C13.5876 27.2566 14.0952 26.8401 14.4523 26.3056C14.8094 25.7711 15 25.1428 15 24.5V21.25ZM20.25 12.75C18.4551 12.75 17 14.2051 17 16C17 17.7949 18.4551 19.25 20.25 19.25C22.0449 19.25 23.5 17.7949 23.5 16C23.5 14.2051 22.0449 12.75 20.25 12.75ZM17 10.75V4.25H20.25C21.112 4.25 21.9386 4.59241 22.5481 5.2019C23.1576 5.8114 23.5 6.63805 23.5 7.5C23.5 8.36195 23.1576 9.1886 22.5481 9.7981C21.9386 10.4076 21.112 10.75 20.25 10.75H17Z" fill="white"/>
</svg>

Работа в Figma

Иконки в вариантах

Об этом совсем недавно рассказывал Саша Окунев. Я тоже об этом немного расскажу, так как это часть процесса.

Некоторые дизайнеры избыточно используют фишку Figma — Variants, закидывая в них иконки. Это не удобно по ряду причин:

• если иконок много, то в списке вариантов вы можете запутаться;
• на превью компонента всегда будет одна и та же иконка, найти нужную будет сложно;
• не будет поиска по названию, компонент всегда будет один;
• при экспорте иконки, имена файлов будут соответствовать названию слоя, то есть содержать длинное свойство компонента, например так:

icon name=ArrowCircleUpLeft, size=32px.svg

Иконки отдельным компонентом

Лучше всего организовывать свою библиотеку с иконками отдельным компонентом, для более гибкого управления:

• выгружать такие иконки легче и название файла будет понятно для всех;
• легко можно найти в панели Assets, как по имени, так и по превью;
• можно писать в начало названия компонента 16px, 24px и тд, тогда размерность иконок будет разложена по виртуальным папкам.

Иконки в папках

Несколько советов по хранению иконок в проектах.

Здесь важно обратится к иерархии хранения компонентов. Figma раскладывает компоненты по папкам через Страница — Фрейм — Название компонента. Некоторые свойства иерархии можно миновать.

• Если компоненты иконок лежат на странице icons, а название иконки heart, то в панели assets компонент будет лежать в папке icons/heart;

• Если компоненты иконок лежат на странице icons, во фрейме с названием 24px, а название иконки heart, то в панели assets компонент будет лежать в папке icons/24px/heart;

• Если компоненты иконок лежат на странице icons, а вы не хотите хранить иконки в отдельных фреймах, а просто на канвасе, при этом сохранить размерную иерархию, то добавьте к названию иконки 24px/heart. Тогда в панели assets компонент будет лежать в папке icons/24px/heart.

Если у вас в проекте несколько размерных сеток для иконок, то лучше всего раскладывать их по виртуальным папкам, так вам легче будет ориентироваться в компонентах и находить нужные.

• Если у вас не так много компонентов и вы хотите держать их на одной странице, но хотите сохранить иерархию компонентов, то заведите страницу components (или как вам удобно), положите в нее все компоненты и назовите иконки полным адресом иерархии icons/24px/icon-name.

Возможно, вашим разработчикам понадобится всего лишь один размерный ряд, но об этом мы поговорим ниже, в видах использования иконок.

Стиль для иконок

К сожалению, на протяжении долгого времени Figma не может поправить прыжок цвета, после того, как мы подменяем инстанс иконки. Поэтому заведите отдельный цветовой стиль.

Это связано с тем, что порядок и количество слоёв у иконки меняется, когда мы подменяем одну другой. Figma не может смэтчить эти слои и красит в родительский цвет, которым покрашен главный компонент.

Чуть дальше мы рассмотрим почему так происходит и научимся объединять слои.

Изменение размера

Предположим, что имеем иконку в размере 16px, которую мы хотим увеличить до 24px. Заливки у иконок нет, а есть линии — Stroke.

Если попробовать изменить размер инструментом move, то размер иконки увеличится, а размер обводки (stroke) — нет. Иконка стала тоньше.

В Figma есть отличный инструмент Scale, с помощью которого мы можем поменять все свойства объекта пропорционально.

⚡️ Этот инструмент можно применять не только к иконкам, но и к любой векторной графике и элементам Figma, чтобы сохранять свойства и пропорции.

В панели инструментов зажимаем Move и выбираем Scale, либо нажимаем на горячую клавишу K и тянем иконку за угол с зажатым Shift, чтобы пропорционально изменить её размеры.

Размер иконки поменялся, а вместе с ним сохранила свои пропорции и толщина обводки.

Почему иконки делают через Stroke мы узнаем дальше.

Взаимодействие дизайнер — разработчик

Во взаимодействии дизайнера и разработчика бывают сложности в силу некоторых причин:

• Дизайнеры — делают иконки разного размера, с дробными величинами, с лишними слоями.
• Разработчики — не видят слои, прокликивают в иконку мимо квадратного фрейма и выгружают совсем не то, что нужно.

Сейчас по шагам разберём, какие проблемы могут вас ждать и как их решить.

Иконки во фрейме

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

Геометрия у иконок разная: квадратная, прямоугольная вертикальная, прямоугольная горизонтальная. От этого могут не правильно отображаться компоненты, в которых есть иконка, если ее подменять. А еще может поехать верстка, потому что у разных иконок — разные размеры.

Решением такой проблемы — унификация всех компонентов. Достаточно положить иконки в квадратный фрейм фиксированного размера и проблема будет решена.

Теперь внутри квадратного фрейма мы можем делать всё что угодно, добавлять иконки любого размера, даже с дробными числами. Главное, что обертка остается всегда фиксированного размера.

Stroke иконки

В готовых паках можно встретить иконки оформленные через обводку. Дизайнеры, которые рисовали эти иконки оставили нам возможность для кастомизации их толщины.

Regular иконки могут быть с толщиной линии 1-1.5px, но вам может понадобится иконки чуть жирнее или менее интенсивнее. Тогда вы с легкостью, поменяв толщину обводки, измените их вид.

Но отдавать разработчику иконки в режиме stroke — плохая идея.

Как мы помним — svg это код. Когда браузер подгрузит иконку, у которой включена обводка, он может неправильно сделать рендер и тогда наша иконка в вебе будет выглядеть плохо. Например, при смене размера иконки в коде.

А ещё у иконки может быть несколько слоёв, каждый из которых отрисовывает определенную часть иконки.

Нам необходимо преобразовать обводку в фигуру (кривые), объединить все слои в группу и слить всё в один слой.

Сделать это довольно просто:

• выбираем иконку;
• выделяем все слои в ней;
• ПКМ — Outline Stroke
  или нажимаем горячую клавишу CMD (CTRL) + Shift + O;
• В верхней панели булевых операций выбираем Union Selection или Flatten Selection.

✨ Отличие Union Selection от Flatten Selection в том, что Union — редактируемая группа слоёв, в которую можно добавить элемент, удалить или подвинуть. Flatten — это монолитная фигура, соединённая точками.

Всё, наши слои стали фигурой и слиты в один. Это порадует разработчика потому что:

• код изображения станет меньше, а значит легче, следовательно подгрузится быстрее на странице;
• разработчик сможет их красить CSS-свойством Fill, но об этом поговорим ниже.

Выгрузка иконок разработчиком и блокировка слоёв

Теперь рассмотрим проблему со стороны фронта. Когда он заходит в наш проект с правами доступа can view, то разработчик не может гибко управлять выделением слоёв и кликает в то, что кликается первым.

Разработчик кликает в иконку и вместо квадратного фрейма выбирает как раз его внутренность — то есть иконку с рандомным размером. Квадратный фрейм он тоже может выбрать, но здесь играет роль человеческий фактор.

Разрешить такую ситуацию поможет блокировка слоя с иконкой. Когда разработчик кликнет в заблокированные слои, то выбрать он их не сможет и выберет только квадратный фрейм.

⚡️ Важно: такой способ работает, только если речь идет о компоненте, который не вложен в какой-либо другой фрейм.

Массовая выгрузка и лайфхак для лучшего взаимодействия

На одном из проектов иконки жили как самостоятельные изображения. Чтобы каждый раз не говорить разработчикам какие иконки мы сменили, не созваниваться и не обсуждать каждую, мы сократили коммуникацию и унифицировали процесс.

Вы можете самостоятельно подготовить все настройки для экспорта и просто рассказать разработчикам как это делать в пару кликов.

• Заводим страницу с иконками или фрейм;
• Выбираем иконки;
• В правой панели нажимаем плюс, рядом с настройкой Export;
• Настраиваем нужный формат, в данном случае SVG.

А дальше нам нужно зайти в Меню — File — Export. В открывшемся окне видим все изображения, которые можно выгрузить. Оставляем все или выбираем необходимые и сохраняем.

Теперь разработчику не нужно искать и выгружать «криво» иконки, достаточно простой манипуляции.

Такой подход хорош в двух случаях:

• если вы добавили новые иконки, то при выгрузке всех иконок разработчик увидит в репозитории новые файлы (если подключен Git, а скорее всего он подключен);
• если вы перерисовали и заменили иконки, то при выгрузке они просто перезапишутся и отобразятся новые (при чем изменения разработчик увидит так же через Git).

⚡️ Важно: синхронизируйте названия иконок в Figma и названия иконок в проекте, чтобы иконки перезаписывались правильно.

Виды иконок в вебе

Бонусный блок для общего понимания, как работают иконки.

Если вы думаете, что изображения в вебе можно отображать только как самостоятельные картинки, то это не так. Сейчас мы рассмотрим несколько вариантов. Это не все способы, но самые популярные.

Самостоятельные изображения

Самостоятельные изображения, это когда каждая иконка хранится отдельным файлом. Ее можно добавить как в html-разметку, так добавить с помощью CSS-свойства background-image.

Так как мы говорим об svg, то такие иконки можно красить через свойство fill прямо в коде, а еще изменять размер.

Поэтому, если в вашем проекте хранятся несколько иконочных библиотек с разными размерами (например 16, 24 и 32px), то для кода будет достаточно одной. Все остальное можно настроить через CSS.

Но такой способ не очень удобен, если в библиотеке большое количество иконок.

В тексте выше мы объединяли несколько объектов через flatten selection, чтобы свойство fill корректно красило наши иконки.

Такой фокус не прокатывает с png изображениями.

Спрайты иконок

Спрайт — одно изображение с сеткой иконок, которые отображаются на странице с помощью позиционирования и ID. Так же поддаются покраске, изменению фона и размера.

Большой отличительной чертой от самостоятельного изображения является скорость загрузки. В первом случае — каждая иконка загружается отдельно. В случае плохого интернета часть иконок может подгрузиться, а часть подвиснуть.

Спрайты работают как с svg, так и png. Отличаются только разными подходами. Сгенерировать svg-спрайт можно на сайте svgsprit.es

Забрасываем иконки и получаем спрайт:

<svg width="0" height="0" class="hidden">
        <symbol version="1.1" id="FigmaLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 32 32">
            <path d="M23.3,11.7c0.2-0.2,0.5-0.3,0.7-0.5c1-1,1.5-2.3,1.5-3.7S24.9,4.8,24,3.8c-1-1-2.3-1.5-3.7-1.5H16h-4.2
            C10.4,2.2,9,2.8,8,3.8c-1,1-1.5,2.3-1.5,3.7s0.6,2.7,1.5,3.7c0.2,0.2,0.4,0.4,0.7,0.5c-0.2,0.2-0.5,0.3-0.7,0.5
            c-1,1-1.5,2.3-1.5,3.7s0.6,2.7,1.5,3.7c0.2,0.2,0.4,0.4,0.7,0.5c-0.8,0.6-1.4,1.3-1.8,2.2c-0.4,1-0.5,2-0.3,3c0.2,1,0.7,2,1.4,2.7
            c0.7,0.7,1.7,1.2,2.7,1.4c1,0.2,2.1,0.1,3-0.3c1-0.4,1.8-1.1,2.4-1.9c0.6-0.9,0.9-1.9,0.9-2.9v-4.2v-0.2c0.9,0.7,2,1.2,3.2,1.2
            c2.9,0,5.2-2.4,5.2-5.2C25.5,14.2,24.6,12.7,23.3,11.7z M22.5,5.2c0.6,0.6,1,1.4,1,2.3s-0.3,1.7-1,2.3s-1.4,1-2.3,1H17V4.2h3.2
            C21.1,4.2,21.9,4.6,22.5,5.2z M9.5,9.8c-0.6-0.6-1-1.4-1-2.3s0.3-1.7,1-2.3s1.4-1,2.3-1H15v6.5h-3.2C10.9,10.8,10.1,10.4,9.5,9.8z
            M9.5,13.7c0.6-0.6,1.4-1,2.3-1H15v6.5h-3.2c-0.9,0-1.7-0.3-2.3-1s-1-1.4-1-2.3S8.8,14.3,9.5,13.7z M15,24.5c0,0.6-0.2,1.3-0.5,1.8
            c-0.4,0.5-0.9,1-1.5,1.2c-0.6,0.2-1.2,0.3-1.9,0.2c-0.6-0.1-1.2-0.4-1.7-0.9c-0.5-0.5-0.8-1-0.9-1.7c-0.1-0.6-0.1-1.3,0.2-1.9
            c0.2-0.6,0.7-1.1,1.2-1.5c0.5-0.4,1.2-0.5,1.8-0.5H15V24.5z M20.2,19.2c-1.8,0-3.2-1.5-3.2-3.2c0-1.8,1.5-3.2,3.2-3.2
            s3.2,1.5,3.2,3.2C23.5,17.8,22,19.2,20.2,19.2z"></path>
        </symbol>
        <symbol version="1.1" id="TelegramLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" viewBox="0 0 32 32">
            <path d="M29.5,4.9c-0.1-0.3-0.3-0.7-0.6-0.9c-0.1-0.1-0.2-0.2-0.4-0.2c0,0,0,0,0,0c-0.2-0.1-0.4-0.2-0.6-0.2c-0.4-0.1-0.7,0-1.1,0.1
            L3.8,12.7c-0.8,0.3-1.3,1.1-1.3,2c0.1,0.9,0.7,1.6,1.6,1.8l5.9,1.2V25c0,0.4,0.1,0.8,0.3,1.1c0.2,0.3,0.5,0.6,0.9,0.7
            c0.2,0.1,0.5,0.1,0.8,0.1c0.1,0,0.3,0,0.4,0c0.4-0.1,0.7-0.3,1-0.6l3.2-3.2l4.9,4.3c0.3,0.2,0.6,0.4,0.9,0.5c0.1,0,0.3,0,0.4,0
            c0.2,0,0.4,0,0.6-0.1c0.3-0.1,0.6-0.3,0.9-0.6c0.2-0.3,0.4-0.6,0.5-0.9l4.7-20.5C29.6,5.6,29.6,5.2,29.5,4.9z M22,7.7l-11.3,8.1
            l-6.2-1.3L22,7.7z M12,25v-5.9l3.2,2.8L12,25z M22.9,26l-10.3-9.1L27.4,6.2L22.9,26z"></path>
        </symbol>
    </svg>

А дальше пользуемся короткими вставками кода привязываясь к ID-иконки:

<svg class="icon">
   <use xlink:href="#FigmaLogo"></use>
</svg>
<svg class="icon">
   <use xlink:href="#TelegramLogo"></use>
</svg>

Мы так же можем менять размер svg-иконки, заливку и обводку:

Иконочный шрифт

Когда вы читаете текст — вы видите буквы, которые подгружаются из файла шрифта. Технически, буквы это такой же вектор как и иконки.

Существуют сервисы, которые генерируют шрифты на основе ваших иконок. Буква на клавиатуре или так называемый юникод, соответствует иконке в шрифте. Вы получаете файлы в формате веб-шрифтов: TTF, EOT, WOFF и SVG.

Иконки подключаются как обычный шрифт и управляются в вебе как текст, с помощью свойств color и font-size.

Минусом такого подхода является слабый интернет. В момент загрузки страницы вместо иконок вы можете наблюдать буквы «a, b, c…«, пока шрифт с иконками не подгрузится и не отобразится.

В целом такой подход некоторые разработчики не приветствуют, аргументируя это дополнительной загрузкой страницы и недоступностью для скринридеров, которые не могут прочитать альтернативную подпись к изображению.

Создать иконочный шрифт можно с помощью сервиса fontastic.me. Не буду подробно останавливаться на этом моменте, сервис имеет человеко-понятный интерфейс:

• создаем шрифт;
• называем его на латинице как необходимо;
• добавляем иконки
• настраиваем;
• скачиваем и подключаем к проекту.

Вы получаете готовый код, который остается просто подключить к проекту и начать использовать. Сервис генерирует демо с иконками и их отношением к шрифту.

После того как всё подключили, можно добавлять иконки на страницу через тег <i>, <span>, <div> или подключать в CSS через background-image.

Заключение

Я постарался максимально вложить в эту статью все свои знания по процессу работы с иконками в инструменте и их дальнейшей передачей.

Такие подходы позволяют мне сократить время общения с разработкой и улучшить процесс взаимодействия.

Способы не исчерпывающие и наверняка, у вас найдется еще 1000 и 1 способ, как улучшить взаимодействие при передаче иконок. Обязательно поделитесь им в комментариях.

Чтобы не пропускать новый материал, подпишись на телеграм-канал Мамкин Дизайнер