Especifique nombres de clase CSS en rutas SVG usando Illustrator

Parece que el enlace que publicó Ian Dunn podría ser tu boleto. He aquí un extracto de esa página :

En las opciones de exportación de SVG, selecciono Elementos de estilo y selecciono la opción Incluir estilos gráficos no utilizados. Declarará sandStyle y blueSky como estilos CSS en el documento SVG.

Aquí está la salida SVG generada por 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 puede exportar estilos gráficos como CSS en un elemento de estilo y aplicarlos a través de clases en el código SVG. Así es como puede generar clases en su SVG exportado. Según lo que desee que hagan esas clases, puede simplemente definirlas en otro archivo CSS y eliminar las definiciones de estilo del SVG exportado.

La página vinculada indica esto, pero en aras de la exhaustividad, Illustrator solo generará el elemento de estilo y las clases si lo configura CSS Properties: Style Elementen el área Avanzado (es posible que deba hacer clic en More Options) del cuadro de diálogo Opciones de SVG:

También me gustaría señalar que el código generado nunca será perfecto para todas las situaciones. El código escrito a mano tiende a ser más ligero y más fácil de leer para los humanos (si eso es lo que buscas). Recomiendo leer el documento del usuario Quibik de Wikimedia sobre la limpieza de archivos SVG a mano y echar un vistazo a grunt-svgmin .

Me encontré con este problema y encontré la siguiente solución (para Illustrator CC):

Aplique el nombre "Estilos gráficos" a las rutas que desea nombrar y exporte el SVG con CSS interno. Por ejemplo, un estilo gráfico denominado my-icon definirá una my-iconclase interna y aplicará esa clase a las rutas adecuadas.

Ejemplo con capturas de pantalla:

Crear un nuevo estilo gráfico:

Exportar como... SVG:

Producción:

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

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

5. Utilice la configuración de propiedades de CSS adecuada (felicidad del desarrollador)

CC: Illustrator utiliza los estilos gráficos definidos para crear clases con nombre (inteligente, útil)

Hago esto con una tarea Grunt. Al usar "grunt-text-replace", puedo pasar mis SVG minificados (svgmin) a través de una expresión regular personalizada que reemplaza todas las referencias de clase confusas con las clases adecuadas.

En Illustrator, declare el nombre de la capa/objeto como class="tree", por ejemplo. Illustrator lo exportará como id="class="tree"" . La siguiente tarea grunt se encargará de eso y lo convertirá en class="tree" . También estoy pegando debajo algunas otras subtareas que harán una limpieza de ID (recomendado).

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

Luego puede llamar a esta tarea dentro de su Gruntfile como:

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

En Illustrator 21.0.0 (2017) y posiblemente en versiones anteriores:

1. Cree un nuevo estilo en el panel Estilos gráficos
2. Haga doble clic en el nuevo estilo y asígnele un nombre personalizado, como "mi estilo".
3. Aplicar ese estilo a uno o más elementos
4. Exportar el SVG

Los elementos en el SVG recibirán un atributo de clase con el valor "mi estilo". Luego puede usar CSS externo para anular estilos.

Tenga en cuenta que si el nombre de su estilo contiene un espacio, se convertirá en un guión.

Una forma sencilla de hacerlo, es similar a la tarea de Grunt, pero aún más fácil:

A todos los objetos que le gustaría convertir en clase, asigne el nombre, por ejemplo: "myClassmainCircle" y "myClassmainStar". Después de exportar, reemplace todo: 'id="myClass' con 'class="'

El resultado será: class="mainCirle" class="mainStar"