english | русский
SVG Optimizer – это инструмент для оптимизации векторной графики в формате SVG, написанный на Node.js.
SVG-файлы, особенно – экспортированные из различных редакторов, содержат много избыточной и бесполезной информации, комментариев, скрытых элементов, неоптимальные или стандартные значения и другой мусор, удаление которого безопасно и не влияет на конечный результат отрисовки.
SVGO имеет расширяемую архитектуру, в которой почти каждая оптимизация является отдельным расширением.
Сегодня у нас есть:
- [ 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
илиenableBackground
- [ moveElemsAttrsToGroup ] перемещение совпадающих атрибутов у всех элементов внутри группы
<g>
- [ moveGroupAttrsToElems ] перемещение некоторых атрибутов группы на элементы внутри
- [ collapseGroups ] схлопывание бесполезных групп
<g>
- [ removeRasterImage ] удаление растровых изображений (выключено по умолчанию)
- [ mergePaths ] склеивание нескольких Path в одну кривую
- [ convertShapeToPath ] конвертирование простых форм в Path
- [ sortAttrs ] сортировка атрибутов элементов для удобочитаемости (выключено по умолчанию)
- [ transformsWithOnePath ] применение трансформаций, обрезка по реальной ширине, вертикальное выравнивание по центру и изменение размеров SVG с одним Path внутри
- [ 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 : Файл конфигурации для расширения и замены настроек
--disable=DISABLE : Выключение плагина по имени
--enable=ENABLE : Включение плагина по имени
--datauri=DATAURI : Результат в виде строки Data URI (base64, URI encoded или unencoded)
-q, --quiet : Подавляет вывод информации, выводятся только сообщения об ошибках
--pretty : Удобочитаемое форматирование SVG
--show-plugins : Доступные плагины
--multipass : Оптимизация в несколько проходов
--indent=INDENT : Размер отступа для удобочитаемого форматирования
Аргументы:
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
Данное программное обеспечение выпускается под лицензией MIT.
Логотип – Егор Большаков.