Как сохранить слои в SVG image > path?

Question

[AllReady]

Добрый день. Скажу сразу, с SVG работал очень мало, AI открываю впервые, работал в основном с иконками svg и просто отображением их на сайте. Возникла проблема с сохранением файла. Необходимо сделать выбор квартир, как на многих сайтах жилищных комплексов. Есть макет в PSD, на нем, раннее вырезали объекты и сохранили как отдельные слои, чтобы при наведении на них - они выделялись.
Когда открываю макет в AI, хочу экспортировать в SVG. Только вот проблема в том, что слои которые вырезали - сохраняются с тегом image. А для данного тега, свойства типа fill не действуют. Подскажите пожалуйста, можно ли сохранить так, чтобы слои были элементами path ?

Comments

[Froggyweb]

Нужно отрисовывать в векторе путями. Можно попробоваь преобразовать картинку в путь но будет очень много мусора

Answer 1

[Андрей]

В таких случайх не достаточно иллюстратора. Сохрани каждый слой отдельным SVG. Потом открой все текстовым редактором и патчи перенеси в группы (каждую группу под свой ID). Тогда прям к CSS сможешь делать fill любому ID

ну или прям в SVG допиши онХовер

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 100">
  <path fill="#f43da0"
	d="M35,0C15.669,0,0,15.715,0,35.101S35,100,35,100s35-45.513,35-64.899S54.33,0,35,0z M35,47.79
	c-6.988,0-12.653-5.681-12.653-12.688c0-7.008,5.665-12.688,12.653-12.688c6.987,0,12.651,5.681,12.651,12.688
	C47.651,42.108,41.987,47.79,35,47.79z">
    <animate fill="freeze" dur="0.1s" to="#3fc1c9" from="#f43da0" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#f43da0" from="#3fc1c9" attributeName="fill" begin="mouseout"/>
  </path>

  </svg>

Answer 2

[DeveloperV]

Ну как я это делаю, может кто с этим столкнется.
Распишу по пунктам:
1)Сохраняем svg в обычном Photoshop
2)Открываем файл в illustrator
3)
4)Сохраняем как
5)Настройки
6)Настройки
7)Удаляем стили, теперь можно использовать fill