Figma — почему меняется изображение после того как его вырезаю?

Question

[Alexander9229]

Есть изображение в дизайне -
После того как изображение вырезаю, оно меняется в вот такое -

Почему это происходит и как можно этого избежать?
Дизайн находится в формате figma - смотреть пример

Comments

[Steppp]

Ну тут уже надо дизайнеру по рукам на давать! Я давненько искал такое, но не нашел! Что я делаю:

Сохраняю в png, чтоб не кривое изображение появилось. И иду в онлайн конвертор , там конвертирую png -> svg и получилось вот так вот! CODEPEN

Если это не устраивает, то можно по искать другие конверторы. Они все по разному конвертируют. Ну уж если и это не помогло, то

Можно в фотошопе залить разными цветами иконку, на новых слоях и сделать svg (да, тяжеловато будет, ну хоть как то!)!

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

Answer 1

[Евгений]

Это косяк фигмы, как вариант через люстру прогнать иконку. Постоянно с таким сталкиваюсь

Answer 2

[Степан Воеводин]

однозначно - дизайнеру было пофиг)
В общем вся проблема в лишних точках


Как вариант решения, это перевести всю обводку в кривые и почистить в Фигме. Чтоб перевести кривые нажмите Ctrl+Shift+O. Он тогда разделит на 2 path и нужно будет уже руками доработать. На выходе получится всё норм:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.8 56.2">
  <path fill="#299c32" d="M28.3 4C15.3 4 4.8 14.5 4.8 27.5c0 5.1 1.7 9.9 4.5 13.8l-3 8.7 9-2.9C19 49.6 23.4 51 28.2 51c13 0 23.5-10.5 23.5-23.5S41.2 4 28.3 4z"/>
  <g fill="#fff">
  <path d="M41.4 33.3c-.1-.1-.3-.1-.4-.2-.7-.3-4-2-4.7-2.2-.6-.2-1.2-.2-1.7.5-.1.1-.2.3-.3.4-.6.8-1.1 1.6-1.6 2.1-.4.4-1.1.5-1.7.3.1-.1 0-.2 0-.2-.9-.4-2.9-1.2-5.3-3.3-2-1.8-3.4-4.1-3.8-4.7-.4-.7-.1-1.1.3-1.4.2-.2.4-.5.6-.7.1-.2.3-.3.4-.5l.1-.1c.3-.4.5-.6.7-1 .2-.5.1-.9-.1-1.3-.1-.2-.8-2-1.4-3.5-.3-.6-.5-1.2-.7-1.6-.5-1.1-.8-1.1-1.5-1.2H19.5c-.9 0-1.8.3-2.4.8l-.1.1c-.7.7-2.3 2.4-2.3 5.7 0 3.3 2.3 6.5 2.8 7 0 0 .1.1.1.2.9 1.3 5.2 7.5 11.6 10.1 5.4 2.2 7 2 8.2 1.8 1.8-.4 4-1.7 4.6-3.3.6-1.6.6-3 .4-3.3-.2-.1-.5-.3-1-.5z"/>
  <path d="M28.3 0C13.1 0 .8 12.3.8 27.5c0 5.3 1.5 10.2 4.1 14.4L0 56.2l14.8-4.7c4 2.2 8.6 3.5 13.5 3.5 15.2 0 27.5-12.3 27.5-27.5S43.4 0 28.3 0zm0 51c-4.8 0-9.2-1.4-12.9-3.9l-9 2.9 2.9-8.7c-2.8-3.9-4.5-8.6-4.5-13.8C4.8 14.5 15.3 4 28.3 4s23.5 10.5 23.5 23.5S41.2 51 28.3 51z"/>
  </g>
</svg>

Только вот viewBox желательно делать, чтоб было целое число