ver2ex/hw-react-1 @ 2389e7160bff4bafb095120fc9414d89e20b492b

english | русский

SVGO

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

Зачем?

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

Возможности

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

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

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

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

$ [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

с файлами:

$ svgo test.svg

или:

$ svgo *.svg

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

$ svgo test.svg other.svg third.svg

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

со STDIN / STDOUT:

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

с папками

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

или:

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

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

со строками:

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

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

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

с SVGZ:

из .svgz в .svg:

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

из .svg в .svgz:

$ 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.

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

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	Заменяет дублирующиеся элементы ссылками	`выключено`

README.ru.md 17 KB Historia Czysty