Illustrator를 사용하여 SVG 경로에 CSS 클래스 이름 지정

각 경로에 CSS 클래스를 지정할 수있는 Illustrator에서 SVG 파일을 편집하는 방법이 있습니까?

레이어 이름에 실제 이름을 지정하면 Illustrator에서 해당 이름을 경로의 ID로 사용한다는 사실을 이미 알고 있습니다. 같은 페이지에서 아이콘을 두 번 이상 재사용하지 않을 경우 좋습니다.

현재 해결 방법은 IDs 메서드를 사용하는 것이지만 나중에 코드 편집기에서 ID를 클래스로 변환하는 것이지만 SVG 스프라이트를 생성 할 때마다 수행해야하는 것은 매우 성가신 일입니다.

현재 Illustrator에서 사용할 수없는 경우이를 지정할 수있는 다른 앱이 있습니까? 아니면 그런트 또는 펄프 패키지?

당신이와 잉크 스케이프와 함께 할 수있을 것 같습니다 해킹 내가 거기에서 다른 좋은 솔루션을 존재하지 않는 경우는 것을 볼 수 있도록.

그런 작업을 수행합니다. "grunt-text-replace"를 사용하여 모든 깨진 클래스 참조를 적절한 클래스로 대체하는 사용자 정의 정규 표현식을 통해 축소 된 SVG (svgmin)를 전달할 수 있습니다.

Illustrator에서 레이어 / 객체 이름을 class = "tree" 로 선언하십시오 . Illustrator에서 id = "class ="tree "" 로 내보내집니다 . 아래의 grunt 태스크는 그것을 처리하고 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.

또한 생성 된 코드가 모든 상황에 완벽하게 적용되지는 않습니다. 손으로 쓴 코드는 사람이 더 가볍고 읽기 쉬운 경향이 있습니다 (필요한 경우). SVG 파일을 수동 으로 정리하고 grunt-svgmin을 살펴 보는 위키 미디어 사용자 Quibik의 문서를 읽는 것이 좋습니다 .

방금이 문제가 발생하여 다음 솔루션 (Illustrator CC 용)을 찾았습니다.

명명 된 경로에 명명 된 "그래픽 스타일"을 적용하고 SVG를 내부 CSS와 함께 내 보냅니다. 예를 들어, 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 속성 설정 사용 (행복)

CC : 일러스트 레이터는 정의 된 그래픽 스타일을 사용하여 명명 된 클래스 (스마트하고 유용한)를 만듭니다.

Illustrator 21.0.0 (2017) 및 이전 버전에서 가능 :

1. 그래픽 스타일 패널에서 새 스타일 만들기
2. 새 스타일을 두 번 클릭하고 "my-style"과 같은 사용자 정의 이름을 지정하십시오.
3. 해당 스타일을 하나 이상의 요소에 적용
4. SVG 내보내기

SVG의 요소에는 "my-style"값을 가진 클래스 속성이 제공됩니다. 그런 다음 외부 CSS를 사용하여 스타일을 재정의 할 수 있습니다.

스타일 이름에 공백이 있으면 하이픈으로 변환됩니다.

간단한 방법으로 Grunt 작업과 비슷하지만 훨씬 더 쉽습니다.

클래스를 만들려는 모든 객체에 "myClassmainCircle"및 "myClassmainStar"와 같은 이름을 지정하십시오. 내 보낸 후 'id = "myClass'를 'class ="'로 바꿉니다.

결과는 다음과 같습니다. class = "mainCirle"class = "mainStar"