Укажите имена классов CSS в путях SVG с помощью Illustrator

Есть ли способ отредактировать SVG-файлы в Illustrator, где вы можете указать класс CSS для каждого пути?

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

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

Если это в настоящее время невозможно в Illustrator, есть ли другие приложения, которые позволят вам указать это? Или, может быть, пакет Grunt или Gulp?

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

Я делаю это с задачей Гранта. Используя "grunt-text-replace", я могу передать свои уменьшенные SVG (svgmin) через пользовательское регулярное выражение, которое заменяет все искаженные ссылки на классы соответствующими классами.

В Illustrator, например, объявите имя слоя / объекта как class = "tree" . Это будет экспортировано Illustrator как id = "class =" tree "" . Следующая задача grunt позаботится об этом и сделает ее class = "tree" . Я также вставляю ниже некоторые другие подзадачи, которые будут выполнять очистку идентификатора (рекомендуется).

    replace: {
        // ID cleanup: performs a manual ID cleanup as Illustrator exports a mess
        illustrator: {
            src: ['assets/svg/optimised/*.svg'],
            overwrite: true,
            replacements: [{
                // Remove escaped underscore character
                from: '_x5F_',
                to: '_'
            }, {
                // Replace class names with proper classes
                //class_x3D__x22_tank-option_x22__2_
                from: /id\=\"class_x3D__x22_(.+?)_x22_(.*?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'class="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all ids
                from: /id\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'id="'+ regexMatches[0].toLowerCase()+'"';
                }
            }, {
                // Lowercase all id references to match the previous replace rule
                from: /url\(\#(.+?)\)/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'url(#'+ regexMatches[0].toLowerCase() +')';
                }
            }, {
                // Lowercase all id href to match the previous replace rule
                from: /href\=\"\#(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return 'href="#'+ regexMatches[0].toLowerCase() +'"';
                }
            }, {
                // Remove all font references as we will use CSS for this
                from: /font\-family\=\"(.+?)\"/gi,
                to: function(matchedWord, index, fullText, regexMatches) {
                    return '';
                }
            }]
        }
    }

Затем вы можете вызвать эту задачу в вашем Gruntfile как:

grunt.registerTask('svgclean', [
    'replace:illustrator'
]);

Похоже, что ссылка, которую опубликовал Ян Данн, может быть вашим билетом. Вот выдержка из этой страницы :

В параметрах экспорта SVG я выбираю элементы стиля и выбираю параметр «Включить неиспользуемые графические стили». Он объявит sandStyle и blueSky как стили CSS в документе SVG.

Вот вывод SVG, сгенерированный Illustrator CC:
<style type="text/css"> .sandStyle{fill:#BFAF8F;stroke:#A6806A;stroke-width:3;stroke-miterlimit:10;} .blueSky{fill:#338AC4;stroke:#3469B7;stroke-width:3;stroke-miterlimit:10;} </style> <g id="mySquare"> <rect x="90.5" y="15.5" class="sandStyle" width="64" height="63"/> </g> <g id="myCircle"> <circle class="sandStyle" cx="42" cy="46" r="34.2"/> </g>

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

Связанная страница утверждает это, но для полноты картины Illustrator будет генерировать элемент и классы стиля только в том случае, если вы установили CSS Properties: Style Elementв области «Дополнительно» (вам может потребоваться нажать More Options) диалогового окна «Параметры SVG»:

Я также хотел бы отметить, что сгенерированный код никогда не будет идеальным для всех ситуаций. Рукописный код имеет тенденцию быть легче и легче для чтения людьми (если это то, что вы собираетесь). Я бы порекомендовал прочитать документ Quibik для пользователя из Викимедиа о ручной очистке файлов SVG и взглянуть на grunt-svgmin .

Я только столкнулся с этой проблемой и нашел следующее решение (для Illustrator CC):

Примените названные «Графические стили» к путям, которые вы хотите назвать, и экспортируйте SVG с помощью внутреннего CSS. Например, графический стиль с именем my-icon будет определять внутренний my-iconкласс и применять этот класс к правильным путям.

Пример со скриншотами:

Создайте новый графический стиль:

Экспортировать как ... SVG:

Выход:

<defs><style>.my-icon{ fill:#000; }</style></defs> <path class="my-icon">...</path>

Источник: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

5. Используйте соответствующую настройку свойств CSS (dev счастье)

CC: иллюстратор использует определенные графические стили для создания именованных классов (умный, полезный)

В Illustrator 21.0.0 (2017) и, возможно, в более ранних версиях:

1. Создайте новый стиль на панели «Стили графики»
2. Дважды щелкните новый стиль и дайте ему произвольное имя, например «мой стиль»
3. Примените этот стиль к одному или нескольким элементам
4. Экспорт SVG

Элементам в SVG будет присвоен атрибут класса со значением «my-style». Затем вы можете использовать внешний CSS для переопределения стилей.

Обратите внимание, что если имя вашего стиля содержит пробел, оно преобразуется в дефис.

Простой способ сделать это, он похож на задачу Grunt, но еще проще:

Для всех объектов, которые вы хотите создать класс, дайте имя, например: «myClassmainCircle» и «myClassmainStar». После экспорта замените все: 'id = "myClass" на "class ="'

Результатом будет: class = "mainCirle" class = "mainStar"