16 KiB
						
					
					
				
			
		
		
	
	english | русский
SVGO 
 
 
SVG Optimizer – это инструмент для оптимизации векторной графики в формате SVG, написанный на Node.js.
Зачем?
SVG-файлы, особенно экспортированные из редакторов, содержат много избыточной и бесполезной информации, комментариев, скрытых элементов, неоптимальные или стандартные значения и другой мусор, удаление которого безопасно и не влияет на конечный вид изображения.
Возможности
SVGO имеет расширяемую архитектуру, в которой почти каждая оптимизация является отдельным расширением.
Что у нас есть:
| Plugin | Description | 
|---|---|
| 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 | 
| moveElemsAttrsToGroup | перемещение совпадающих атрибутов у всех элементов внутри группы <g> | 
| moveGroupAttrsToElems | перемещение некоторых атрибутов группы на элементы внутри | 
| collapseGroups | схлопывание бесполезных групп <g> | 
| removeRasterImages | удаление растровых изображений (выключено по умолчанию) | 
| mergePaths | склеивание нескольких Path в одну кривую | 
| convertShapeToPath | конвертирование простых форм в Path | 
| sortAttrs | сортировка атрибутов элементов для удобочитаемости (выключено по умолчанию) | 
| removeDimensions | удаляет атрибуты width/height при наличии viewBox (противоречит removeViewBox — плагин должен быть выключен) (выключено по умолчанию) | 
| removeAttrs | удаляет атрибуты по указанному паттерну (выключено по умолчанию) | 
| removeAttributesBySelector | удаляет атрибуты по CSS-селектору (выключено по умолчанию) | 
| removeElementsByAttr | удаляет элементы по указанным ID или классам (выключено по умолчанию) | 
| addClassesToSVGElement | добавляет имена классов корневому элементу <svg> (выключено по умолчанию) | 
| addAttributesToSVGElement | добавляет атрибуты корневому элементу <svg> (выключено | 
| removeOffCanvasPaths | удаляет элементы вне отрисовываемой области (выключено по умолчанию) | 
| removeStyleElement | удаляет элементы <style> (выключено по умолчанию) | 
| removeScriptElement | удаляет элементы <script> (выключено по умолчанию) | 
| reusePaths | Заменяет дублирующиеся элементы ссылками (выключено по умолчанию) | 
Хотите узнать принципы работы и как написать свой плагин? Конечно же, да!
Как использовать
$ [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.
Логотип – Егор Большаков.