Geben Sie mithilfe von Illustrator CSS-Klassennamen in SVG-Pfaden an

Gibt es eine Möglichkeit, SVG-Dateien in Illustrator zu bearbeiten, wobei Sie für jeden Pfad eine CSS-Klasse angeben können?

Ich weiß bereits in Illustrator, dass Illustrator diesen Namen als Pfad-ID verwendet, wenn Sie dem Ebenennamen einen tatsächlichen Namen geben. Dies ist in Ordnung, wenn Sie das Symbol nicht mehrmals auf derselben Seite verwenden möchten.

Meine derzeitige Problemumgehung besteht darin, nur die IDs-Methode zu verwenden und die IDs dann später in Klassen in meinem Code-Editor zu konvertieren. Es ist jedoch ziemlich ärgerlich, dies jedes Mal tun zu müssen, wenn ich mein SVG-Sprite generiere.

Wenn dies in Illustrator derzeit nicht möglich ist, gibt es andere Apps, mit denen Sie dies angeben können? Oder vielleicht ein Grunz- oder Gulp-Paket?

Es sieht so aus, als ob Sie es mit Inkscape mit einem Hack schaffen könnten, also schaue ich mir das an, wenn es keine anderen guten Lösungen gibt.

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 die richtigen Klassen ersetzt.

Deklarieren Sie in Illustrator den Namen der Ebene / des Objekts beispielsweise als class = "tree" . Dies wird von Illustrator als id = "class =" tree "" exportiert . Die folgende Grunzaufgabe kümmert sich darum und macht es 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 Ihrem Gruntfile aufrufen als:

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

Der Link, den Ian Dunn gepostet hat, könnte Ihr Ticket sein. Hier ist ein Auszug von dieser Seite :

In den SVG-Exportoptionen wähle ich Stilelemente und die Option Nicht verwendete Grafikstile einbeziehen aus. Im SVG-Dokument werden sandStyle und blueSky als CSS-Stile deklariert.

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. Auf diese Weise können Sie Klassen in Ihrer exportierten SVG generieren. Abhängig davon, was diese Klassen tun sollen, können Sie sie einfach in einer anderen CSS-Datei definieren und die Stildefinitionen aus der exportierten SVG-Datei entfernen.

Auf der verlinkten Seite wird dies angegeben. Der Vollständigkeit halber generiert Illustrator das Stilelement und die Klassen jedoch nur, wenn Sie dies CSS Properties: Style Elementim Bereich "Erweitert" (möglicherweise müssen Sie darauf klicken More Options) des Dialogfelds "SVG-Optionen" festlegen:

Ich würde auch bemerken, dass generierter Code niemals für alle Situationen perfekt sein wird. Handgeschriebener Code ist in der Regel leichter und für Menschen einfacher zu lesen (wenn Sie das möchten). Ich würde empfehlen, das Dokument des Wikimedia-Benutzers Quibik über das manuelle Bereinigen von SVG-Dateien 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 die SVG-Datei mit internem CSS. Ein Grafikstil mit dem Namen my-icon definiert beispielsweise 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 entsprechenden CSS-Eigenschaften (dev happiness)

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

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. "my-style".
3. Wenden Sie diesen Stil auf ein oder mehrere Elemente an
4. Exportieren Sie die SVG

Die Elemente in der SVG erhalten ein Klassenattribut mit dem Wert "my-style". Dann können Sie externe CSS verwenden, um Stile zu überschreiben.

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

Einfacher Weg, es ist ähnlich wie bei Grunt, aber noch einfacher:

Geben Sie für alle Objekte, die Sie als Klasse definieren möchten, den Namen "myClassmainCircle" und "myClassmainStar" an. Nach dem Export alle ersetzen: 'id = "myClass' mit 'class ="'

Das Ergebnis wird sein: class = "mainCirle" class = "mainStar"