README.ru.md 13.8 KB

english | русский


logo

SVGO NPM version Dependency Status Build Status Coverage Status

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

Зачем?

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

Возможности

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

Сегодня у нас есть:

Plugin Description
cleanupAttrs удаление переносов строк и лишних пробелов
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 удаление деклараций неиспользуемых пространств имён
cleanupIDs удаление неиспользуемых и сокращение используемых ID
cleanupNumericValues округление дробных чисел до заданной точности, удаление px как единицы
cleanupListOfValues округление числовых значений в атрибутах со списком чисел, таких как viewBox
moveElemsAttrsToGroup перемещение совпадающих атрибутов у всех элементов внутри группы <g>
moveGroupAttrsToElems перемещение некоторых атрибутов группы на элементы внутри
collapseGroups схлопывание бесполезных групп <g>
removeRasterImage удаление растровых изображений (выключено по умолчанию)
mergePaths склеивание нескольких Path в одну кривую
convertShapeToPath конвертирование простых форм в Path
sortAttrs сортировка атрибутов элементов для удобочитаемости (выключено по умолчанию)
transformsWithOnePath применение трансформаций, обрезка по реальной ширине, вертикальное
removeDimensions удаляет атрибуты width/height при наличии viewBox (выключено по умолчанию)
removeAttrs удаляет атрибуты по указанному паттерну (выключено по умолчанию)
removeElementsByAttr удаляет элементы по указанным ID или классам (выключено по умолчанию)
addClassesToSVGElement добавляет имена классов корневому элементу <svg> (выключено по умолчанию)
addAttributesToSVGElement добавляет атрибуты корневому элементу <svg> (выключено
removeStyleElement удаляет элементы <style> (выключено по умолчанию)

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

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

$ [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=DISABLE : Выключение плагина по имени
  --enable=ENABLE : Включение плагина по имени
  --datauri=DATAURI : Результат в виде строки Data URI (base64, URI encoded или unencoded)
  --multipass : Оптимизация в несколько проходов
  --pretty : Удобочитаемое форматирование SVG
  --indent=INDENT : Размер отступа для удобочитаемого форматирования
  -q, --quiet : Подавляет вывод информации, выводятся только сообщения об ошибках
  --show-plugins : Доступные плагины

Аргументы:
  INPUT : Аналогично --input
  OUTPUT : Аналогично --output
  • с файлами:

    $ svgo test.svg
    

    или:

    $ svgo test.svg test.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 -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
    
  • с помощью GUI – svgo-gui

  • в виде веб-приложения - 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

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

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

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