웹 및 모바일 워크플로우에 맞게 최적화된 경량의 모던한 SVG를 내보내는 방법을 살펴봅니다.
export-svg_1408x792

Illustrator CC 2015의 최신 릴리스는 모던하고 효율적인 SVG 코드를 생성하는 새로운 방법을 제공합니다. SVG 코드를 내보내는 새로운 옵션의 웹 및 모바일 워크플로우에 대한 지원이 향상되어 고품질의 SVG 아트웍을 제작할 수 있습니다. 

향상된 기능은 다음과 같습니다.

  • 새로운 내보내기 옵션 — 손쉽게 편집 가능한 일반 SVG 코드 내보내기, 코드 크기를 줄이기 위한 SVG 축소 및 고유한 ID
  • 모양, 그라디언트, 패턴, 심볼 및 마스크가 적용된 오브젝트와 같이 SVG 아트 오브젝트를 고품질로 출력
  • 보다 정교한 텍스트 처리를 통해 윤곽선 및 작은 크기의 텍스트로 변환
  • 향상된 대지 내보내기 및 아트 테두리 자르기
  • 디자인의 개별 구성 요소 내보내기
  • 투명 모드 및 혼합 모드 지원

 

5286-export-svg-fig01480572984898

1. SVG로 아트 내보내기

아트웍을 SVG로 저장하려면 파일 > 내보내기 > SVG(svg)를 선택합니다.

대지의 콘텐츠를 개별 SVG 파일로 내보내려면 대지 사용을 체크 표시합니다. 내보내기를 클릭하여 SVG 옵션 대화 상자를 엽니다.

참고: 대지 사용 체크 상자를 체크 표시하지 않는 경우 SVG 파일의 뷰포트는 문서에 있는 모든 오브젝트의 결합된 테두리로 설정됩니다.

5286-export-svg-fig11480573001416

2. 개별 구성 요소 내보내기

SVG 내보내기를 사용하면 대지 전체가 아니라 개별 구성 요소나 디자인의 섹션 전체를 내보낼 수 있습니다. 

디자인의 한 섹션 또는 구성 요소를 SVG로 내보내려면 선택한 다음 파일 > 선택 항목 내보내기 > SVG (svg)를 선택합니다.

5286-export-svg-fig21480572995347

3. SVG 옵션 입력

SVG 옵션에서 CSS, 글꼴 및 기타 메뉴에서 아트웍에 적합한 설정을 선택합니다.

ID, 들여쓰기, 줄 및 여백을 최소화한 SVG 코드를 생성하려면 축소를 체크 표시합니다.

확인을 클릭합니다.

SVG 옵션에 대한 자세한 내용은 SVG를 참조하십시오.

참고: SVG 코드를 내보낸 다음 세부적으로 편집하려면 Illustrator를 다시 열지 않고 원본 Illustrator(.ai) 문서를 열어 SVG로 다시 내보냅니다.

5286-export-svg-fig31480572995797

 

이상입니다. 이제 모든 작업이 끝났습니다. 이 튜토리얼에 대한 여러분의 의견을 보내주십시오.

 

10/16/2019

Contributor: Wren Sauer

이 페이지가 도움이 되었습니까?