На тостере часто спрашивают, поэтому создаю очередную статью, на которую потом буду давать ссылку. Подписывайся на мой бложик, будет еще полезняк и куча фана!
—-
Методом гугления, проб и ошибок я для себя решил, что оптимально будет экспортировать SVG следующим образом.
1) Создаем артборды, рисуем в них иконки. Артбордам присваиваем названия, которые характеризуют сами иконки по отдельности — например, если нарисовали домик, окошко, заборчик: именуем артборды house, window, fence.
2) Раскидываем иконки по разным слоям, имена которых характеризуют наборы иконок. Например, домик, окошко и заборчик запихиваем в слой accommodation (жилье, ну или как сам хочешь), а иконки пистолета, ножа, удавки — в weapons.
3) Каждую иконку нужно теперь сгруппировать и назвать группу «Icon» (ну или как-нибудь нейтрально, может даже Group, хотя Icon лучше подходит, имхо). Даже если иконка состоит из одной кривой — всё равно делаем группу. А на каждом артборде в самый низ стопки объектов пихаем пустой прямоугольник (или квадрат, если артборд квадратный), повторяющий периметр артборда, и называем его Container (или Frame, например) — этот прямоугольник будет обеспечивать нужное пустое пространство вокруг иконки. Следим, чтобы Icon и Container были на правильном «тематическом» слое, тут очень легко запутаться. Я для исключения ошибки отключаю и блокирую слои.
4) Теперь можно экспортировать: File -> Export -> Export for screens со следующими настройками:
—
Такой алгоритм имеет некоторые неочевидные преимущества. Во-первых, такой алгоритм гарантирует корректный просмотр SVG прямо в проводнике (нужно будет установить специальное расширение; я к сожалению забыл, что именно я устанавливал, но думаю нагуглить несложно) — это очень удобно. А другие способы генерации SVG часто показывают черноту вместо иконки.
Во-вторых, ты получаешь файлы, названия которых соответствуют названиям артбордов, а в коде иконки будет упорядоченная структура вида:
— Название файла
— Название слоя
— Контейнер
— Иконка
Думаю, разработчики это оценят, если ты с ними взаимодействуешь.
В-третьих, такой SVG корректно вставится в фигму через обычный drag and drop, и ее рамка выделения будет совпадать с пустым контейнером, а не обволакивать иконку «впритык» к самим кривым.
В-четвертых, настройки со скриншота выше позволяют получать читаемый код SVG, корректный для всех девайсов — десктопа, браузера, мобильников, чего угодно короче.
Разумеется, в разработку нужно отдавать экспортированные из иллюстратора SVG, а не повторно экспортировать их из фигмы. У фигмы свой векторный движок, который пока не очень хорошо вписывается в устоявшиеся стандарты, и там иконки должны расцениваться чисто как «в демонстрационных целях»