SVG

SVG는 이미지를 모양, 패스, 텍스트, 필터 효과 등으로 나타내는 벡터 형식입니다. 결과 파일은 크기가 작으며 용량이 큰 GIF, JPEG, WBMP 및 PNG와 달리 웹, 인쇄물, 심지어 리소스가 제한된 휴대용 디바이스에서도 고품질 그래픽을 제공합니다. 사용자는 선명도, 상세도 또는 명확성을 잃지 않고도 화면에서 SVG 이미지를 확대하여 볼 수 있습니다. 또한 SVG는 텍스트와 색상 지원이 뛰어나므로 Illustrator 아트보드에 나타나는 이미지 그대로 사용자에게 보여 줄 수 있습니다.

SVG 포맷은 전적으로 XML을 기반으로 하며 개발자와 사용자 모두에게 여러 가지 이점을 제공합니다. 

저장, 다른 이름으로 저장, 사본 저장 또는 웹 및 디바이스용으로 저장 명령을 사용해 아트워크를 SVG 포맷으로 저장할 수 있습니다. 전체 SVG 내보내기 옵션에 액세스하려면 저장, 다른 이름으로 저장 또는 사본 저장 명령을 사용합니다. 웹 및 디바이스용으로 저장 명령에서는 웹 지향적인 작업에 적절한 SVG 내보내기 옵션의 하위 세트를 제공합니다.

SVG 효과 적용

SVG 효과를 사용하여 그림자 만들기 같은 그래픽 속성을 아트워크에 추가할 수 있습니다. SVG 효과는 XML을 기반으로 하며 해상도에 독립적이라는 점에서 비트맵 필터와 다릅니다. 실제로 SVG 효과는 다양한 수학적 연산을 설명하는 일련의 XML 속성에 불과합니다. 결과로 나타나는 효과는 소스 그래픽 대신 대상 오브젝트에 렌더링됩니다.

Illustrator에서는 기본 SVG 효과 세트를 제공합니다. 기본 속성이 있는 효과를 사용하거나, XML 코드를 편집하여 사용자 정의 효과를 생성하거나, 새 SVG 효과를 작성할 수 있습니다.

SVG 필터 효과를 적용하면 Illustrator에서는 래스터화된 버전 효과를 아트보드에 표시합니다. 문서의 래스터화 해상도 설정을 수정하면 이 미리보기 이미지의 해상도를 조절할 수 있습니다.

SVG 파일에서 효과 불러오기

[SVG 상호 작용] 패널 개요

[SVG 상호 작용] 패널을 사용하여 현재 파일과 관련된 이벤트와 JavaScript 파일을 모두 볼 수 있습니다.
웹 브라우저에서 보기 위해 아트워크를 내보낼 때 [SVG 상호 작용] 패널([Window ]> [SVG 상호 작용])을 사용하여 아트워크에 상호 작용을 추가할 수 있습니다. 예를 들어 [JavaScript] 명령을 트리거하는 이벤트를 만들어 사용자가 마우스 커서를 오브젝트로 이동하는 등의 액션을 수행할 때 웹 페이지에 신속하게 움직임을 만들 수 있습니다.

[SVG 상호 작용] 패널에서 이벤트 삭제

[SVG 상호 작용] 패널을 사용하여 하나 또는 모든 이벤트를 삭제할 수 있습니다.

파일에 연결된 이벤트 나열, 추가 또는 제거

링크 JavaScript 파일을 선택하고 추가를 선택하여 다른 JavaScript 파일을 추가하고, 선택한 JavaScript 항목을 제거하려면 제거를 선택합니다.

아트워크에 SVG 상호 작용 추가

SVG 이벤트

요소가 포커스를 받을 때(예: 포인터로 선택) 액션을 트리거합니다.

요소가 포커스를 잃을 때(주로 다른 요소가 포커스를 받을 때) 액션을 트리거합니다.

SVG 요소에 따라 마우스 클릭 또는 키 누름으로 액션을 트리거합니다.

요소에서 마우스 버튼을 누를 때 액션을 트리거합니다.

요소에서 마우스 버튼을 놓을 때 액션을 트리거합니다.

요소에서 마우스를 클릭할 때 액션을 트리거합니다.

포인터를 요소 위로 이동할 때 액션을 트리거합니다.

포인터가 요소에 있는 동안 액션을 트리거합니다.

포인터를 요소에서 다른 곳으로 이동할 때 액션을 트리거합니다.

키를 누를 때 액션을 트리거합니다.

키를 누르고 있는 동안 액션을 트리거합니다.

키를 놓을 때 액션을 트리거합니다.

브라우저의 SVG 문서 구문 분석이 완전히 끝나면 액션을 트리거합니다. 이 이벤트를 사용하여 한 번만 초기화하는 기능을 호출합니다.

요소를 제대로 불러오지 못하거나 다른 오류가 발생한 경우 액션을 트리거합니다.

요소를 완전히 불러오기 전에 페이지 불러오기가 중단된 경우 액션을 트리거합니다.

SVG 문서가 창 또는 프레임에서 제거되면 액션을 트리거합니다.

문서의 확대/축소 수준을 바꾸면 액션을 트리거합니다.

문서 보기 크기를 조절할 때 액션을 트리거합니다.

문서 보기를 스크롤하거나 초점을 이동할 때 액션을 트리거합니다.

SVG 파일 생성 팁

• 레이어를 사용하여 SVG 파일에 구조를 추가합니다. 아트워크를 SVG 포맷으로 저장할 때 각 레이어는 그룹(<g>) 요소로 변환됩니다. 예를 들어 Button1이라는 이름의 레이어는 SVG 파일에서는 <g id="Button1_ver3.0">이 됩니다. 부속 레이어는 SVG 부속 그룹이 되고, 숨겨진 레이어는 표시="없음" SVG 스타일 속성으로 보존됩니다.

• 서로 다른 레이어의 오브젝트들을 투명하게 나타내려면 각 레이어 대신 각 오브젝트의 불투명도를 조정합니다.

• 래스터 데이터는 SVG Viewer에서 크기를 조절할 수 없으며, 다른 SVG 요소처럼 편집할 수 없습니다. SVG 파일에는 래스터화될 아트워크를 만들지 않도록 합니다. SVG 효과를 사용하면 래스터화 없이 그래픽 효과를 추가할 수 있습니다.

• 심볼을 사용하고 아트워크의 패스를 단순화하여 SVG 성능을 향상시킵니다. 또한 성능을 우선적으로 고려하는 경우 [목탄], [재], [스크롤 펜] 등 경로 데이터를 많이 생성하는 브러시 사용은 피합니다.

• 분할 영역, 이미지 맵 및 스크립트를 사용하여 SVG 파일에 웹 연결을 추가합니다.

• 자바스크립트 같은 스크립팅 언어는 SVG 파일에 무한한 기능을 제공합니다. 포인터와 키보드 이동으로 롤오버 효과 같은 스크립팅 기능을 호출할 수 있습니다.

웹에 최적화된 SVG 내보내기 옵션

새 SVG 내보내기(파일 > 내보내기 > 내보내기 형식 > SVG) 옵션을 사용할 수 있습니다. 새 작업 과정을 사용하여 웹 및 화면 디자인 프로젝트용으로 표준화된 웹 최적화 SVG 파일을 생성할 수 있습니다. 자세한 내용은 SVG 내보내기 옵션을 참조하십시오.

관련 리소스

당사에 문의하기