Экпорт в SVG. Photoshop, Illustrator, Sketch. Как правильно?

Вопросы коллегам верстальщикам и понимающим дизайнерам.
Столкнулся с двумя проблемами:

1. Показываю на примере. Слой в макете psd, сделан векторной формой, выглядит так:

1947902b1b6e43099b517b0cdb42cf9b.png
Открываю макет в фотошопе, экспортирую слой в svg через Export as - в результате теряется часть информации. Если же воспользоваться функцией Copy SVG и сохранить результат в файл - иконка отображается нормально. Вот фидл - https://jsfiddle.net/f8ohfpv0/
Кто виноват? Я, дизайнер или софт? Что тут можно сделать, кто-нибудь сталкивался с подобным?

2. Иногда графика мне нужна с атрибутами fill и stroke записанными в разметке, а иногда - без этих атрибутов, чтобы была возможность стилизации через CSS. И вот вопрос: есть ли в графических редакторах (конкретно в Фотошопе, Скетче и Иллюстраторе) возможность задавать подобные настройки (стили через атрибуты или через CSS) при экспорте?

IcoMoon, пожалуйста, не предлагайте, он умеет обрезать атрибуты, но не умеет добавлять их на основе CSS. Надеюсь найти решение, которое позволит сразу из графического редактора получать SVG нужного формата.
  • Вопрос задан
  • 2105 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Denis25 Автор вопроса
Знакомый дизайнер показывает, что в Иллюстраторе есть нужная настройка при экспорте

f142d19ccb1743f58631e02237f773d3.png

В фотошопе нашел только это, ни слова про стили

48bca05607094355991ebc5c0768244b.png

Вопрос 1 и вопрос по настройкам экспорта в Скетче и Фотошопе еще актуальны.
Ответ написан
werty1001
@werty1001
undefined
1. По-моему у фотошопа с SVG не задалось давно, если на выходе нужны нормальные иконки, просто просите дизайнера прикладывать их отдельно (как и шрифты), а в макете пусть все будет растровое.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы