Оптимизация SVG: уменьшение с 100 КБ до 10 КБ

Утилиты

Необходимость оптимизации SVG

Неоптимизированные SVG содержат много избыточной информации—метаданные редактора, атрибуты по умолчанию, излишняя точность, пробелы.

Источник Типичный размер Оптимизировано Сокращение
Экспорт из Figma 45КБ 5КБ 89%
Экспорт из Illustrator 80КБ 8КБ 90%
Экспорт из Inkscape 120КБ 12КБ 90%
SVG вручную 15КБ 3КБ 80%

1. Очистка избыточной информации

Метаданные редактора

<!-- Избыточная информация, сгенерированная Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:serif="http://www.serif.com/"
     id="Artboard1"
     serif:id="Artboard 1"
     viewBox="0 0 800 600">
  <!-- serif:id, xmlns:serif и т.д. бесполезны -->
</svg>

<!-- Оптимизировано -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
</svg>

Атрибуты по умолчанию

<!-- Значения по умолчанию не нужно объявлять явно -->
<rect x="0" y="0" width="100" height="100" fill="black" stroke="none" opacity="1"/>

<!-- Оптимизировано -->
<rect width="100" height="100"/>
Атрибут Значение по умолчанию Условие удаления
fill black Унаследован от родительского элемента
stroke none Без обводки
opacity 1 Полностью непрозрачный
x / y 0 В начале координат
stroke-width 1 Ширина по умолчанию
font-size Унаследован Как у родительского элемента

2. Оптимизация путей

Уменьшение точности

<!-- 6 знаков после запятой — избыточная точность -->
<path d="M12.345678 23.456789 L34.567890 45.678901"/>

<!-- 2 знака обычно достаточно (единицы системы координат SVG) -->
<path d="M12.35 23.46L34.57 45.68"/>
Точность Размер Визуальная разница
6 знаков 100% Нет
3 знака 60% Нет (невидимо в viewport 1000px)
2 знака 50% Минимальная
1 знак 40% Приемлемо для маленьких иконок

Объединение команд

<!-- Несколько команд L можно объединить -->
<path d="M10 20 L30 40 L50 60 L70 80"/>

<!-- Объединено (неявный L) -->
<path d="M10 20 30 40 50 60 70 80"/>

Упрощение кривых

<!-- Сложная кривая Безье -->
<path d="M0 0C0.12 0.34 0.45 0.67 1 1C1.34 1.23 1.56 1.78 2 2"/>

<!-- Если кривизна близка к прямой, можно упростить до L -->
<path d="M0 0L1 1 2 2"/>

3. Объединение фигур

Объединение элементов с одинаковым стилем

<!-- Три круга с одинаковым стилем -->
<circle cx="10" cy="10" r="5" fill="red"/>
<circle cx="30" cy="10" r="5" fill="red"/>
<circle cx="50" cy="10" r="5" fill="red"/>

<!-- Объединены в один path -->
<path d="M5 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M25 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0M45 10a5 5 0 1 0 10 0a5 5 0 1 0-10 0" fill="red"/>

Повторное использование с <use>

<!-- Повторяющиеся элементы через <use> -->
<defs>
  <circle id="dot" r="5" fill="red"/>
</defs>
<use href="#dot" x="10" y="10"/>
<use href="#dot" x="30" y="10"/>
<use href="#dot" x="50" y="10"/>

4. Автоматическая оптимизация с SVGO

Установка

npm install -g svgo

Использование из командной строки

# Оптимизация одного файла
svgo input.svg

# Указать вывод
svgo input.svg -o output.svg

# Пакетная оптимизация
svgo -f ./icons/

# Посмотреть результат оптимизации
svgo input.svg --show-results

Файл конфигурации

// svgo.config.js
module.exports = {
  multipass: true,  // Многопроходная оптимизация
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'minifyStyles',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'removeHiddenElems',
    'cleanupNumericValues',
    {
      name: 'cleanupNumericValues',
      params: { floatPrecision: 2 },
    },
    {
      name: 'convertPathData',
      params: {
        floatPrecision: 2,
        transformPrecision: 2,
        makeArcs: true,
      },
    },
    'removeDimensions',  // Удалить width/height, использовать viewBox
    'removeViewBox',     // Или сохранить viewBox, удалить dimensions
  ],
};

API Node.js

const { optimize } = require('svgo');

const result = optimize(svgString, {
  path: 'icon.svg',
  multipass: true,
  plugins: [
    { name: 'cleanupNumericValues', params: { floatPrecision: 2 } },
  ],
});

console.log(result.data); // Оптимизированный SVG

5. Оптимизация SVG с помощью инструмента

Шаги

  1. Откройте инструмент форматирования SVG
  2. Вставьте или загрузите код SVG
  3. Нажмите кнопку «Оптимизировать»
  4. Сравните до и после оптимизации:
    • Исходный размер → Оптимизированный размер
    • Процент сокращения
  5. Скопируйте оптимизированный результат или скачайте

6. Оптимизация SVG Sprite

Встроенный Sprite

<!-- Скрытые определения SVG -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
  </symbol>
</svg>

<!-- Использование -->
<svg><use href="#icon-home"/></svg>
<svg><use href="#icon-search"/></svg>

Автоматическая генерация Sprite

// Использовать svg-sprite для автоматической генерации
const SVGSprite = require('svg-sprite');

const config = {
  mode: {
    symbol: true,  // Генерировать режим <symbol>
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
  },
};

const spriter = new SVGSprite(config);
// Добавить SVG-файлы и скомпилировать

7. Чеклист оптимизации производительности

Оптимизация Эффект Приоритет
Удалить метаданные редактора -20~40% P0
Уменьшить числовую точность -10~30% P0
Объединить команды путей -5~15% P1
Удалить атрибуты по умолчанию -5~10% P1
Преобразовать фигуры в пути -5~10% P2
Удалить пробелы/комментарии -2~5% P2
Сжатие Gzip/Brotli -50~70% P0

Примечание: SVG — текстовый формат, сжатие Gzip/Brotli очень эффективно. Обязательно включите его на сервере.

#SVG#图片优化#图标#压缩#前端