Svg-edit

W3C Recommendation 16 August 2011

This version:
http://www.w3.org/TR/2011/REC-SVG11-20110816/
Latest version:
http://www.w3.org/TR/SVG11/
Previous version:
http://www.w3.org/TR/2011/PR-SVG11-20110609/
Public comments:
www-svg@w3.org (archive)
Editors:
Erik Dahlström, Opera Software ed@opera.com>
Patrick Dengler, Microsoft Corporation patd@microsoft.com>
Anthony Grasso, Canon Inc. anthony.grasso@cisra.canon.com.au>
Chris Lilley, W3C chris@w3.org>
Cameron McCormack, Mozilla Corporation cam@mcc.id.au>
Doug Schepers, W3C schepers@w3.org>
Jonathan Watt, Mozilla Corporation jwatt@jwatt.org>
Jon Ferraiolo, ex Adobe Systems jferrai@us.ibm.com> (Versions 1.0 and 1.1 First Edition; until 10 May 2006)
藤沢 淳 (FUJISAWA Jun), Canon Inc. fujisawa.jun@canon.co.jp> (Version 1.1 First Edition)
Dean Jackson, ex W3C dean@w3.org> (Version 1.1 First Edition; until February 2007)

Please refer to the errata for this document, which may include some normative corrections.

This document is also available in these non-normative formats: a
single-page version, a
zip archive of HTML (without external dependencies),
and a PDF.
See also translations, noting that the English version of this specification is the only normative version.

Extracting metadata from combined svg

You can extract data with cheerio.

The following example extracts viewBox and id from each symbol in combined svg.

var gulp = require('gulp');
var Vinyl = require('vinyl');
var svgstore = require('gulp-svgstore');
var through2 = require('through2');
var cheerio = require('cheerio');

gulp.task('metadata', function () {
    return gulp
        .src('test/src/*.svg')
        .pipe(svgstore())
        .pipe(through2.obj(function (file, encoding, cb) {
            var $ = cheerio.load(file.contents.toString(), {xmlMode true});
            var data = $('svg > symbol').map(function () {
                return {
                    name $(this).attr('id'),
                    viewBox $(this).attr('viewBox')
                };
            }).get();
            var jsonFile = new Vinyl({
                path 'metadata.json',
                contents Buffer.from(JSON.stringify(data))
            });
            this.push(jsonFile);
            this.push(file);
            cb();
        }))
        .pipe(gulp.dest('test/dest'));
});

2D / 3D и анимации

14. Daz Studio — 3D-модели, 3D-анимации для Windows и Mac

Если вы хотите начать изучать 3D дизайн и анимацию, установите DAZ Studio. Вы получите в свое распоряжение достаточное количество учебных пособий, которые сделают вас «ниндзя» 3D-анимации, независимо от того, каков ваш уровень на данный момент:


С помощью DAZ Studio можно создавать собственных 3D-персонажей, аватары, элементы графического дизайна.

Создавайте свои собственные короткометражные фильмы и анимацию, иллюстрации для книг и журналов и т.д. Это бесплатное программное обеспечение будет весьма полезно при изучении 3D.

15. Sculptris — программное обеспечение для разработки 3D под Windows и Mac

Если вы хотите раскрыть свой потенциал в 3D-скульптуре, 3D-живописи, то Pixologic поможет в этом.

Это инструмент для 3D-моделирования с мощными функциями, которые помогут вам освоиться в мире цифровой реальности. Если вы новичок в 3D-скульптуре и 3D-живописи, то Sculptris — это лучшая точка, с которой можно начать.

Одна из лучших графических программ для создания 3D-проектов. Это программное обеспечение с открытым исходным кодом, которое можно бесплатно загрузить и установить на Windows, Mac OS X, Linux и т.д.:

Blender содержит множество пособий по 3D и галерею ранее созданных проектов, доступных для скачивания. Также существует активное сообщество, участники которого готовы ответить на ваши вопросы.

17. Google SketchUp — 3D для каждого на Windows и Mac

3D SketchUp до сих пор является самым простым способом рисования в 3D. Это мощное программное обеспечение для 3D-моделирования, позволяющее быстро создавать 3D-объекты. Программа очень проста в использовании.

18. 3D Canvas — программное обеспечение для 3D-моделирования под ОС Windows

Представляет собой интуитивно понятное программное обеспечение для 3D-моделирования в режиме реального времени и 3D-анимации. Оно предоставляет инструменты для простого управления 3D-сценой с функциями drag-and-drop:


Это программа для графического дизайна, разработанная Amabilis Software. Она доступна в трех версиях — 3D Crafter, 3D Crafter Plus и 3D Crafter Pro. Базовая версия является бесплатной, в то время как Pro и Plus — платные. Программа работает на Windows 7/8/Vista.

Программное обеспечение с открытым исходным кодом для 3D-моделирования и визуализации. Оно написано на Java, так что это мощная программа для 3D-дизайна, которую можно использовать на многих виртуальных машинах Java.

На сайте проекта можно найти много пособий, галереи работ. Кроме этого активные участники форума всегда готовы прийти на помощь. Поэтому, даже если вы новичок в 3D-моделировании и только делаете первые шаги, Art of Illusion идеально подойдет для вас.

20. Anim8or — программное обеспечение для 3D-моделирования под Windows

Одна из старейших программ для 3D моделирования, которая представлена еще в 1999 году и до сих пор активно используется во всем мире. Она предназначена в основном для 3D-моделирования и анимации персонажей под Windows:

Anim8or включает в себя множество мощных функций: инструмент для создания и изменения 3D-моделей, поддержка шрифтов TrueType, встроенный браузер 3D-объектов, редактор персонажей Joint и многое другое.

Векторная графика

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

Самые популярные векторные форматы: SVG, AI.

Векторное изображение и его увеличенный фрагмент

Применение

Векторная графика используется для иллюстраций, иконок, логотипов и технических чертежей, но сложна для воспроизведения фотореалистичных изображений. Самый популярный редактор векторной графики — Adobe Illustrator.

Пример использования векторной графики: социальные иконки (источник изображения: MacKenzie www.freevector.com/social-websites-icons)
Пример использования векторной графики: иллюстрация (автор изображения: Катя Климович)

Преимущества

  • Малый объём занимаемой памяти — векторные изображения имеют меньший размер, так как содержат в себе малое количество информации.
  • Векторные изображения отлично масштабируются — можно бесконечно изменять размер изображения без потерь качества.

Недостатки

  • Чтобы отобразить векторное изображение требуется произвести ряд вычислений, соответственно, сложные изображения могут требовать повышенных вычислительных мощностей.
  • Не каждая графическая сцена может быть представлена в векторном виде: для сложного изображения с широкой цветовой гаммой может потребоваться огромное количество точек и кривых, что сведёт «на нет» все преимущества векторной графики.
  • Процесс создания и редактирования векторной графики отличается от привычной многим модели — для работы с вектором потребуются дополнительные знания.

Transform svg sources or combined svg

To transform either svg sources or combined svg you may pipe your files through
gulp-cheerio.

Transform svg sources

An example below removes all fill attributes from svg sources before combining them.
Please note that you have to set to parse svgs as xml file.

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var cheerio = require('gulp-cheerio');

gulp.task('svgstore', function () {
    return gulp
        .src('test/src/*.svg')
        .pipe(cheerio({
            run function ($) {
                $('').removeAttr('fill');
            },
            parserOptions { xmlMode true }
        }))
        .pipe(svgstore({ inlineSvg true })
        .pipe(gulp.dest('test/dest'));
});

Transform combined svg

The following example sets on the combined svg:
(beware if you use gradients and masks, display:none breaks those and just show
nothing, best method is to use the )

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var cheerio = require('gulp-cheerio');

gulp.task('svgstore', function () {
    return gulp
        .src('test/src/*.svg')
        .pipe(svgstore({ inlineSvg true }))
        .pipe(cheerio({
            run function ($) {
                $('svg').attr('style',  'display:none');
            },
            parserOptions { xmlMode true }
        }))
        .pipe(gulp.dest('test/dest'));
});

Usage

The following script will combine all svg sources into single svg file with elements.
The name of result svg is the base directory name of the first file .

Additionally pass through gulp-svgmin
to minify svg and ensure unique ids.

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var svgmin = require('gulp-svgmin');
var path = require('path');

gulp.task('svgstore', function () {
    return gulp
        .src('test/src/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins 
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('test/dest'));
});

Inlining svgstore result into html body

To inline combined svg into html body I suggest using gulp-inject.
The following gulp task will inject svg into

In your html file (using to fix the gradients):

div class="visuallyhidden">
  
div>

In your gulp tasks:

var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var inject = require('gulp-inject');

gulp.task('svgstore', function () {
    var svgs = gulp
        .src('test/src/*.svg')
        .pipe(svgstore({ inlineSvg true }));

    function fileContents (filePath, file) {
        return file.contents.toString();
    }

    return gulp
        .src('test/src/inline-svg.html')
        .pipe(inject(svgs, { transform fileContents }))
        .pipe(gulp.dest('test/dest'));
});

Generating id attributes

Id of symbol element is calculated from file name. You cannot pass files with the same name,
because id should be unique.

If you need to add prefix to each id, please use :

var gulp = require('gulp');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');

gulp.task('default', function () {
    return gulp
        .src('src/svg/**/*.svg', { base 'src/svg' })
        .pipe(rename({prefix 'icon-'}))
        .pipe(svgstore())
        .pipe(gulp.dest('dest'));
});

If you need to have nested directories that may have files with the same name, please
use . The following example will concatenate relative path with the name of the file,
e.g. becomes .

var gulp = require('gulp');
var path = require('path');
var rename = require('gulp-rename');
var svgstore = require('gulp-svgstore');

gulp.task('default', function () {
    return gulp
        .src('src/svg/**/*.svg', { base 'src/svg' })
        .pipe(rename(function (file) {
            var name = file.dirname.split(path.sep);
            name.push(file.basename);
            file.basename = name.join('-');
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('dest'));
});

Using svg as external file

There is a problem with in Internet Explorer,
so you should either inline everything into body with a
simple script like this or
polyfill with svg4everybody.

⇡#«Рисунки Google» — самый простой векторный редактор, который всегда под рукой

Самый известный, простой и доступный онлайновый векторный редактор — это «Рисунки» в сервисе «Google Диск». Это веб-приложение входит в состав онлайнового офиса от Google и больше ориентировано на совместную работу и добавление графических элементов в офисные документы других типов, чем на создание векторной графики. Однако все же некоторые базовые средства для работы с ней тут имеются.

При помощи веб-приложения «Рисунки» можно создавать различные фигуры, стрелки, выноски, графические элементы формул, добавлять прямые линии, кривые, ломаные, стрелки и каракули. Также доступно добавление текстовых элементов, импорт растровых изображений. Векторные рисунки импортировать можно, но редактировать — нет (доступен только просмотр).

К любому элементу векторного рисунка можно добавлять комментарии, а готовым проектом можно поделиться с избранными пользователями либо сделать его общедоступным для просмотра или даже для редактирования.

How does Inkscape implement SVG?

Inkscape prides itself on being a fully standard-compliant SVG editor. As of March 2015, it even supports rendering of SVG properties which are not yet officially part of the standard, but have reached a stable state in the SVG Working Group’s draft for SVG 2.0. Those include hatched patterns, the fill/stroke painting order and CSS blending modes. Currently, those are not yet editable via the GUI, but can be changed by editing the attributes in the XML editor, of course.

Mesh gradients are also already implemented in the development version of Inkscape, but not available in 0.91 yet. The standardization process for this feature stabilized only recently and there is still a lot of work to be done on the user interface to make editing mesh gradients comfortable.

Work has already started on the implementation of CSS-based text in a shape.

Although all these functionalities make Inkscape nearly a complete reflection of the current and drafted SVG standard, there are also a few features which are ‘missing’ for various reasons. Inkscape does not implement the tiling filter, there is no animation, nor is there current work ongoing to make Inkscape an editor for SVG animations, which would require a very large amount of work on the GUI and the underlying animation functions. SVG fonts, which are part of the SVG 1.1 specification, have been dropped from the draft for SVG 2.0. They will be replaced by .

The only thing in Inkscape which currently is not standard-compliant is . This is because the standardization process for SVG 1.2, where flowed text was supposed to be included, was interrupted. But by then, the feature was already in the software, and it was useful for many users. As a result, the Inkscape developers did not just take it away again, but rather kept it in, so people can dynamically edit their texts from within Inkscape.

ES6 Modules file

  1. is an HTML file directly using ES6 modules.
    It is only supported in the latest browsers. It is probably mostly
    useful for debugging, as it requires more network requests.
    If you would like to work with this file, you should make configuration
    changes in (in the SVG-Edit project root).
  2. If you are working with the ES6 Modules config but also wish to work with
    the normal version (so your code can work in older
    browsers or get the presumable performance benefits of this file which
    references JavaScript rolled up into a single file), you can follow these
    steps after any config changes you make, so that your changes can also be
    automatically made available to both versions.

    1. JavaScript:
      1. Run within the svgedit directory
        ( if you installed via npm) and the root
        repository directory if you cloned the Git repository instead.
        This will install the build tools for SVG-edit.
      2. Run within the svgedit directory mentioned
        in the step above.

        1. This will rebuild (applying Babel to
          allow it to work on older browsers and applying Rollup to build
          all JavaScript into one file). The file will then contain
          non-ES6 module JavaScript that can work in older browsers.
          Note that it bundles all of SVGEdit, so it is to be expected
          that this file will be much larger in size than the original
          ES6 config file.
    2. HTML:
      1. If you wish to make changes to both HTML files, it is recommended that
        you work and test on and then run
        to have the changes properly copied to
        .

Бесплатные векторные редакторы

Предназначены для создания и редактирования логотипов, интерфейсов и прочей масштабируемой графики.

1. Gravit Designer

Платформы: веб, Windows, macOS, Linux.

Gravit Designer — ранее известный как Gravit — это полнофункциональный векторный редактор. Он подходит для любых задач: от дизайна интерфейсов и иконок до работы с презентациями, иллюстрациями и анимацией.

Аккуратный интуитивный интерфейс Gravit Designer можно настраивать под себя. Редактор содержит массу инструментов для создания прекрасных детализированных векторных изображений. Среди них — неразрушающие (их действие можно отменять) функции для работы с булевыми операциями, инструменты «Нож» и «Граф путей» плюс множество режимов заливки и смешивания, а также мощный текстовый движок.

Если вам понадобится получить доступ к работе на ходу, облачный сервис Gravit Cloud позволит вернуться к проекту на любом устройстве.

2. Vectr

Платформы: веб, Windows, macOS, Linux.

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

3. SVG-Edit

Платформы: веб.

Если вам нужно быстро создать или отредактировать простой SVG-файл, есть несколько онлайн-редакторов, которые подойдут для этой задачи не хуже Adobe Illustrator. В числе лучших из них — SVG-Edit.

Этот редактор целиком создан на HTML5, CSS3 и JavaScript и не использует серверы для обработки данных. Код SVG-Edit открыт. Поэтому при желании вы можете скачать его и модифицировать, чтобы создать свою версию редактора.

SVG-Edit располагает всеми базовыми инструментами векторного редактора. Но поддерживает только формат SVG.

4. Inkscape

Платформы: Windows, macOS, Linux.

Этот мощный редактор предлагает множество инструментов и функций, которые часто недоступны в других аналогичных программах. Среди них — альфа-смешивание, клонирование объектов и маркеры.

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

Отдельного внимания заслуживают такие возможности, как преобразование растровых изображений в векторные, создание обводки с переменной шириной и поддержка файлов Illustrator.

Примеры работы с inkscape

Показать, какими возможностями обладает векторный редактор inkscape и научиться работать в inkscape
проще всего на примерах.
Урокам работы с inkscape посвящен отдельный раздел сайта —
уроки inkscape.
На уроках по шагам описаны процессы рисования в inkscape. В частности совсем несложно нарисовать
с его помощью такой бильярдный шар, как на картинке справа.

Новые уроки регулярно публикуются на форуме.
Вы можете первыми узнавать о новых уроках, используя
RSS ленты русскоязычного сайта о бесплатных графических редакторах или
добавить виджет новые уроки на сайте paint-net.ru на Яндекс.

Визуализация данных

21. Google Developers — Google Chart Tool Web Apps

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

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

22. Visual.ly — веб-приложение для создания интерактивной инфографики

Инфографика — это новый способ визуального представления данных, который развирается стремительными темпами. Visual.ly это лучшая программа для создания и публикации интерактивной инфографики:


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

23. Infogr.am — создание инфографики и визуальных диаграмм онлайн

Еще один мощный интерактивный инструмент для создания потрясающих визуальных представлений и инфографики. С помощью Infog.am можно создавать инфографику, диаграммы, а также другие визуальные представления с помощью трех простых шагов: выберите шаблон, визуализируйте данные, а затем опубликуйте их.

Также можно бесплатно выбрать графики из коллекции, содержащей более 30 типов интерактивных диаграмм.

24. Easel.ly — создание и публикация визуальных идей онлайн

Еще один мощный инструмент для создания инфографики. Даже если вы не знаете, как создается инфографика, все, что вам нужно сделать, это зайти на сайт, выбрать шаблон и приступить к работе:


В рамках данного сервиса представлено огромное количество графических форм и объектов, а также шаблоны инфографики, с помощью которых можно создавать и публиковать визуальные представления онлайн.

25. Visualize.me — визуализируйте свое резюме онлайн

Персонализированный инструмент, который позволяет создать и визуализировать резюме в один клик. Все это доступно бесплатно.
С более чем 500 000 уже созданных проектов Vizualize.me является сервисом №1 для создания резюме. Он содержит большее количество мощных инструментов, которые помогут создать резюме.

Векторная графика

1. SVG-Edit — разработка векторной графики в браузере

Если вам нужно программно воспроизвести рисунок или векторную графику, это можно сделать с помощью формата Scalable Vector Graphics (также известного как SVG). А программа для разработки Scalable Vector Graphics называется SVG-Edit.

Это программное обеспечение с открытым исходным кодом. SVG-Edit является мощным инструментом, который позволяет создавать или редактировать SVG-элементы. Инструмент построен на основе CSS3, HTML5 и JavaScript. С его помощью можно быстро редактировать и обрабатывать двумерную (2D) векторную графику:

Бесплатное программное обеспечение для создания графического дизайна. Это программа графический редактор векторной 2D-графики, которая позволяет рисовать, редактировать и создавать профессиональный дизайн.

DrawPlus также содержит ряд функций, которые позволяют с помощью экструзии создавать 3D-объекты, применять широкий спектр 3D-стилей с огромной коллекцией кистей:


В DrawPlus Можно легко разрабатывать графический дизайн, логотипы, технические чертежи, анимацию и многое другое. Существуют различные предустановленные шаблоны. Также доступны пособия для новичков, которые помогут начать работу в программе.

3. Inkscape — редактор векторной графики для Windows, Mac OS X и Linux

Если вы ищете замену Adobe Illustrator или CorelDraw, то InkScape это инструмент, который должен вам подойти. Это редактор векторной графики с открытым исходным кодом и множеством мощных функций:


Он также поддерживает интеграцию SVG с расширенными возможностями для печати и веб-дизайна. Это профессиональный графический редактор с простым и легким в использовании интерфейсом.

4. Skencil — программа для векторной графики под Unix / Linux

Бесплатное графическое программное обеспечение для работы под Linux / Unix. Это гибкий и мощный инструмент для создания иллюстраций, диаграмм и т.д.:

5. Ultimate Paint — инструмент для обработки изображений на Windows

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

Ultimate Paint поддерживает гибкие функции управления кистями, которые позволяют создавать креативный дизайн. А также форматы PEG, GIF, PNG, BMP, PCX, AVI (только чтение), TGA, WMF / EMF, ICO (только чтение), IFF / LBM и WAP BMP, а также и Twain-совместимые сканеры.

6. SmoothDraw NX — бесплатный инструмент обработки изображений для мобильных устройств

Простой сенсорный инструмент для рисования от руки, который можно использовать для получения изображений высокого качества. Он поддерживает множество видов кистей (перо, карандаш, аэрография, естественная кисть и т.д.), инструменты для ретуширования, слои и т.д.:

7. Fat Paint — лучшая программа для рисования

Fat Paint известен как лучшее программное обеспечение для графического дизайна, рисования и создания логотипов. Это бесплатная программа для редактирования изображений, которая позволяет создавать страницы, векторные иллюстрации, логотипы, редактировать фотографии и разрабатывать веб-дизайн:

Figma

Сервис предназначен для профессиональных пользователей, которые уже освоили Illustrator. В нем есть собственная подписка наподобие Adobe, однако Figma позволяет создать три проекта бесплатно и работать в команде с двумя участниками.

Figma в основном предназначен для дизайна интерфейса и полностью поддерживает файлы, созданные в Sketch — еще одном популярном инструменте для дизайна. Figma также предлагается в виде мобильных приложений для iOS и Android, которые можно использовать для предварительного просмотра проектов.

В сервисе есть поддержка Google Fonts и пользовательских шрифтов. В нем легко создавать собственные фигуры с помощью специального инструмента, а также присутствует полная поддержка масок, которые можно сохранить в качестве компонентов для повторного использования в других проектах.

По окончании работы можно экспортировать проект в виде файлов PNG, JPEG или SVG или просто скопировать стили как CSS-код.

ПО ТЕМЕ: Открыть RAR или ZIP онлайн: как распаковывать архивы без установки приложений — 6 лучших сервисов.

Installation

Quick install

  1. Clone or copy the repository contents (at least the directory).
    Please note that you should not do a recursive Git clone (i.e., with the
    or flags), as you will get assorted
    past versions (which are available on the parent as branches anyways).
    (The reason these past versions are available as submodules is merely
    for convenience in hosting these versions, along with , online
    on Github Pages.)
  2. If you need programmatic customization, see its section below.
  3. Otherwise, just add an iframe to your site, adding any extensions or
    configuration (see
    ({@tutorial ConfigOptions})) within the URL:

Note that if you want support for the following browsers, you will at least
need some polyfills.

For Android Browser 4.4.3-4.4.4, you will need at least .

For the following, you will need at least , , and :

  • IE
  • IE Mobile
  • Opera Mini
  • Blackberry Browser

And for still older browsers (e.g., IE 8), you will at minimum need a
polyfill.

Integrating SVG-edit into your own npm package

These steps are only needed if you wish to set up your own npm package
incorporating SVGEdit. You will need to have Node.js/npm installed.

  1. Create and enter an empty folder somewhere on your desktop.
  2. Create your npm package: (complete the fields).
  3. Install SVG-edit into your package:
    .
  4. Look within , e.g.,
    for the files your package needs and use accordingly (from outside of
    ).
  5. If you want to publish your own work, you can use .

Возможности

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

Что у нас есть:

Plugin Description Default
cleanupAttrs удаление переносов строк и лишних пробелов
inlineStyles перенос стилей из элементов в атрибуты
removeDoctype удаление doctype
removeXMLProcInst удаление XML-инструкций
removeComments удаление комментариев
removeMetadata удаление
removeTitle удаление
removeDesc удаление
removeUselessDefs удаление элементов в без
removeXMLNS удаление атрибута xmlns (для заинлайненных svg)
removeEditorsNSData удаление пространств имён различных редакторов, их элементов и атрибутов
removeEmptyAttrs удаление пустых атрибутов
removeHiddenElems удаление скрытых элементов
removeEmptyText удаление пустых текстовых элементов
removeEmptyContainers удаление пустых элементов-контейнеров
removeViewBox удаление атрибута , когда это возможно
cleanupEnableBackground удаление или оптимизация атрибута , когда это возможно
minifyStyles уменьшает содержимое элементов с помощью CSSO.
convertStyleToAttrs конвертирование стилей в атрибуте в отдельные svg-атрибуты
convertColors конвертирование цветовых значений: из в , из в
convertPathData конвертирование данных Path в относительные или абсолютные координаты, смотря что |короче; конвертирование одних типов сегментов в другие; удаление ненужных разделителей; умное округление и тому подобное
convertTransform схлопывание нескольких трансформаций в одну, конвертирование матриц в короткие алиасы |и многое другое
removeUnknownsAndDefaults удаление неизвестных элементов, контента и атрибутов
removeNonInheritableGroupAttrs удаление ненаследуемых «презентационных» атрибутов групп
removeUselessStrokeAndFill удаление неиспользуемых атрибутов stroke-* и fill-*
removeUnusedNS удаление деклараций неиспользуемых пространств имён
prefixIds добавляет префикс в ID или классы в виде имени файла или произвольной строки
cleanupIDs удаление неиспользуемых и сокращение используемых ID
cleanupNumericValues округление дробных чисел до заданной точности, удаление как единицы |измерения по-умолчанию
cleanupListOfValues округление числовых значений в атрибутах со списком чисел, таких как |или
moveElemsAttrsToGroup перемещение совпадающих атрибутов у всех элементов внутри группы
moveGroupAttrsToElems перемещение некоторых атрибутов группы на элементы внутри
collapseGroups схлопывание бесполезных групп
removeRasterImages удаление растровых изображений
mergePaths склеивание нескольких Path в одну кривую
convertShapeToPath конвертирование простых форм в Path
convertEllipseToCircle конвертирование вырожденного эллипса в круг
sortAttrs сортировка атрибутов элементов для удобочитаемости
sortDefsChildren сортировка детей для лучшей компрессии
removeDimensions удаляет атрибуты width/height при наличии viewBox (противоречит removeViewBox — плагин должен быть выключен)
removeAttrs удаляет атрибуты по указанному паттерну
removeAttributesBySelector удаляет атрибуты по CSS-селектору
removeElementsByAttr удаляет элементы по указанным ID или классам
addClassesToSVGElement добавляет имена классов корневому элементу
addAttributesToSVGElement добавляет атрибуты корневому элементу
removeOffCanvasPaths удаляет элементы вне отрисовываемой области
removeStyleElement удаляет элементы
removeScriptElement удаляет элементы
Ссылка на основную публикацию