Spécifiez les noms de classe CSS sur les chemins SVG à l'aide d'Illustrator

Existe-t-il un moyen de modifier des fichiers SVG dans Illustrator où vous pouvez spécifier une classe CSS pour chaque chemin?

Je sais déjà dans Illustrator que si vous donnez au nom du calque un nom réel, Illustrator utilisera ce nom comme ID du chemin, ce qui est bien si vous ne prévoyez pas de réutiliser l'icône plus d'une fois sur la même page.

Ma solution de contournement actuelle consiste à simplement utiliser la méthode des ID, mais à convertir ensuite les ID en classes dans mon éditeur de code, mais c'est assez ennuyeux à faire à chaque fois que je génère mon sprite SVG.

Si ce n'est actuellement pas possible dans Illustrator, existe-t-il d'autres applications qui vous permettront de le spécifier? Ou peut-être un package Grunt ou Gulp?

Il semble que vous puissiez le faire avec Inkscape avec un hack , donc je pourrais y penser s'il n'y a pas d'autres bonnes solutions.

Je le fais avec une tâche Grunt. En utilisant "grunt-text-replace", je suis capable de passer mes SVG minifiés (svgmin) à travers une expression régulière personnalisée qui remplace toutes les références de classe tronquées par des classes appropriées.

Dans Illustrator, déclarez le nom du calque / objet par exemple class = "tree" . Cela sera exporté par Illustrator sous la forme id = "class =" tree "" . La tâche de grognement ci-dessous s'en chargera et en fera class = "tree" . Je colle également ci-dessous d'autres sous-tâches qui feront un nettoyage d'ID (recommandé).

    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 '';
                }
            }]
        }
    }

Ensuite, vous pouvez appeler cette tâche dans votre Gruntfile comme:

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

On dirait que le lien affiché par Ian Dunn pourrait être votre ticket. Voici un extrait de cette page :

Dans les options d'exportation SVG, je sélectionne les éléments de style et je sélectionne l'option Inclure les styles graphiques inutilisés. Il déclarera sandStyle et blueSky comme styles CSS dans le document SVG.

Voici la sortie SVG générée par 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 peut exporter des styles graphiques en CSS dans un élément de style et les appliquer via des classes dans le code SVG. C'est ainsi que vous pouvez générer des classes dans votre SVG exporté. Selon ce que vous voulez que ces classes fassent, vous pouvez simplement les définir dans un autre fichier CSS et supprimer les définitions de style du SVG exporté.

La page liée l'indique, mais dans un souci d'exhaustivité, Illustrator ne générera l'élément de style et les classes que si vous définissez CSS Properties: Style Elementdans la zone Avancé (vous devrez peut-être cliquer More Options) de la boîte de dialogue Options SVG:

Je noterais également que le code généré ne sera jamais parfait pour toutes les situations. Le code manuscrit a tendance à être plus léger et plus facile à lire pour les humains (si c'est ce que vous recherchez). Je recommande de lire le document de l'utilisateur Wikimedia Quibik sur le nettoyage manuel des fichiers SVG et de jeter un œil à grunt-svgmin .

Je viens de rencontrer ce problème et j'ai trouvé la solution suivante (pour Illustrator CC):

Appliquez des "styles graphiques" nommés aux chemins que vous souhaitez nommer et exportez le SVG avec CSS interne. Par exemple, un style graphique nommé my-icon définira une my-iconclasse interne et appliquera cette classe aux chemins appropriés.

Exemple avec captures d'écran:

Créez un nouveau style graphique:

Exporter au format ... SVG:

Sortie:

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

Source: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

5. Utiliser le paramètre de propriétés CSS approprié (bonheur de développement)

CC: illustrator utilise les styles graphiques définis pour créer des classes nommées (intelligentes, utiles)

Dans Illustrator 21.0.0 (2017) et éventuellement dans les versions antérieures:

1. Créer un nouveau style dans le panneau Styles graphiques
2. Double-cliquez sur le nouveau style et donnez-lui un nom personnalisé, comme "mon style"
3. Appliquer ce style à un ou plusieurs éléments
4. Exporter le SVG

Les éléments du SVG se verront attribuer un attribut de classe avec la valeur "my-style". Ensuite, vous pouvez utiliser un CSS externe pour remplacer les styles.

Notez que si votre nom de style contient un espace, il sera converti en trait d'union.

Un moyen simple de le faire, il est similaire à la tâche Grunt, mais encore plus facile:

Pour tous les objets que vous souhaitez créer en classe, donnez le nom par exemple: "myClassmainCircle" et "myClassmainStar". Après l'exportation, remplacez tout: 'id = "myClass' par 'class ="'

Le résultat sera: class = "mainCirle" class = "mainStar"