Especifique nomes de classes CSS nos caminhos SVG usando o Illustrator

Existe uma maneira de editar arquivos SVG no Illustrator, onde você pode especificar uma classe CSS para cada caminho?

Eu já sei no Illustrator que, se você der um nome real ao nome da camada, o Illustrator usará esse nome como o ID do caminho, o que é bom se você não planeja reutilizar o ícone mais de uma vez na mesma página.

Minha solução atual é usar apenas o método IDs, mas depois converter os IDs em classes no meu editor de código, mas é muito chato ter que fazer toda vez que eu gerar meu sprite SVG.

Se isso não for possível no Illustrator, existem outros aplicativos que permitirão especificar isso? Ou talvez um pacote Grunt ou Gulp?

Parece que você pode fazer isso com o Inkscape com um hack , então eu posso ver se não há outras boas soluções por aí.

Eu faço isso com uma tarefa Grunt. Usando "grunt-text-replace", sou capaz de passar meus SVGs minificados (svgmin) por uma expressão regular personalizada que substitui todas as referências de classe ilegíveis por classes apropriadas.

No Illustrator, declare o nome da camada / objeto como class = "tree", por exemplo. Isso será exportado pelo Illustrator como id = "class =" tree "" . A tarefa grunhida abaixo cuidará disso e fará com que seja class = "tree" . Também estou colando abaixo algumas outras subtarefas que farão uma limpeza 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 '';
                }
            }]
        }
    }

Em seguida, você pode chamar esta tarefa no seu Gruntfile como:

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

Parece que o link que Ian Dunn postou pode ser o seu bilhete. Aqui está um trecho dessa página :

Nas opções de exportação SVG, selecione Elementos de estilo e a opção Incluir estilos gráficos não utilizados. Ele declarará sandStyle e blueSky como estilos CSS no documento SVG.

Aqui está a saída SVG gerada pelo 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>

O Illustrator pode exportar estilos gráficos como CSS em um elemento de estilo e aplicá-los através de classes no código SVG. É assim que você pode gerar classes no seu SVG exportado. Dependendo do que você deseja que essas classes façam, você pode defini-las em outro arquivo CSS e remover as definições de estilo do SVG exportado.

A página vinculada declara isso, mas, para fins de completude, o Illustrator só gera o elemento de estilo e as classes se você definir CSS Properties: Style Elementna área Avançada (pode ser necessário clicar More Options) na caixa de diálogo Opções do SVG:

Eu também observaria que o código gerado nunca será perfeito para todas as situações. O código escrito à mão tende a ser mais leve e fácil para os humanos lerem (se é isso que você procura). Eu recomendo ler o documento do usuário do Wikimedia Quibik sobre a limpeza manual de arquivos SVG e dar uma olhada no grunt-svgmin .

Acabei de encontrar este problema e encontrei a seguinte solução (para Illustrator CC):

Aplique "Estilos gráficos" nomeados aos caminhos que você deseja nomear e exporte o SVG com CSS interno. Por exemplo, um Estilo Gráfico chamado my-icon definirá uma my-iconclasse interna e aplicará essa classe aos caminhos adequados.

Exemplo com capturas de tela:

Crie um novo estilo gráfico:

Exportar como ... SVG:

Saída:

<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. Usar configuração apropriada de propriedades CSS (dev happiness)

CC: o illustrator usa os estilos gráficos definidos para criar classes nomeadas (inteligentes, úteis)

No Illustrator 21.0.0 (2017) e possivelmente em versões anteriores:

1. Crie um novo estilo no painel Estilos de gráfico
2. Clique duas vezes no novo estilo e dê um nome personalizado, como "meu estilo"
3. Aplique esse estilo a um ou mais elementos
4. Exportar o SVG

Os elementos no SVG receberão um atributo de classe com o valor "meu estilo". Em seguida, você pode usar CSS externo para substituir estilos.

Observe que, se o nome do seu estilo contiver um espaço, ele será convertido em um hífen.

Maneira simples de fazer isso, é semelhante à tarefa Grunt, mas ainda mais fácil:

Para todos os objetos que você deseja criar classe, forneça o nome, por exemplo: "myClassmainCircle" e "myClassmainStar". Após a exportação, substitua all: 'id = "myClass' por 'class ="'

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