본문 바로가기
카테고리 없음

[어도비 일러스트] SVG 파일로 빠르게 내보내는 방법 4단계

by yoohoo 2024. 6. 27.
728x90

안녕하세요, 오늘은 어도비 일러스트레이터에서 작업물을 SVG 파일로 내보내는 방법에 대해 자세히 알아보려고 합니다. SVG(Scalable Vector Graphics) 파일은 웹과 디지털 디자인에서 많이 사용되는 파일 형식으로, 벡터 그래픽을 유지하면서도 크기 조정이 자유롭고, 파일 크기가 작아 유용하게 사용됩니다. 이제 일러스트레이터에서 SVG 파일로 내보내는 방법을 단계별로 설명해드리겠습니다.

 

 

 

 

 


 

 

 

 

image
svg

 

SVG 파일이란?

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지 포맷입니다. 웹 디자인, 아이콘, 로고 등 다양한 그래픽 작업에서 널리 사용되며 CSS와 JavaScript를 이용해 애니메이션 효과를 줄 수 있습니다.

SVG 파일은 해상도에 구애받지 않고 크기를 자유롭게 조정할 수 있으며, 파일 크기가 작아 웹 페이지 로딩 속도를 빠르게 할 수 있다는 장점이 있습니다.

 

 

 

 

일러스트레이터에서 SVG 파일로 내보내기

일러스트레이터에서 작업한 그래픽을 SVG 파일로 내보내기 위해 다음 단계에 따라 진행해주세요.

 

 

 

1. 디자인 작업 완료

먼저, 일러스트레이터에서 원하는 그래픽 디자인 작업을 완료합니다. 모든 요소가 원하는 대로 배치되고 색상, 선, 도형 등이 모두 만족스럽게 설정되었는지 확인합니다.

image
1. 디자인 작업 완료

 

 

 

 

 

2. 아트보드 크기 설정

SVG 파일로 내보낼 때 아트보드 크기는 중요한 요소입니다. 아트보드의 크기를 적절하게 설정해야 내보내는 SVG 파일의 크기도 올바르게 설정됩니다.

  • 아트보드 도구를 선택하거나 단축키 Shift + O를 누릅니다.
  • 원하는 크기로 아트보드를 조정합니다.

image
2. 아트보드 크기 설정

 

  • 메뉴 '오브젝트' 탭 > 대지 > 아트웍 테두리에 맞추기를 선택해 한 번에 맞출 수 있는 방법도 있으니 참고해주세요.

image
2. 아트보드 크기 설정

 

 

 

 

 

3. 파일 내보내기

이제 실제로 SVG 파일로 내보내는 단계입니다. 

 

  • 파일 > 내보내기 > 내보내기 형식으로 이동합니다.
  • 내보내기 형식 창이 열리면, 파일 형식을 SVG로 선택합니다.
  • 파일 이름을 지정하고, 저장 위치를 선택합니다.
  • 내보내기(Export) 버튼을 클릭합니다.

 

image
3. 파일 내보내기

 

 

 

 

 

 

4. SVG 옵션 설정

 

내보내기 버튼을 클릭하면 SVG 옵션 창이 나타납니다. 여기서 중요한 설정 몇 가지를 살펴보겠습니다.

 

  • CSS 속성: 스타일 정보를 포함하는 방법을 선택합니다. 일반적으로 프레젠테이션 속성을 선택합니다.
  • 이미지 위치: 이미지가 포함된 경우, 이미지를 포함할지 링크할지 선택합니다. 특별한 경우가 아니라면 웹에서 사용할 경우 '포함' 을 선택하는 것이 좋습니다.

 

모든 설정을 완료한 후 확인(OK) 버튼을 클릭하면 SVG 파일 내보내기가 완료됩니다.

image
4. SVG 옵션 설정

 

 

 

추가 TIP

내보낸 SVG 파일을 웹에서 사용할 경우, 파일 크기를 줄이기 위해 최적화하는 것이 좋습니다. SVGOMG와 같은 플랫폼을 활용하여 불필요한 데이터를 제거하고 파일 크기를 줄일 수 있습니다.

 

SVGOMG - SVGO's Missing GUI

Easy & visual compression of SVG images.

jakearchibald.github.io

 

 

 

 


 

 

 

마치며

어도비 일러스트레이터에서 SVG 파일로 내보내는 방법을 단계별로 설명해드렸습니다. 올바른 설정과 최적화를 통해 고품질의 SVG 파일을 생성하여 웹과 디지털 디자인 프로젝트에서 효율적으로 사용할 수 있습니다. 여러분의 디자인 작업에 도움이 되기를 바랍니다.

728x90