25: Оптимизация SVG вручную в Illustrator - CSS-хитрости

Anonim

На этом видео было удалено. Я когда-нибудь пересниму его. Если вы читаете это, а я еще этого не сделал, не стесняйтесь обращаться ко мне и сообщать мне об этом.

Иногда SVG, который вы хотите использовать, отлично выглядит в Illustrator, но это не совсем то, как вы хотели бы использовать его в Интернете.

Одна из вещей, на которую мы смотрим в этом видео, - это простая форма, которая выглядит как одна фигура, но на самом деле это четыре фигуры, расположенные друг над другом. Чтобы упростить это, мы просто выбираем все формы и используем инструменты Pathfinder в Illustrator, чтобы объединить их в одну форму. Мы видим, что это сразу отражается в коде. Иногда бывает забавно открыть файл SVG как в Illustrator, так и в редакторе кода, чтобы при его сохранении можно было увидеть, что он делает с кодом.

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

Размер файла SVG в значительной степени определяется количеством точек в фигурах. Есть и другие факторы, но это главное. Еще одна вещь, которую мы рассмотрим в этом видео, - это использование функции Illustrators Simplify Path, чтобы уменьшить количество точек на некоторых текстурных формах, чтобы уменьшить размер файла.

Еще одна вещь, которую нужно знать: составные пути могут быть полезны. Две фигуры, которые полностью отделены друг от друга, могут быть одним путем. Буквально один. Синтаксис позволяет, по сути, «взять перо, переместить его в другое место, нарисовать что-нибудь новое». Поэтому, когда вы создаете составной контур в Illustrator (например, несколько независимых фигур, «Объект»> «Составной контур»> «Создать»), именно так он и выводит. Может привести к упрощенному / оптимизированному выводу SVG.