Оптимизация вручную. Оптимизируем SVG (Scalable Vector Graphics). Алгоритмы уменьшения изображений

Вот несколько советов, которые помогут вам уменьшить размер файла и повысить удобство пользователя при взаимодействии с интерактивными SVG:

• Все ссылки, которыми пользователь может воспользоваться, размещайте как можно ближе к началу документа, тогда они будут доступны уже на ранних этапах загрузки
• Если браузеры, которые будут отображать иллюстрацию, поддерживают CSS-стили для SVG, то воспользуйтесь всеми преимуществами такого подхода: группировкой и наследованием свойств, в противном случае присвойте общие свойства родительскому тегу «g»
• Используйте возможности тега «path» для более компактной записи: относительные координаты, «h»и «v» для вертикальных и горизонтальных линий, «s» и «t» для задания квадратичных и кубических кривых Безье
• Не забывайте, что SVG предоставляет возможности для многократного использования одних и тех же элементов внутри иллюстрации
• Используйте фильтры, для создания сложных конструкций силами графической системы пользователя
• Если какие-то примитивы перекрывают друг друга, уберите всё, что не видно пользователю — кривые Безье можно заменить линиями, эффекты убрать, контуры «втянуть»
• Попробуйте уменьшить детализацию там, где это не будет заметно: возможно крошечное отверстие будет смотреть не хуже, если сделать его простым многоугольником, а не кривыми Безье
• Эффективнее не выкраивать сложные отверстия в фигурах заднего плана, а наложить нужный контур поверх, ещё одним слоем
• Объединяйте в одну соединённые фигуры, имеющие одну и ту же заливку и градиент
• Старайтесь реже использовать градиент и прозрачность, это сбережёт ресурсы клиентской машины, по той же причине избегайте использования перекрывающихся прозрачных областей