Векторные иконки в Sketch

[pvrt]

Можете объяснить почему не стоит рисовать векторные иконки в Sketch?

[nicothin]

Призываю @aalexeev239 ) Андрей, почему?

[aalexeev239]

@pvrt @nicothin скетч при экспорте добавляет ненужные трансформации, неправильно позиционирует артборд, плохо работает с наложением фигур. Экспортируемые тонкие иконки могут не отображаться в некоторых браузерах (особенно firefox).

Нарушаются рекомендации https://svgontheweb.com/ru/#preparation https://sarasoueidan.com/blog/svg-tips-for-designers/

Для правильной работы со скетчем лучше следовать https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694#.eos6y9puh но такой работы я не встечал на практике.

[mrwebic]

@aalexeev239 А с фигмой не сталкивались? Вот какой код она выдала со стрелкой. <svg width="55" height="94" viewBox="0 0 55 94" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0L50 45L0 90" transform="translate(2 2)" stroke="black" stroke-width="4"/> </svg>

[elemeNtk0]

@mrwebic тоже самое: transform="translate(2 2)" не должно быть в иконке. Вообще какие-либо стили лучше вырезать и, при необходимости, прописывать лучше всё-таки в .css

[nicothin]

@mrwebic в норме это должно выглядеть так:

<svg xmlns="http://www.w3.org/2000/svg" width="55" height="94" viewBox="0 0 55 94" 
<path d="M3.338.514L.662 3.486 49.01 47 .662 90.514l2.676 2.972L54.99 47z" />
</svg>

Но это в «моей норме». Я часто (всегда) шью векторные иконки в спрайт (svg>symbol) и вставляю svg>use, при этом не редко приходится менять цвет по ховеру на родителе (ссылке, чаще всего), мне удобно делать это через fill, чтобы не лезть в код иконки и не смотреть какой эквивалент презентационного атрибута я должен менять ))