Укажите имена классов CSS в путях SVG с помощью 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»:

Я также хотел бы отметить, что сгенерированный код никогда не будет идеальным для всех ситуаций. Написанный от руки код, как правило, легче и легче читается людьми (если это то, к чему вы стремитесь). Я бы порекомендовал прочитать документ пользователя Wikimedia 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 (счастье разработчиков)

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

Я делаю это с помощью задачи Grunt. Используя «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'
]);

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

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

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

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

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

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

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