- PVSM.RU - https://www.pvsm.ru -

Машинки на чистом SVG

В последнее время для меня большим вдохновением является SVG-анимация. С её момощью можно делать из простых элементов впечатляющие вещи. Например, сегодня я закончил делать демку про машинки и с радостью написал об этом себе в блог [1].

Нарушать правила хабра мне бы не хотелось, поэтому напишу пару слов о процессе. В спецификации SVG есть раздел про анимацию [2], в котором здорово описано как должны клиенты (например, браузеры) выполнять анимацию. В теории получается очень красиво, но пока не попробуешь сделать что-то своими руками — не поймешь.

Я решил для практики — взять из какого-нибудь клипарата векторный автомобильчик и поиграть с ним. Легко сказать — одно изображение в среднем весит около 24Кб. Оказывается, картинки рисуют в векторных редакторах без специальных настроек. В результате получается, что простой контур(элемент path) автомобиля состоит из заведомо избыточной простыни координат. По умолчанию Inkscape делает координаты относительными и в результате множество чисел становится отрицательными. Кроме того количество знаков после точки может достигать 4-5.
Вывод: если не лениться, то на грамотной оптимизации изображения можно сэкономить порядка 5-7Кб из 24Кб.

Кто-то скажет, что экономить на спичках не интересно. Возражу, уменьшив количество точек в элементе path и снизив количество элементов в результирующем DOM-дереве можно облегчить жизнь браузеру и разгрузить компьютер пользователя.

После получения оптимизированного SVG-автомобиля я заметил, что в FirefoxOpera контур получился гладким, а в Chromium он весь в зазубринах. Если специалисты подскажут в чем дело — буду признателен.

После создания самих анимаций в процессе проверки их работы в разных браузерах я обнаружил следующее:
1. Firefox значительно больше нагружает процессор, чем это делают Opera и Chromium.
2. Анимация со сплайнами без особых проблем заработала в Opera, а в Firefox и Chromium ведет себя довольно капризно и в моем случае даже не удалось подобрать работающую комбинацию для обоих браузеров.

Если у кого-нибудь есть пример неравномерной анимации которая работает во всех браузерах — скажу спасибо за ссылку.

Автор: ainte


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/firefox-2/6442

Ссылки в тексте:

[1] написал об этом себе в блог: http://y3x.ru/2012/04/svg-demos-handmade/

[2] раздел про анимацию: http://www.w3.org/TR/SVG/animate.html