Geben Sie mit Illustrator CSS-Klassennamen auf SVG-Pfaden an

Sieht so aus, als ob der Link, den Ian Dunn gepostet hat , Ihr Ticket sein könnte. Hier ein Auszug von dieser Seite :

In den SVG-Exportoptionen wähle ich Stilelemente und die Option Nicht verwendete Grafikstile einbeziehen. Es wird sandStyle und blueSky als CSS-Stile im SVG-Dokument deklarieren.

Hier ist die von Illustrator CC generierte SVG-Ausgabe:

<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 kann Grafikstile als CSS in ein Stilelement exportieren und über Klassen im SVG-Code anwenden. So können Sie Klassen in Ihrem exportierten SVG generieren. Je nachdem, was diese Klassen tun sollen, könnten Sie sie einfach in einer anderen CSS-Datei definieren und die Stildefinitionen aus dem exportierten SVG entfernen.

Auf der verlinkten Seite steht dies, aber der Vollständigkeit halber generiert Illustrator das Stilelement und die Klassen nur, wenn Sie CSS Properties: Style Elementim Bereich „Erweitert“ (möglicherweise müssen Sie auf klicken More Options) des Dialogfelds „SVG-Optionen“ Folgendes festlegen:

Ich möchte auch anmerken, dass generierter Code niemals für alle Situationen perfekt sein wird. Handgeschriebener Code ist tendenziell leichter und für Menschen leichter lesbar (wenn Sie das wollen). Ich würde empfehlen, das Dokument des Wikimedia-Benutzers Quibik über das manuelle Bereinigen von SVG-Dateien zu lesen und einen Blick auf grunt-svgmin zu werfen .

Ich bin gerade auf dieses Problem gestoßen und habe die folgende Lösung gefunden (für Illustrator CC):

Wenden Sie benannte "Grafikstile" auf die Pfade an, die Sie benennen möchten, und exportieren Sie das SVG mit internem CSS. Beispielsweise definiert ein Grafikstil namens my-icon eine interne my-iconKlasse und wendet diese Klasse auf die richtigen Pfade an.

Beispiel mit Screenshots:

Erstellen Sie einen neuen Grafikstil:

Exportieren als... SVG:

Ausgabe:

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

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

5. Verwenden Sie die entsprechende CSS-Eigenschafteneinstellung (Dev Happiness)

CC: Illustrator verwendet die definierten Grafikstile, um benannte Klassen zu erstellen (intelligent, nützlich)

Ich mache das mit einer Grunt-Aufgabe. Durch die Verwendung von "grunt-text-replace" kann ich meine minimierten SVGs (svgmin) durch einen benutzerdefinierten regulären Ausdruck übergeben, der alle verstümmelten Klassenreferenzen durch richtige Klassen ersetzt.

Deklarieren Sie in Illustrator den Ebenen-/Objektnamen beispielsweise als class="tree" . Dies wird von Illustrator als id="class="tree"" exportiert . Die folgende Grunt-Aufgabe kümmert sich darum und macht es zu class="tree" . Ich füge auch einige andere Unteraufgaben ein, die eine ID-Bereinigung durchführen (empfohlen).

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

Dann können Sie diese Aufgabe in Ihrer Gruntdatei wie folgt aufrufen:

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

In Illustrator 21.0.0 (2017) und möglicherweise in früheren Versionen:

1. Erstellen Sie im Bedienfeld „Grafikstile“ einen neuen Stil
2. Doppelklicken Sie auf den neuen Stil und geben Sie ihm einen benutzerdefinierten Namen, z. B. "mein Stil".
3. Wenden Sie diesen Stil auf ein oder mehrere Elemente an
4. Exportieren Sie die SVG-Datei

Die Elemente im SVG erhalten ein Klassenattribut mit dem Wert „my-style“. Dann können Sie externes CSS verwenden, um Stile zu überschreiben.

Beachten Sie, dass wenn Ihr Stilname ein Leerzeichen enthält, dieser in einen Bindestrich umgewandelt wird.

Einfacher Weg, es ist ähnlich wie die Grunt-Aufgabe, aber noch einfacher:

Geben Sie allen Objekten, die Sie zur Klasse machen möchten, den Namen, zum Beispiel: "myClassmainCircle" und "myClassmainStar". Ersetzen Sie nach dem Exportieren alle: 'id="myClass' mit 'class="'

Das Ergebnis ist: class="mainCirle" class="mainStar"