Podaj nazwy klas CSS na ścieżkach SVG za pomocą programu Illustrator

Czy istnieje sposób edycji plików SVG w programie Illustrator, w którym można określić klasę CSS dla każdej ścieżki?

Wiem już w programie Illustrator, że jeśli nadasz nazwie warstwy faktyczną nazwę, Illustrator użyje tej nazwy jako identyfikatora ścieżki, co jest w porządku, jeśli nie planujesz ponownego użycia ikony więcej niż raz na tej samej stronie.

Moim bieżącym obejściem jest po prostu użycie metody ID, ale później konwersja ID na klasy w moim edytorze kodu, ale dość denerwujące jest to, że muszę to robić za każdym razem, gdy generuję duszka SVG.

Jeśli nie jest to obecnie możliwe w programie Illustrator, czy istnieją inne aplikacje, które pozwalają to określić? A może pakiet Grunt lub Gulp?

Wygląda na to, że możesz zrobić to z Inkscape za pomocą hacka , więc mogę na to spojrzeć, jeśli nie ma innych dobrych rozwiązań.

Robię to z zadaniem Grunta. Używając „pomrukuj tekst” jestem w stanie przekazać moje zminimalizowane pliki SVG (svgmin) przez niestandardowe wyrażenie regularne, które zastępuje wszystkie zniekształcone odwołania do klas odpowiednimi klasami.

W programie Illustrator zadeklaruj na przykład nazwę warstwy / obiektu jako class = "tree" . Zostanie to wyeksportowane przez Illustrator jako id = "class =" tree "" . Poniższe zadanie gruntu zajmie się tym i sprawi, że będzie to class = "tree" . Wklejam również poniżej inne podzadania, które wykonają czyszczenie identyfikatora (zalecane).

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

Następnie możesz wywołać to zadanie w swoim Gruntfile jako:

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

Wygląda na to, że link wysłany przez Iana Dunna może być twoim biletem. Oto fragment tej strony :

W opcjach eksportu SVG wybieram Elementy stylu i opcję Dołącz nieużywane style graficzne. Zadeklaruje sandStyle i blueSky jako style CSS w dokumencie SVG.

Oto dane wyjściowe SVG wygenerowane przez program 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>

Program Illustrator może eksportować style graficzne jako CSS w elemencie stylu i stosować je za pomocą klas w kodzie SVG. W ten sposób możesz generować klasy w eksportowanym pliku SVG. W zależności od tego, co chcesz zrobić, możesz po prostu zdefiniować je w innym pliku CSS i usunąć definicje stylów z eksportowanego pliku SVG.

Stwierdzono to na połączonej stronie, ale ze względu na kompletność program Illustrator wygeneruje element stylu i klasy tylko wtedy, gdy zostanie ustawiony CSS Properties: Style Elementw obszarze Zaawansowane (może być konieczne kliknięcie More Options) okna dialogowego Opcje SVG:

Chciałbym również zauważyć, że wygenerowany kod nigdy nie będzie idealny dla wszystkich sytuacji. Odręczny kod wydaje się być lżejszy i łatwiejszy do odczytania dla ludzi (jeśli o to właśnie chodzi). Poleciłbym przeczytać dokument Quibika użytkownika Wikimedia na temat ręcznego czyszczenia plików SVG i rzucić okiem na grunt-svgmin .

Właśnie natrafiłem na ten problem i znalazłem następujące rozwiązanie (dla programu Illustrator CC):

Zastosuj nazwane „Style graficzne” do ścieżek, które chcesz nazwać, i wyeksportuj SVG z wewnętrznym CSS. Na przykład styl graficzny o nazwie moja ikona definiuje wewnętrznymy-icon klasę i zastosuje tę klasę do odpowiednich ścieżek.

Przykład ze zrzutami ekranu:

Utwórz nowy styl graficzny:

Eksportuj jako ... SVG:

Wydajność:

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

Źródło: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

5. Użyj odpowiedniego ustawienia właściwości CSS (szczęście dewelopera)

CC: program illustrator używa zdefiniowanych stylów graficznych do tworzenia nazwanych klas (inteligentne, przydatne)

W programie Illustrator 21.0.0 (2017) i prawdopodobnie we wcześniejszych wersjach:

1. Utwórz nowy styl w panelu Style graficzne
2. Kliknij dwukrotnie nowy styl i nadaj mu niestandardową nazwę, na przykład „mój styl”
3. Zastosuj ten styl do jednego lub więcej elementów
4. Wyeksportuj SVG

Elementy SVG otrzymają atrybut klasy o wartości „mój styl”. Następnie możesz użyć zewnętrznego CSS, aby zastąpić style.

Zauważ, że jeśli nazwa twojego stylu zawiera spację, zostanie przekonwertowana na myślnik.

Prosty sposób na zrobienie tego, podobny do zadania Grunta, ale jeszcze łatwiejszy:

Wszystkim obiektom, które chcesz stworzyć klasę, nadaj nazwę na przykład: „myClassmainCircle” i „myClassmainStar”. Po wyeksportowaniu zamień wszystko: „id =" myClass ”na„ class = "”

Wynik będzie następujący: class = "mainCirle" class = "mainStar"