lepu-test-platform-web/README.ru.md at master

14 KiB

Raw Permalink Blame History

english | русский

SVGO

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.

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

14 KiB Raw Permalink Blame History Unescape Escape