sfcode
An Online Competing and Development Environment
README

english | русский


logo

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

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

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

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