english | русский

SVGO

SVG Optimizer – это инструмент для оптимизации векторной графики в формате SVG, написанный на Node.js.

Зачем?

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

Возможности

SVGO имеет расширяемую архитектуру, в которой почти каждая оптимизация является отдельным расширением.

Что у нас есть:

| Plugin | Description | Default | | ------ | ----------- | ------- | | cleanupAttrs | удаление переносов строк и лишних пробелов | включен | | inlineStyles | перенос стилей из элементов <style> в атрибуты style | включен | | removeDoctype | удаление doctype | включен | | removeXMLProcInst | удаление XML-инструкций | включен | | removeComments | удаление комментариев | включен | | removeMetadata | удаление <metadata> | включен | | removeTitle | удаление <title> | включен | | removeDesc | удаление <desc> | включен | | removeUselessDefs | удаление элементов в <defs> без id | включен | | removeXMLNS | удаление атрибута xmlns (для заинлайненных svg) | выключено | | removeEditorsNSData | удаление пространств имён различных редакторов, их элементов и атрибутов | включен | | removeEmptyAttrs | удаление пустых атрибутов | включен | | removeHiddenElems | удаление скрытых элементов | включен | | removeEmptyText | удаление пустых текстовых элементов | включен | | removeEmptyContainers | удаление пустых элементов-контейнеров | включен | | removeViewBox | удаление атрибута viewBox, когда это возможно | включен | | cleanupEnableBackground | удаление или оптимизация атрибута enable-background, когда это возможно | включен | | minifyStyles | уменьшает содержимое элементов <style> с помощью CSSO. | включен | | convertStyleToAttrs | конвертирование стилей в атрибуте style в отдельные svg-атрибуты | включен | | convertColors | конвертирование цветовых значений: из rgb() в #rrggbb, из #rrggbb в #rgb | включен | | convertPathData | конвертирование данных Path в относительные или абсолютные координаты, смотря что \|короче; конвертирование одних типов сегментов в другие; удаление ненужных разделителей; умное округление и тому подобное | включен | | convertTransform | схлопывание нескольких трансформаций в одну, конвертирование матриц в короткие алиасы \|и многое другое | включен | | removeUnknownsAndDefaults | удаление неизвестных элементов, контента и атрибутов | включен | | removeNonInheritableGroupAttrs | удаление ненаследуемых "презентационных" атрибутов групп | включен | | removeUselessStrokeAndFill | удаление неиспользуемых атрибутов stroke- и fill- | включен | | removeUnusedNS | удаление деклараций неиспользуемых пространств имён | включен | | prefixIds | добавляет префикс в ID или классы в виде имени файла или произвольной строки | выключено | | cleanupIDs | удаление неиспользуемых и сокращение используемых ID | включен | | cleanupNumericValues | округление дробных чисел до заданной точности, удаление px как единицы \|измерения по-умолчанию | включен | | cleanupListOfValues | округление числовых значений в атрибутах со списком чисел, таких как viewBox \|или enableBackground | выключено | | moveElemsAttrsToGroup | перемещение совпадающих атрибутов у всех элементов внутри группы <g> | включен | | moveGroupAttrsToElems | перемещение некоторых атрибутов группы на элементы внутри | включен | | collapseGroups | схлопывание бесполезных групп <g> | включен | | removeRasterImages | удаление растровых изображений | выключено | | mergePaths | склеивание нескольких Path в одну кривую | включен | | convertShapeToPath | конвертирование простых форм в Path | включен | | convertEllipseToCircle | конвертирование вырожденного эллипса <ellipse> в круг <circle> | включен | | sortAttrs | сортировка атрибутов элементов для удобочитаемости | выключено | | sortDefsChildren | сортировка детей <defs> для лучшей компрессии | включен | | removeDimensions | удаляет атрибуты width/height при наличии viewBox (противоречит removeViewBox — плагин должен быть выключен) | выключено | | removeAttrs | удаляет атрибуты по указанному паттерну | выключено | | removeAttributesBySelector | удаляет атрибуты по CSS-селектору | выключено | | removeElementsByAttr | удаляет элементы по указанным ID или классам | выключено | | addClassesToSVGElement | добавляет имена классов корневому элементу <svg> | выключено | | addAttributesToSVGElement | добавляет атрибуты корневому элементу <svg> | выключено | | removeOffCanvasPaths | удаляет элементы вне отрисовываемой области | выключено | | removeStyleElement | удаляет элементы <style> | выключено | | removeScriptElement | удаляет элементы <script> | выключено | | reusePaths | Заменяет дублирующиеся элементы ссылками | выключено |

Хотите узнать принципы работы и как написать свой плагин? Конечно же, да!

Как использовать

sh $ [sudo] npm install -g svgo

Выполнение:

Командная строка

``` Запуск: svgo [OPTIONS] [ARGS]

Параметры: -h, --help : Помощь -v, --version : Версия программы -i INPUT, --input=INPUT : Входной файл, "-" для STDIN -s STRING, --string=STRING : Входная строка SVG -f FOLDER, --folder=FOLDER : Входная папка, оптимизирует и перезаписывает все файлы .svg -o OUTPUT, --output=OUTPUT : Выходной файл или папка (совпадает с входным по умолчанию), "-" для STDOUT -p PRECISION, --precision=PRECISION : Число цифр после запятой, переопределяет параметры плагинов --config=CONFIG : Файл конфигурации (или строка JSON) для расширения и замены настроек --disable=PLUGIN : Выключение плагина по имени, "--disable=PLUGIN1,PLUGIN2" для отключения нескольких плагинов --enable=PLUGIN : Включение плагина по имени, "--enable=PLUGIN3,PLUGIN4" для отключения нескольких плагинов --datauri=DATAURI : Результат в виде строки Data URI (base64, URI encoded или unencoded) --multipass : Оптимизация в несколько проходов для применения всех возможных оптимизаций --pretty : Удобочитаемое форматирование SVG --indent=INDENT : Размер отступа для удобочитаемого форматирования -r, --recursive : Совместно с '-f'. Рекурсивно обрабатывать .svg файлы в папках. -q, --quiet : Подавляет вывод информации, выводятся только сообщения об ошибках --show-plugins : Доступные плагины

Аргументы: INPUT : Аналогично --input ```

• с файлами:

  sh $ svgo test.svg

  или:

  sh $ svgo *.svg

  sh $ svgo test.svg -o test.min.svg

  sh $ svgo test.svg other.svg third.svg

  sh $ svgo test.svg other.svg third.svg -o test.min.svg -o other.min.svg -o third.min.svg

• со STDIN / STDOUT:

  sh $ cat test.svg | svgo -i - -o - > test.min.svg

• с папками

  sh $ svgo -f ../path/to/folder/with/svg/files

  или:

  sh $ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output

  sh $ svgo *.svg -o ../path/to/folder/with/svg/output

• со строками:

  sh $ svgo -s '<svg version="1.1">test</svg>' -o test.min.svg

  или даже с Data URI base64:

  sh $ svgo -s 'data:image/svg+xml;base64,…' -o test.min.svg

• с SVGZ:

  из .svgz в .svg:

  sh $ gunzip -c test.svgz | svgo -i - -o test.min.svg

  из .svg в .svgz:

  sh $ svgo test.svg -o - | gzip -cfq9 > test.svgz

Другие способы использования SVGO

• в виде веб-приложения - SVGOMG
• как модуль Node.js – examples
• как таск для Grunt – grunt-svgmin
• как таск для Gulp – gulp-svgmin
• как таск для Mimosa – mimosa-minify-svg
• как действие папки в OSX – svgo-osx-folder-action
• через загрузчик webpack – image-webpack-loader
• с помощью бота в Telegram – svgo_bot
• как плагин PostCSS - postcss-svgo
• как плагин для Inkscape – inkscape-svgo
• как плагин для Sketch - svgo-compressor
• в виде приложения macOS - Image Shrinker
• как плагин для Rollup - rollup-plugin-svgo

Лицензия и копирайты

Данное программное обеспечение выпускается под лицензией MIT.

Логотип – Егор Большаков.