понедельник, 16 ноября 2015 г.

Простой оптимизатор для svg path

Все просто, вставляете в верхнее поле svg path, т.е. то, что находится в d=" " :
<path d="содержимое"></path>
Далее радиокнопками убираете знаки после точки.




Данная оптимизация целесообразна в случае избыточного кода после точки в координатах path. В основном такой код получается при работе с редактором Inkscape (в Inkscape нужно также нажать кнопочку "упростить" или Ctrl+L, без этого бывают непредсказуемые результаты), в Adobe Illustrator после точки наблюдал два знака, оптимизировать можно на 3-8%, нужно это Вам или нет, решайте сами.
Способ основан на методе replace (все работает на стороне клиента, только JavaScript), с помощью цепочки регулярных выражений убираются несколько знаков после точки, а также некоторые ненужные пробелы.
В общем, если Вы видите код типа 
<path d="C38.8071194,50 50,38.8071194 50,25 C50,11.1928806..."></path>

можете смело экспериментировать, у меня получалось чистить до 52%.
Для наглядности можно почистить вот это лого twitter
Twitter
Вот код лого:

Теперь копируем все, что находится в атрибуте d, вставляем в верхнее поле, смело нажимаем на "-5 символов" и получаем экономию в 40%. Копируем получившееся из нижнего поля обратно в атрибут d, и убеждаемся, что никаких изменений не произошло. Вот что получилось у меня:
Twitter
Есть и другие оптимизаторы SVG, например этот (на основе SVGO), которые сожмут целый файл, но мне они показались неудобными при работе с кодом SVG,когда нужна интеграция дизайна в HTML отдельных путей, как при работе с картами. Подведем итоги, изначальный файл весит 2 347 байт, после оптимизации - 869 байт, при оптимизации с помощью SVGO - 1 033 байта.

0 коммент.:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)