<.> 그게 다야.
우리는 이와 같은 SVG 파일을 정리해야합니다. 물론 수동으로 수행 할 수 있지만 많은 그래픽 요소를 관리해야하거나 더 많은 프로젝트에서 빠르게 편집하고 재사용 해야하는 경우 더 똑똑하고 빠른 워크 플로가 필요합니다. Adobe Illustrator와 약간의 꿀벌을 사용하여 솔루션을 찾았습니다. SVG 기호 건축 워크 플로우
이 기술의 원리는 "자신의 SVG 아이콘 빌드 빌드"및 "일러스트 레이터 및 Icomoon을 사용하여 아이콘 글꼴 생성"에서 소개 한 것과 동일하므로 첫 번째 단계를 확인하십시오.
아래 이미지와 마찬가지로 두 가지 요소가 있다고 가정합니다. 각 요소는 특정 아트 보드로 배열됩니다
편의를 위해, 우리는 채우기 색상 (및 뇌졸중, 스트로크 크기 등)이 CSS를 통해 편집 될 것이라는 것을 알고 있지만 몇 가지 색상을 추가했습니다.
각 기호에는 아트 보드가 있어야하므로 이제 각 이미지가 각 색상의 부분만큼 많은 아트 보드로 분류해야합니다.
이것은 Illustrator에서 매우 빠르게 수행 할 수 있으며, 각 요소를 자르고, 대상 아르트 보드를 선택하고, 페이스트를 제자리에 선택하는 명령을 선택할 수 있습니다.
각 아트 보드에는 특정 이름이 있습니다. 상징적 인 ID에 사용됩니다.
이제 우리는 새로운 "파일 → 내보내기 → 화면으로 내보내기"명령을 사용하여 Artboard를 SVG로 내보낼 수 있습니다. 
이것은 최신 일러스트 레이터 버전에 정말 유용한 새로운 도구입니다. 단일 명령을 사용하여 각 아르트 보드 또는 사용자 정의 리소스를 여러 형식으로 저장할 수 있습니다.
> 내보내기 패널에서 "아트 보드"를 선택하고 "SVG"를 출력 형식으로 설정하고 대상 폴더를 선택하십시오.
각 아르트 보드는 단일 SVG 파일로 내보낼 것입니다 :
이제 모든 파일을 SVG 기호로 결합하고 원치 않는 SVG 속성을 제거해야합니다.
다음 섹션은 약간 기술적이지만, 원하는 경우, 다재다능한 SVG를 생성하는 빠르고 간결한 방법을 제공합니다.
나는 itepoint에서 Gulp에 대해 글을 썼는데, Gulp 설치 및 모든 관련 매개 변수에 대해 온라인으로 많은 리소스를 찾을 수 있으므로 설치했다고 가정하고 우리가 무엇을 말하는지 알고 있습니다.
어쨌든, Gulp가 마음에 들지 않으면 다음 단계를 모두 수동으로 완료 할 수도 있습니다. Gulp 사용을 시작하기 전에 여러 번이 작업을 수행했습니다. 확실히 배우는 좋은 방법이며, 소규모 프로젝트 나 지속적인 편집 및 유지 보수가 필요하지 않은 장소에서 충분합니다.
따라서 우리는 몇 가지 SVG 파일이 있습니다. 각각 아래 예제와 같이 배열됩니다 (편의를 위해 D 속성이 단축되었습니다) : ..top { fill: #356BA5; }
.right { fill: #357FD9; }
/* and so on... */
우리의 목표는 모든 이미지를 원치 않는 속성을 모두 제거하는 동안 모든 이미지를 단일 파일의 SVG 기호로 배열하는 것입니다.
Gulp 이외의
우리의 작업은 다른 확장이 필요합니다.
우선, Gulp-Svgstore 및 Gulp-Svgmin은 SVG 파일을 결합하고 압축하는 데 사용됩니다
Gulp-Rename은 ID 이름을 조정하고 대상 파일의 이름을 지정하는 데 사용됩니다. 이 모듈은 이전 Illustrator SVG Export 명령을 사용하려는 경우 특히 필요합니다. 나중에 다룰 것입니다. <svg xmlns="https://www.w3.org/2000/svg">
<symbol id="top" viewBox="0 0 54 54">
<polygon points="54 0 0 0 27 27 54 0"></polygon>
</symbol>
<symbol id="right" viewBox="0 0 54 54">
<polygon points="54 54 54 0 27 27 54 54"></polygon>
</symbol>
<symbol id="bottom" viewBox="0 0 54 54">
<polygon points="0 54 54 54 27 27 0 54"></polygon>
</symbol>
<symbol id="left" viewBox="0 0 54 54">
<polygon points="0 0 0 54 27 27 0 0"></polygon>
</symbol>
</svg>
이제 우리는 gulpfile을 정리할 수 있습니다 (코드는 공개 요점으로도 얻을 수 있음) :
모듈을로드 한 후 파일에 구문 분석을 지시합니다 (SVG_FILES/*. SVG).
svgstore는 각 파일의 이름을 사용하여 Symber ID 속성을 설정합니다 (즉, umbrella.svg라는 파일은 가있는 기호가됩니다). 새 Illustrator Export를 화면 패널로 사용하는 경우 파일의 이름이 명령을 변경하지 않아도됩니다. 파일의 이름이 속한 아트 보드와 정확히 동일하기 때문입니다. -
그러나 삽화의 기존 버전은 삽화가 파일 이름을 아트 보드 이름으로 연결하여 파일 이름을 만듭니다. 따라서 일러스트 레이터 파일 이름 접두사를 제거하려면 파일 이름을 바꿔야합니다.
이제 파일을 청소할 수 있습니다. Gulp-Svgmin은 "SVG 벡터 그래픽 파일을 최적화하기위한 NodeJS를 기반으로 한 도구"(Jake Archibald는 SVGO의 온라인 버전을 출시했는데, 이는 수동으로 파일을 예약하려면 매우 유용합니다)의 GULP 버전 "SVGO"(Jake Archibald는 매우 유용합니다)입니다. -
svgo는 많은 구성 가능한 옵션이 있습니다 (프로젝트 페이지에서 모든 것을 찾아 볼 수 있음). 그러나 몇 가지만 필요합니다 (물론 원하는대로 스크립트를 사용자 정의 할 수 있습니다).
CleanupIds : 파일 에서 모든 ID를 제거하십시오
removedocType, RemoveComments 및 RemovestyleElement : 모든 문서 유형 선언, 댓글 및
요소를 제거하십시오.
removedImensions : 뷰 박스가 존재하면 모든 너비와 높이 특성이 삭제됩니다
CleanupNumericValues : 값을 합리적인 정확도 수준으로 반올림
removeAttrs : 지정된 모든 속성을 제거하십시오
다음으로 파일을 svgstore로 전달하여 고유 한 파일로 결합 한 다음 이름을 바꾸고 저장하십시오. <svg>
<use class="top" xlink:href="#top"></use>
<use class="right" xlink:href="#right"></use>
<use class="bottom" xlink:href="#bottom"></use>
<use class="left" xlink:href="#left"></use>
</svg>
몇 번 사용한 후에는 각 프로젝트에 대해 몇 분 안에 예약 할 수 있어야하며 필요한 경우 SVG 심볼 파일을 신속하게 재건 할 수 있습니다.
다음은 결과 예입니다 (이 펜에서도 편의를 위해 SVG 파일을 내장했지만 외부 파일로 안전하게 연결할 수 있습니다) : .
코드 펜 링크 4
경고가 있습니까? id="umbrella"
이 방법은 스타일의 사용 요소를 기반으로하기 때문에 폴리 플릴 (예 : SVG4EveryBody)이 삭제할 때 문제가 있습니다.
외부 상징적 링크 (모든 IE)를 지원하지 않는 브라우저에서 svg4everybody 는 모든 사용 요소를 일치하는 기호의 내용으로 대체합니다. 따라서 사용에 적용되는 모든 CSS 규칙은 적용되지 않습니다.
이것은 내부 상징적 요소 (경로, 원 등)에 맞게 CSS 선택기를 조정하여 해결할 수 있지만 약간 까다로울 수 있습니다.
아웃 보너스
이 워크 플로에는 무제한 변형이 있습니다. 스트로크, 텍스트 등을 처리 할 수 있습니다.
탐색 할 가치가있는 또 다른 흥미로운 기능은 일러스트 레이터 기호를 사용하는 것입니다. SVG 기호로 내보내므로 많은 가능성을 제공합니다.
읽어 주셔서 감사합니다.
피부가있는 SVG 기호 에 대한 자주 묻는 질문
웹 디자인을위한 다른 이미지 형식 대신 SVG 기호를 사용하는 장점은 무엇입니까?
SVG 기호는 JPEG, PNG 또는 GIF와 같은 다른 이미지 형식에 비해 많은 장점이 있습니다. 첫째, SVG는 확장 가능한 벡터 그래픽으로 품질을 잃지 않고 크기를 조정할 수 있습니다. 이것은 다른 크기의 다른 장치에 동일한 이미지를 표시 해야하는 반응 형 웹 디자인에 특히 유용합니다. 둘째, SVG 기호는 CSS를 사용하여 스타일링하여 설계 유연성을 향상시킬 수 있습니다. 마지막으로 SVG의 파일 크기는 일반적으로 비트 맵 대응 물보다 작으므로로드 속도를 높이고 웹 사이트 성능을 향상시킬 수 있습니다.
SVG 기호의 색상을 수정하는 방법은 무엇입니까?
CSS를 사용하여 SVG 기호의 색상을 수정할 수 있습니다. 기본적으로 SVG는 부모 요소의 색상을 상속합니다. 그러나 SVG 또는 하위 요소를 CSS에 배치하고 원하는 색상을 적용 하여이 설정을 무시할 수 있습니다. 예를 들어,
속성을 사용하여 SVG 내부의 색상을 변경하거나 속성을 사용하여 개요의 색상을 변경할 수 있습니다.
모든 웹 브라우저에서 SVG 기호를 사용할 수 있습니까?
SVG 기호는 Chrome, Firefox, Safari 및 Edge를 포함한 모든 최신 웹 브라우저에서 널리 지원됩니다. 그러나 이전 버전의 Internet Explorer (IE8 이하)는 SVG를 지원하지 않습니다. 이러한 이전 브라우저를 지원 해야하는 경우 PNG 또는 JPEG 이미지를 폴백으로 제공해야 할 수도 있습니다.
SVG 기호를 애니메이션하는 방법은 무엇입니까?
CSS 애니메이션 또는 JavaScript를 사용하여 SVG 기호를 애니메이션 할 수 있습니다. CSS 애니메이션은 더 간단하고 성능이 향상되지만 JavaScript는 더 많은 제어와 유연성을 제공합니다. 위치, 크기, 회전, 색상 및 불투명도와 같은 SVG의 다양한 특성을 애니메이션 할 수 있습니다.
html에서 svg 기호를 사용할 수 있습니까?
예, SVG 기호는 HTML에 직접 내장 할 수 있습니다. 이것은 및 태그를 사용하여 수행 할 수 있습니다. 태그는 SVG 기호를 정의하는 데 사용되며 태그는이를 인스턴스화하는 데 사용됩니다. 이를 통해 SVG 기호를 한 번에 정의하고 HTML 전체에서 여러 번 재사용 할 수 있습니다.
내 SVG 기호를보다 접근하기 쉽게 만드는 방법은 무엇입니까?
SVG 기호에 더 액세스 할 수 있도록하려면 SVG의
및 태그를 사용하여 대체 텍스트를 제공해야합니다. 태그는 SVG에 대한 짧은 설명 제목을 제공하고 태그는 더 긴 설명을 제공합니다. 이 태그는 스크린 리더가 읽고 시각 장애가있는 사용자에게 중요한 컨텍스트를 제공합니다. CSS에서 SVG 기호를 사용할 수 있습니까?
예, SVG 기호는 CSS의 배경 이미지로 사용할 수 있습니다. 이는 SVG를 데이터 URL로 인코딩하고이를
속성의 값으로 사용하여 수행 할 수 있습니다. 그러나이 방법을 사용하면 CSS로 SVG를 스타일링하거나 애니메이션 할 수 없습니다.
성능을 위해 SVG 기호를 최적화하는 방법은 무엇입니까? background-image
성능을 위해 SVG 기호를 최적화하는 몇 가지 방법이 있습니다. 먼저 SVG 코드를 압축하여 파일 크기를 줄일 수 있습니다. 둘째, GZIP 압축을 사용하여 파일 크기를 더욱 줄일 수 있습니다. 마지막으로 HTTP/2를 사용하여 SVG에 서비스를 제공 할 수있어보다 효율적이고 효율적인 데이터 전송이 가능합니다.
JavaScript에서 SVG 기호를 사용할 수 있습니까?
예, SVG 기호는 JavaScript에서 작동 할 수 있습니다. 이를 통해 색상, 크기, 위치 및 가시성과 같은 SVG의 특성을 동적으로 변경할 수 있습니다. JavaScript를 사용하여 SVG를 애니메이션하고 대화식 SVG를 생성하며 SVG를 동적으로로드 할 수도 있습니다.
반응 형 SVG 기호를 만드는 방법은 무엇입니까?
응답 형 이를 통해 SVG는 부모 요소로 스케일링 할 수 있습니다. 또한
이 기사는 SVG 이미지의 "골격"이 변경되지 않은 상태로 유지되는 "탈착식 SVG 기호"의 개념을 소개합니다. 그러나 표면 모양은 쉽게 변경 될 수 있습니다. 
