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

21

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ń.

NerdCowboy
źródło
Nie mogę zmusić programu Illustrator do wyeksportowania z identyfikatorami lub klasami. Wolę jednak kodować moje pliki SVG, choć brzmi to dziwnie i niezbyt skutecznie, wiem. Czy możesz podać, jakiej wersji programu Illustrator używasz?
Daniel
Używam Adobe Illustrator CC wersja 17.1.0
NerdCowboy

Odpowiedzi:

5

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'
]);
Dan H.
źródło
7

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:Zapisz> Format: SVG> Opcje SVG> Więcej opcji> Właściwości CSS: Element stylu

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 .

justin
źródło
2

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: Opcje stylu graficznego

Eksportuj jako ... SVG:

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

  1. 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)

Goldins
źródło
1

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.

wpjmurray
źródło
0

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"

Shummy1991
źródło