Specificate i nomi delle classi CSS sui percorsi SVG usando Illustrator

Esiste un modo per modificare i file SVG in Illustrator in cui è possibile specificare una classe CSS per ciascun percorso?

So già in Illustrator che se dai al nome del livello un nome reale, Illustrator userà quel nome come ID del percorso, il che va bene se non intendi riutilizzare l'icona più di una volta nella stessa pagina.

La mia attuale soluzione è utilizzare solo il metodo ID, ma successivamente convertire gli ID in classi nel mio editor di codice, ma è piuttosto fastidioso doverlo fare ogni volta che generi il mio sprite SVG.

Se questo non è attualmente possibile in Illustrator, ci sono altre app che ti permetteranno di specificarlo? O forse un pacchetto Grunt o Gulp?

Sembra che potresti essere in grado di farlo con Inkscape con un hack , quindi potrei guardarlo se non ci sono altre buone soluzioni là fuori.

Lo faccio con un compito Grunt. Usando "grunt-text-replace" sono in grado di passare i miei SVG minimizzati (svgmin) attraverso un'espressione regolare personalizzata che sostituisce tutti i riferimenti di classe confusi con le classi appropriate.

In Illustrator, ad esempio , dichiarare il nome del layer / oggetto come class = "tree" . Questo verrà esportato da Illustrator come id = "class =" tree "" . Il compito grugnito che segue si occuperà di questo e lo renderà class = "albero" . Sto anche incollando di seguito alcune altre attività secondarie che eseguiranno una pulizia dell'ID (consigliato).

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

Quindi puoi chiamare questa attività nel tuo Gruntfile come:

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

Sembra che il link che Ian Dunn ha pubblicato potrebbe essere il tuo biglietto. Ecco un estratto da quella pagina :

Nelle opzioni di esportazione SVG, seleziono Elementi di stile e seleziono l'opzione Includi stili grafici non utilizzati. Dichiarerà sandStyle e blueSky come stili CSS nel documento SVG.

Ecco l'output SVG generato da 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 può esportare gli stili grafici come CSS in un elemento di stile e li applica tramite le classi nel codice SVG. Ecco come puoi generare classi nel tuo SVG esportato. A seconda di ciò che vuoi che facciano quelle classi, puoi semplicemente definirle in un altro file CSS e rimuovere le definizioni di stile dall'SVG esportato.

La pagina collegata lo afferma, ma per completezza, Illustrator genererà l'elemento di stile e le classi solo se impostato CSS Properties: Style Elementnell'area Avanzate (potrebbe essere necessario fare clic More Options) della finestra di dialogo Opzioni SVG:

Vorrei anche notare che il codice generato non sarà mai del tutto perfetto per tutte le situazioni. Il codice scritto a mano tende ad essere più leggero e più facile da leggere per gli umani (se è quello che stai cercando). Consiglio di leggere il documento Quibik dell'utente di Wikimedia sulla pulizia manuale dei file SVG e dare un'occhiata a grunt-svgmin .

Ho appena riscontrato questo problema e ho trovato la seguente soluzione (per Illustrator CC):

Applicare "Stili grafici" denominati ai percorsi che si desidera denominare ed esportare SVG con CSS interno. Ad esempio, uno stile grafico chiamato my-icon definirà una my-iconclasse interna e applicherà quella classe ai percorsi corretti.

Esempio con schermate:

Crea un nuovo stile grafico:

Esporta come ... SVG:

Produzione:

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

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

5. Usa impostazioni proprietà CSS appropriate (felicità sviluppatore)

CC: Illustrator utilizza gli stili grafici definiti per creare classi con nome (intelligente, utile)

In Illustrator 21.0.0 (2017) e possibilmente nelle versioni precedenti:

1. Crea un nuovo stile nel pannello Stili grafici
2. Fai doppio clic sul nuovo stile e assegnagli un nome personalizzato, ad esempio "my-style"
3. Applica quello stile a uno o più elementi
4. Esporta SVG

Agli elementi in SVG verrà assegnato un attributo di classe con il valore "my-style". Quindi è possibile utilizzare CSS esterni per sovrascrivere gli stili.

Nota che se il nome del tuo stile contiene uno spazio, verrà convertito in un trattino.

Un modo semplice per farlo, è simile all'attività Grunt, ma ancora più semplice:

A tutti gli oggetti che desideri creare classe, dai il nome ad esempio: "myClassmainCircle" e "myClassmainStar". Dopo l'esportazione sostituire tutto: 'id = "myClass' con 'class ="'

Il risultato sarà: class = "mainCirle" class = "mainStar"