Especifique nombres de clases CSS en rutas SVG usando Illustrator

¿Hay alguna manera de editar archivos SVG en Illustrator donde pueda especificar una clase CSS para cada ruta?

Ya sé en Illustrator que si le das al nombre de la capa un nombre real, Illustrator usará ese nombre como ID de la ruta, lo cual está bien si no planeas reutilizar el icono más de una vez en la misma página.

Mi solución actual es usar el método de ID, pero luego convertir las ID a clases en mi editor de código, pero es bastante molesto tener que hacerlo cada vez que genero mi sprite SVG.

Si eso no es posible actualmente en Illustrator, ¿hay alguna otra aplicación que le permita especificar eso? ¿O tal vez un paquete Grunt o Gulp?

Parece que podría hacerlo con Inkscape con un truco , por lo que podría mirar eso si no hay otras buenas soluciones por ahí.

Hago esto con una tarea de 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 ilegibles 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 grupal se encargará de eso y la hará class = "tree" . También estoy pegando debajo de 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 '';
                }
            }]
        }
    }

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

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

Parece que el enlace publicado por Ian Dunn podría ser su boleto. Aquí hay un extracto de esa página :

En las opciones de exportación 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 los aplica a través de clases en el código SVG. Así es como puede generar clases en su SVG exportado. Dependiendo de lo que quiera que hagan esas clases, puede definirlas en otro archivo CSS y eliminar las definiciones de estilo del SVG exportado.

La página vinculada establece esto, pero en aras de la exhaustividad, Illustrator solo generará el elemento de estilo y las clases si establece CSS Properties: Style Elementen el área Avanzada (es posible que deba hacer clic More Options) del Diálogo de opciones SVG:

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

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

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

Ejemplo con capturas de pantalla:

Crea un nuevo estilo gráfico:

Exportar como ... SVG:

Salida:

<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. Usar la configuración de propiedades CSS adecuada (felicidad del desarrollador)

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

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 "my-style"
3. Aplica 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 "my-style". 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 simple de hacerlo, es similar a la tarea Grunt, pero aún más fácil:

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

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