Как сохранить svg в иллюстраторе без белого фона?

Question

[malartem]

Нарисовал в люстре иконку, хочу перенести ее в Figma.
Сохраняю ее в svg формате, формат предполагает, что объект можно видоизменять.
Действительно могу менять объект в Figma, но иллюстратор ставит белый фон сзади.
( Мне нужен прозрачный фон )
Как сохранить svg в иллюстраторе без белого фона?

Comments

[zorca]

Откройте SVG-файл в текстовом редакторе и уберите ненужное.

[Froggyweb]

Откройте иллюстратор и уберите контур с бэкграундом :)

Answer 1

[Нерон Лордов]

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

Comments

[Сергей Михайленко]

Я про люстру вообще забыл, как страшный сон. Только Фигма, как все в одном ))

[Нерон Лордов]

Сергей Михайленко, у фигмы пока очень печальная поддержка SVG - при экспорте она разбирает контуры, превращая их в заливки, что автоматом утяжелает файл. Да и рисовать в ней всё-таки неудобно, тут она до люстры еще долго не будет дотягивать.

[malartem]

Nekto_Habr, Спасибо за ваш ответ. В итоге, я разобрался. Оказывается Figma сам вставляла на задний фон прозрачного изображения svg белый фон. Это легко можно убрать в левой панели программы, сняв заливку фона.

[Kadzi]

Нерон Лордов, А как правильно переносить SVG из люстры в фигму? какие настройки должны быть, чтобы не было проблем потом:

[Нерон Лордов]

Kadzi, рад, что ты спросил. Методом гугления, проб и ошибок я для себя решил, что оптимально будет экспортировать 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, а не повторно экспортировать их из фигмы. У фигмы свой векторный движок, который пока не очень хорошо вписывается в устоявшиеся стандарты, и там иконки должны расцениваться чисто как "в демонстрационных целях"

[Kadzi]

Нерон Лордов, спасибо за подробный ответ, нужно будет мне покурить это