Почему мои элементы перемещаются после экспорта в svg

Я новичок в Adobe Illustrator, но привык к PS.

Я хотел поэкспериментировать с Illustrator, чтобы создать SVG, которыми можно было бы манипулировать с помощью JavaScript.

Я создал какой-то фоновый слой и заполнил его прямоугольником. В качестве фонового изображения используется шаблон ( Adobes Waffelmuster — Doppelt ).

Затем я создал второй слой и добавил к нему несколько заполненных контуров. Я попытался как можно лучше выровнять эти пути с фоновым узором моего первого слоя.

Когда я экспортирую свою графику в формате SVG, мои пути не выравниваются по фону, как в Illustrator. Кажется, они немного сдвинулись вправо. Кроме того, если я увеличу масштаб Firefox (STRG, +), несоответствие станет еще больше.

Почему так и как это предотвратить? Есть ли что-то вроде относительного и абсолютного позиционирования?

Попробуйте поместить нестилизованный («невидимый») прямоугольник (точные размеры и положение объекта фонового слоя) на тот же слой, что и второй слой. Возможно, тогда происхождение и размер окна двух файлов SVG будут одинаковыми.

Ответы (3)

Попробуйте установить флажок «Сохранить возможности редактирования Illustrator» при сохранении, это должно решить проблему.

Кроме того, убедитесь, что:

  • "отзывчивый" не проверяется
  • ваше произведение искусства не больше вашего холста
  • размер вашего холста не содержит десятичных значений

Я использую Illustrator для создания .svg для Интернета, и он работает очень хорошо.

Illustrator сохранить как всплывающее окно

Как человек, проделавший немало работы с кодированием SVG, экспортированных из AI( один пример ), я могу сказать, что проблема в том, что ИИ не экспортирует SVG в формате, подходящем для Интернета. По крайней мере, не полностью.

При использовании SVG, сгенерированных с помощью ИИ, мне всегда приходилось немного массировать позиции, чтобы сохранить пропорции, изначально видимые при рисовании с помощью ИИ. Что касается всего, что связано с путем/градиентом, я не нашел способа экспортировать это из ИИ для имитации в браузере.

В конце концов, единственное НАСТОЯЩЕЕ преимущество разработки ваших SVG в AI — это получение ваших координат. Извините, если это не то, что вы хотели услышать, но я потратил почти 2 недели, пытаясь настроить процесс экспорта с профессиональными пользователями ИИ (более 5 лет), и лучшее, что у нас получилось — заполненные сплошным цветом многоугольники/линии/окружности и т. д., Т.е. вайрфреймы SVG, которые соответствовали (с некоторой погрешностью) тому, что было на ИИ.

Последнее предложение должно было не заканчиваться?
@Johannes, ты абсолютно прав... Исправлено.
Я просто рассмеялся, когда прочитал это, не проблема!
Если моя непреднамеренная ошибка вас рассмешила - я рад, что сделал это тогда :D. Ваше здоровье!

Вместо сохранения в формате .svg попробуйте экспортировать в формате .svg. Это сработало для меня!