Как узнать свойства svg в illustrator?

Question

[Сергей Васенин]

Подскажите как работать с SVG в илюстратор где узнать все данные о SVG файле что бы их перенести в css

Answer 1

[ой всё]

svg - это текстовый файл, можно открыть в любом текстовом редакторе

Comments

[Сергей Васенин]

ну допустим у меня много SVG объектов и как узнать код каждого?

[ой всё]

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

<g id="Canada" style="fill:#d3d3d3" transform="translate(-959.79,0.708441)">
    <path id="CA-AB" d="M 1259.5,1028.0212 C 1205.9784,1013.8866 1211.7412,1016.0431 ... />
    <g id="CA-BC">
      <path d="M 1047,975.73993 C 1040.6135,971.67741 1031,959.10346 1031,954.81273 ... />
    </g>
</g>

еще по коду цвета можно искать

если не секрет, а что вы переносите в css?

[Сергей Васенин]

ой всё, цель такая...это просто для саморазвития взять карту Казахстана и сделать её интерактивной. я через инспектор нашёл все объекты только не понятно почему у большей половины черный цвет

[Сергей Васенин]

ой всё, тоесть мне нужно объекты на карте сгруппировать в один слой ?

[ой всё]

Сергей Васенин, кстати хорошая идея про сгруппировать
еще можно попробовать перенести цельные объекты в панель символов и дать им названия латиницей, вполне возможно что они пропишутся как id в коде

я вот такую штуку использовала когда-то для интерактивности, пришлось повозиться с svg кодом правда
dmitrybaranovskiy.github.io/raphael/australia.html

черный цвет может быть у областей которые изображают черную обводку, типа они на 1-2 пикселя больше чем основная область, скажем белая, и из под белой виден только черный контур

[Сергей Васенин]

ой всё, Красиво сделано) какой программой пользуетесь для работы с векторной графикой ?

[ой всё]

Сергей Васенин, раньше иллюстратором cs4, но на новый мак он не пролезет
недавно нашла шикарный аналог иллюстратору и фотошопу, сейчас переезжаю на него
https://affinity.serif.com/en-gb/designer/
https://affinity.serif.com/en-gb/photo/

[Сергей Васенин]

ой всё, мак это хорошо..интересно сколько нужно зарабатывать в месяц что бы купить мак xD

[Сергей Васенин]

ой всё, тогда понятно)) но мне больше сёрфис бук нравится

[ой всё]

Сергей Васенин, страшненький, ну и винде отказать в любом виде

Answer 2

[Владимир Бурцев]

SVG можно редактировать в иллюстраторе, но надо понимать что у него природа происхождения другая и все примочки иллюстратора по типу фильтров вы не увидите в таком же виде. Это будет скорее пропарсеный и изменённый эффект. В свою очередь еффекты в scg тоже могут быть искажены при открытии в иллюстраторе или даже потеряны (про анимацию вообще молчу). Если в svg была тень, то в иллюстраторе это может стать картинкой. Зависит от того как был сделан svg.
Как уже написали, svg сам по себе выглядит как текст. Поэтому данные в нём иногда даже можно понять.
Вот у чудика одного интересный видосик был: https://youtu.be/XBdbgD2BaEI (рекомендую)

Comments

[Сергей Васенин]

тоесть вы не советуете использовать illustrator?

[Владимир Бурцев]

Ну почему же?
Лично я делаю svg именно в иллюстраторе. По другому и не пробовал.
Просто иллюстратор не сможет сделать ВСЁ.
Но возможно для ваших задач его хватит.
А может нет.
Мне просто не доводилось работать с svg'шками, в которых есть css-стили и прочая инородная для иллюстратора лабуда, и я не знаю как он себя с ними ведёт.
Но простой вектор он обрабатывает на ура.

[Сергей Васенин]

Владимир Бурцев, мне нужно работать с SVG через css