Правильный экспорт SVG

Подготовка документа для анимации -- важный этап, к которому нельзя относиться пренебрежительно, так как это может обернуться весьма неприятными последствиями. Давайте рассмотрим, какие существуют особенности экспорта SVG в Adobe Illustrator.

В данной заметке мы не будем учить, как лучше всего рисовать в Illustrator. Но скажем полезную вещь: при отрисовке фигур очень важно следить за значениями, причем весьма желательно, чтобы они имели только одно число после запятой, а в идеале -- вообще были целыми. Конечно, совсем не обязательно всегда следовать этому правилу, однако если вы будете это делать, то имейте в виду, что в результате:

  • уменьшится размер файла,
  • упростится дальнейшая анимация,
  • визуально сократится объем информации.

Рассмотрим пример:

В нем реализована одна и та же кривая, однако в 1-м случае мы видим одну цифру после запятой, тогда как во 2-м их три. Сама кривая состоит всего из четырех точек, причем обратите внимание, что 2-й пример на одну треть длиннее 1-го. А теперь представьте, насколько больше места займет кривая, если она будет состоять из 20-ти точек...

Хорошо, каркас мы нарисовали, теперь хотим сохранить изображение в качестве SVG-файла. У нас существуют для этого 2 пути:

  • «Сохранить как»;
  • «Экспортировать как».

Какой из них лучше? Мы рекомендуем первый: «Сохранить как». Почему, если на первый взгляд никакой разницы нет, ведь мы и так, и эдак получим файл с изображением и с расширением .svg? Однако отличия есть, и начинаются они еще на этапе параметров экспорта.

Очевидно, что в случае с вариантом «Сохранить как» мы имеем гораздо больше настроек, что уже является весомым аргументом для использования именно этого варианта. Однако продолжим.

Если мы откроем файлы, которые сохранены 2-мя способами в веб-браузере, то не увидим разницы, но только на первый взгляд. Но ведь нас больше интересует не внешний вид, а начинка, поэтому лучше всего выполнить открытие через текстовый редактор. И вот здесь отличия станут более очевидными. Впрочем, лучше попробуйте выполнить это сами, что позволит вам сделать однозначные выводы.

По материалам https://habr.com/ru/post/450924/.