Illustratorを使用してSVGパスでCSSクラス名を指定する

各パスにCSSクラスを指定できるIllustratorでSVGファイルを編集する方法はありますか？

Illustratorでは、レイヤー名に実際の名前を付けると、その名前がパスのIDとして使用されることを既に知っています。これは、同じページでアイコンを複数回再利用する予定がない場合は問題ありません。

私の現在の回避策は、IDメソッドを使用することですが、その後コードエディターでIDをクラスに変換しますが、SVGスプライトを生成するたびに行う必要があるのはかなり面倒です。

現在Illustratorでそれが不可能な場合、それを指定できる他のアプリはありますか？または、GruntまたはGulpパッケージですか？

Inkscapeでハックを使ってそれを行うことができるように見えるので、他に良い解決策がない場合はそれを見るかもしれません。

Gruntタスクでこれを行います。"grunt-text-replace"を使用することにより、すべての文字化けしたクラス参照を適切なクラスに置き換えるカスタム正規表現を使用して、縮小したSVG（svgmin）を渡すことができます。

Illustratorで、レイヤー/オブジェクト名をたとえばclass = "tree"として宣言します。これは、Illustratorによってid = "class =" tree ""としてエクスポートされます。以下の単調なタスクがそれを処理し、class = "tree"にします。また、IDクリーンアップを実行する他のサブタスクを貼り付けています（推奨）。

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

次に、Gruntfile内でこのタスクを次のように呼び出すことができます。

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

Ian Dunnが投稿したリンクがあなたのチケットかもしれません。そのページからの抜粋は次のとおりです。

SVGエクスポートオプションで、[スタイル要素]を選択し、[未使用のグラフィックスタイルを含める]オプションを選択します。SVGドキュメントで、sandStyleとblueSkyをCSSスタイルとして宣言します。

以下は、Illustrator CCによって生成されたSVG出力です。
<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は、スタイル要素のCSSとしてグラフィックスタイルをエクスポートし、SVGコードのクラスを介してそれらを適用できます。これは、エクスポートされたSVGでクラスを生成する方法です。これらのクラスに何をさせたいかに応じて、別のCSSファイルでそれらを定義し、エクスポートされたSVGからスタイル定義を削除することができます。

リンクされたページにはこれが記載されていますが、完全を期すために、SVGオプションダイアログのCSS Properties: Style Element[詳細設定]領域（をクリックする必要がある場合More Options）で設定した場合、Illustratorはスタイル要素とクラスのみを生成します。

また、生成されたコードがすべての状況に対して完全に完璧になることは決してありません。手書きのコードは、人間が読むのがより軽くて簡単になる傾向があります（それが目的の場合）。手作業でSVGファイルをクリーンアップし、grunt-svgminを調べる方法については、WikimediaユーザーQuibikのドキュメントを読むことをお勧めします。

私はちょうどこの問題に遭遇し、次の解決策を見つけました（Illustrator CCの場合）：

名前を付けたい「グラフィカルスタイル」をパスに適用し、内部CSSでSVGをエクスポートします。たとえば、my-iconという名前のグラフィカルスタイルは内部my-iconクラスを定義し、そのクラスを適切なパスに適用します。

スクリーンショットのある例：

新しいグラフィックスタイルを作成します。

としてエクスポート... SVG：

出力：

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

ソース：https : //www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

5. 適切なCSSプロパティ設定を使用する（dev happiness）

CC：イラストレーターは定義済みのグラフィカルスタイルを使用して名前付きクラス（スマート、便利）を作成します

Illustrator 21.0.0（2017）およびおそらく以前のバージョン：

1. グラフィックスタイルパネルで新しいスタイルを作成します
2. 新しいスタイルをダブルクリックし、「my-style」などのカスタム名を付けます
3. そのスタイルを1つ以上の要素に適用する
4. SVGをエクスポートする

SVGの要素には、「my-style」という値を持つクラス属性が与えられます。次に、外部CSSを使用してスタイルをオーバーライドできます。

スタイル名にスペースが含まれている場合、ハイフンに変換されることに注意してください。

それを行う簡単な方法は、Gruntタスクに似ていますが、さらに簡単です：

クラスを作成するすべてのオブジェクトに、たとえば「myClassmainCircle」および「myClassmainStar」という名前を付けます。エクスポート後、すべてを置き換えます： 'id = "myClass'と 'class ="'

結果は次のようになります。class = "mainCirle" class = "mainStar"