Справочник по плагинам SVGO
Подробное руководство по каждому плагину SVGO, представленному в интерфейсе SVGOMG.ru. На отдельных страницах объясняется, что именно делает каждое преобразование, когда его стоит включать и с какими подводными камнями можно столкнуться.
Тематические руководства
- Удаление метаданных и мусора редакторов
Вырезайте doctype, XML-пролог, комментарии, метаданные и специфические атрибуты графических редакторов из экспортированных SVG для создания легковесных файлов, готовых к вебу.
- Оптимизация контуров и геометрии
Округляйте координаты контуров, объединяйте фигуры, схлопывайте группы и удаляйте графику за пределами холста, чтобы уменьшить сложные файлы из Illustrator и Figma.
- ID, блоки defs и ссылки
Очищайте ID, секции defs, градиенты и ссылки вида url(#…), чтобы неиспользуемые определения и дублирующиеся ID не раздували ваш SVG.
- Стили и CSS в SVG
Объединяйте, инлайните и минифицируйте внутренние стили, или удаляйте блоки style после того, как правила перенесены напрямую на элементы.
- Адаптивный размер SVG
Используйте viewBox и дружественные к CSS размеры: удаляйте фиксированные width/height, округляйте числовые значения и сохраняйте масштабируемость иконок.
- Скрытая и неиспользуемая разметка
Удаляйте скрытые слои, пустые контейнеры, пустые текстовые узлы и избыточные атрибуты обводки и заливки из файлов графических редакторов.
- Атрибуты и пространства имен
Нормализуйте атрибуты, удаляйте избыточные пространства имен, сортируйте атрибуты и избавляйтесь от неизвестных или дефолтных значений.
- Преобразования, которые могут сломать SVG
Плагины SVGO, которые чаще всего вызывают проблемы с вёрсткой, масштабированием или встроенным контентом — отключайте их первыми, если результат выглядит некорректно.
Популярные плагины
- Удалить атрибут viewBox
removeViewBox - Очистить неиспользуемые ID
cleanupIds - Оптимизировать геометрию контуров (path)
convertPathData - Удалить тег <metadata>
removeMetadata - Объединить контуры (path)
mergePaths - Удалить скрытые элементы
removeHiddenElems - Инлайнить стили
inlineStyles - Заменить width/height на viewBox
removeDimensions
Все плагины (А–Я)
- Удалить DOCTYPE
removeDoctype - Удалить XML-инструкции
removeXMLProcInst - Удалить комментарии
removeComments - Удалить тег <metadata>
removeMetadata - Удалить атрибут xmlns
removeXMLNS - Удалить метаданные редакторов
removeEditorsNSData - Очистить лишние пробелы в атрибутах
cleanupAttrs - Объединить стили
mergeStyles - Инлайнить стили
inlineStyles - Минифицировать стили
minifyStyles - Конвертировать стили в атрибуты
convertStyleToAttrs - Очистить неиспользуемые ID
cleanupIds - Удалить растровые изображения (PNG/JPG)
removeRasterImages - Удалить неиспользуемые элементы в <defs>
removeUselessDefs - Округлить / оптимизировать числа
cleanupNumericValues - Округлить / оптимизировать списки чисел
cleanupListOfValues - Оптимизировать цвета
convertColors - Удалить неизвестные теги и значения по умолчанию
removeUnknownsAndDefaults - Удалить лишние атрибуты групп
removeNonInheritableGroupAttrs - Удалить неиспользуемую обводку и заливку
removeUselessStrokeAndFill - Удалить атрибут viewBox
removeViewBox - Очистить / удалить enable-background
cleanupEnableBackground - Удалить скрытые элементы
removeHiddenElems - Удалить пустые текстовые теги
removeEmptyText - Конвертировать фигуры в контуры (path)
convertShapeToPath - Переместить атрибуты в родительскую группу
moveElemsAttrsToGroup - Переместить атрибуты группы в элементы
moveGroupAttrsToElems - Объединить пустые / лишние группы
collapseGroups - Оптимизировать геометрию контуров (path)
convertPathData - Конвертировать правильные <ellipse> в <circle>
convertEllipseToCircle - Оптимизировать трансформации (transform)
convertTransform - Удалить пустые атрибуты
removeEmptyAttrs - Удалить пустые контейнеры
removeEmptyContainers - Объединить контуры (path)
mergePaths - Удалить неиспользуемые пространства имен
removeUnusedNS - Заменить дубликаты элементов ссылками <use>
reusePaths - Сортировать атрибуты для лучшего сжатия
sortAttrs - Сортировать вложенные элементы в <defs>
sortDefsChildren - Удалить тег <title>
removeTitle - Удалить тег <desc>
removeDesc - Заменить width/height на viewBox
removeDimensions - Удалить теги <style>
removeStyleElement - Удалить JS-скрипты (<script>)
removeScripts - Удалить контуры за пределами холста
removeOffCanvasPaths