SVG 정보

GIF, JPEG, WBMP 및 PNG와 같은 웹용 비트맵 이미지 포맷은 픽셀 격자를 사용하여 이미지를 나타냅니다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽고 웹에서 많은 대역폭을 소비합니다. 반면에 SVG는 이미지를 모양, 패스, 텍스트, 필터 효과 등으로 나타내는 벡터 포맷입니다. 결과로 생성되는 파일은 크기가 작고 웹 상에서, 인쇄할 때 그리고 리소스가 제한되어 있는 휴대용 장치에서도 고품질의 그래픽을 제공합니다. 사용자는 선명도, 상세도 또는 명확성을 잃지 않고도 화면에서 SVG 이미지를 확대하여 볼 수 있습니다. 또한 SVG는 텍스트와 색상 지원이 뛰어나므로 Illustrator 대지에 나타나는 이미지 그대로 사용자에게 보여줄 수 있습니다.

SVG 포맷은 전적으로 XML을 기반으로 하며 개발자와 사용자 모두에게 여러 가지 이점을 제공합니다. SVG를 사용하면 XML과 자바스크립트를 사용하여 강조, 도구 팁, 오디오, 애니메이션 등의 복잡한 효과가 있는 사용자 액션에 응답하는 웹 그래픽을 만들 수 있습니다.

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

Illustrator에서 아트웍을 설정하는 방법은 결과로 생성된 SVG 파일에 영향을 줍니다. 다음 지침에 유의하십시오.

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

  • 서로 다른 레이어의 개체들을 투명하게 나타내려면 각 레이어 대신 각 개체의 불투명도를 조정합니다. 레이어 수준에서 불투명도를 바꾸면 결과로 생성된 SVG 파일은 Illustrator에 나타날 때처럼 투명도를 표시하지 않습니다.

  • 래스터 데이터는 SVG Viewer에서 크기를 조절할 수 없으며 다른 SVG 요소처럼 편집할 수 없습니다. 가능하면 SVG 파일에는 래스터화될 아트웍을 만들지 않도록 합니다. [래스터화], [예술 효과], [흐림 효과], [브러쉬 선], [왜곡], [픽셀화], [선명 효과], [스케치], [스타일화], [텍스처], [비디오] 효과 등을 사용하는 그라디언트 망과 개체는 SVG 포맷으로 저장될 때 래스터화됩니다. 마찬가지로, 이러한 효과를 포함하는 그래픽 스타일 또한 래스터화를 생성합니다. SVG 효과를 사용하면 래스터화 없이 그래픽 효과를 추가할 수 있습니다.

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

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

  • 자바스크립트 같은 스크립팅 언어는 SVG 파일에 무한한 기능을 제공합니다. 포인터와 키보드 이동으로 롤오버 효과 같은 스크립팅 기능을 호출할 수 있습니다. 스크립트에서는 또한 DOM(Document Object Model)을 사용하여 SVG 파일에 접근하고, SVG 요소를 삽입하거나 삭제하는 등 SVG 파일을 수정할 수 있습니다.

SVG 효과 적용

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

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

참고:

Illustrator의 기본 SVG 필터를 수정하려면 텍스트 편집기를 사용하여 Adobe SVG 필터를 편집하십시오.svg파일은 Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <version number> Settings/<location> 폴더에 있습니다. 기존 필터 정의를 수정하고 필터 정의를 삭제하며 새 필터 정의를 추가할 수 있습니다.

  1. 개체 또는 그룹을 선택하거나 [레이어] 패널에서 레이어를 대상으로 지정합니다.
  2. 다음 중 하나를 수행합니다.
    • 초기 설정값을 사용하여 효과를 적용하려면 효과 > SVG 필터 하위 메뉴의 맨 아래 섹션에서 효과를 선택합니다.

    • 사용자 정의 설정값을 포함하는 효과를 적용하려면 효과 > SVG 필터 > SVG 필터 적용을 선택합니다. 대화 상자에서 효과를 선택하고 [SVG 필터 편집] 단추를클릭합니다.초기 코드를 편집한 다음 확인을 클릭합니다.

    • 새 효과를 만들어 적용하려면 효과 > SVG 필터 > SVG 필터 적용을 선택합니다. 대화 상자에서 [새 SVG 필터]단추를 클릭하고,새 코드를 입력한 다음, 확인을 클릭합니다.

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

      참고: 개체가 여러 효과를 사용하는 경우 SVG 효과가 마지막 효과여야 합니다. 즉, 이 효과는 [모양] 패널 맨 아래([투명도] 항목 바로 위)에 나타나야 합니다. 다른 효과가 SVG 효과 뒤에 오면 SVG 출력은 래스터 개체로 구성됩니다.

SVG 파일에서 효과 불러오기

  1. 효과 > SVG 필터 > SVG 필터 불러오기를 선택합니다.

  2. 효과를 불러오려는 SVG 파일을 선택한 다음 열기를 클릭합니다.

SVG 상호 작용 패널 개요

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

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

  • 이벤트 하나를 삭제하려면 해당 이벤트를 선택하고 [삭제] 단추를 클릭하거나 패널 메뉴에서 이벤트 삭제를 선택합니다.
  • 모든 이벤트를 삭제하려면 패널 메뉴에서 이벤트 지우기를 선택합니다.

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

  1. [JavaScript 파일 연결] 단추 를 클릭합니다.
  2. [JavaScript 파일] 대화 상자에서 JavaScript 항목을 선택하고 다음 중 하나를 수행합니다.
    • 추가를 클릭하고 추가 JavaScript 파일을 찾습니다.

    • 제거를 클릭하여 선택한 JavaScript 항목을 제거합니다.

아트웍에 SVG 상호 작용 추가

  1. [SVG 상호 작용] 패널에서 이벤트를 선택합니다. 자세한 내용은 SVG 이벤트를 참조하십시오.

  2. 해당 자바스크립트를 입력하고 Enter 키를 누릅니다.

SVG 이벤트

onfocusin

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

onfocusout

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

onactivate

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

onmousedown

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

onmouseup

요소에서 마우스 단추를 놓을 때 액션을 트리거합니다.

onclick

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

onmouseover

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

onmousemove

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

onmouseout

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

onkeydown

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

onkeypress

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

onkeyup

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

onload

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

onerror

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

onabort

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

onunload

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

onzoom

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

onresize

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

onscroll

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

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

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

사용할 수 있는 옵션은 다음과 같습니다.

  • 스타일. 결과 코드를 SVG 파일에 작성하는 방법을 선택합니다. 내부 CSS, 인라인 스타일 또는 프레젠테이션 속성 스타일 중에서 선택합니다.
  • 글꼴. SVG 파일에 나타낼 글꼴을 선택합니다. 윤곽선은 패스 정의를 보존하며,호환성이 가장 높습니다.
  • 이미지: 이미지를 문서 내에 포함된 이미지로 저장할 것인지 또는 문서에 대한 외부 파일로 연결할 것인지 선택합니다.
  • 개체 ID: ID 유형(이름)을 SVG 파일의 개체에 지정하는 방법을 선택합니다. 레이어 이름, 최소 또는 고유 중에서 선택합니다. 이 옵션은 개체의 복제 이름을 처리하는 방식과 내보낸 CSS 파일에서 개체의 이름이 지정되는 방식을 결정합니다.
  • 10진수: 개체 위치의 정밀도를 위해 유지할 정보의 양을 선택합니다. 십진수 값이 클수록 개체가 배치되는 방법의 정밀도가 늘어나며, 이 경우 렌더링된 SVG를 시각적으로 정확하게 볼 수 있습니다. 하지만 십진수 값을 늘리면 결과로 내보낸 SVG의 파일 크기도 늘어납니다.
  • 축소: 빈 그룹과 빈 공간을 제거하여 SVG의 파일 크기를 최적화합니다. 이 옵션을 선택하면 결과 SVG 코드의 가독성이 줄어듭니다.
  • 반응형. 이 옵션을 선택하면 생성된 SVG의 크기가 브라우저 내에서 조절됩니다. 기록된 절대 크기 값은 없습니다.
  • 코드 표시: 내보낸 내용을 기본 텍스트 편집기에서 엽니다.
  • 브라우저에표시 (아이콘): 이미지를 기본 웹 브라우저에 표시합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책