sfcode An Online Competing and Development Environment

README

english | русский

## SVGO <a href="https://npmjs.org/package/svgo"><img src="https://badge.fury.io/js/svgo.svg" alt="NPM version"/></a> <a href="https://travis-ci.org/svg/svgo"><img src="https://secure.travis-ci.org/svg/svgo.svg" alt="Build Status"/></a> <a href="https://coveralls.io/r/svg/svgo?branch=master"><img src="https://img.shields.io/coveralls/svg/svgo.svg" alt="Coverage Status"/></a>

SVG **O**ptimizer – это инструмент для оптимизации векторной графики в формате 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 | Заменяет дублирующиеся элементы <path> ссылками <use> | `выключено`

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

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

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

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