크기를 바꿀 수 있는 벡터 그래픽

크기를 바꿀 수 있는 벡터 그래픽(SVG: Scalable Vector Graphics)을 소개한다. 맨 아래 링크한 사이트 일부를 우리말로 옮기려고 한다. 영어 잘하는 사람은 그냥 링크를 열어서 공부하면 된다.

1장 소개

이글은 크기를 바꿀 수 있는 벡터 그래픽(Scalable Vector Graphics (SVG):이하 에스브이지)의 모양과 구문에 대한 설명서이다.

1.1. 에스브이지에 대하여

에스브이지는 2차원 그래픽을 위한 언어다. 홀로 쓰는 형식 또는 다른 엑스엠엘과 같이 쓸 때, 엑스엠엘 구문으로 써야 한다. 에이치티엠엘 문서 안에서 에스브이지 코드는 에이치엠엘 구문으로 써야 한다.  에스브이지는 세 가지 그래픽 도형으로 쓸 수 있다. 세 가지는 벡터 그래픽(예 경로가 직선과 곡선으로 이루어진 그래픽), 이미지 그리고 텍스트이다. 그래픽 대상은 묶거나 스타일을 정해 주고 옮기고 합성할 수 있다. 도형 집합은 중첩된 변형, 잘라내는 경로, 알파 마스트, 필터 효과 그리고 탬플릿 개체를 포함하고 있다.

에스브이지 그리기는 대화형이고 동적일 수 있다. 애니메이션은 선언으로 (예 : 에스브이지 콘텐츠에 에스브이지 애니메이션 요소를 포함하여) 또는 스크립팅을 통해 정의하고 트리거 할 수 있다. 모든 요소, 속성 및 속성에 대한 완전한 액세스를 제공하는 에스브이지 문서 개체 모델(Document Object Model(DOM): 이하 디오엠)에 액세스 하는 보충 스크립팅 언어를 사용하여 에스브이지의 정교한 응용 프로그램이 가능하다. 모든 에스브이지 그래픽 개체에 풍부한 이벤트 처리기를 할당할 수 있다. 웹 페이지 내에서 동일한 스크립트가 에이치엠엘 및 에스브이지 요소 모두에서 작동할 수 있다.

스크립팅 에스브이지는 올바로 사용되는 다양한 접근성 기능을 포함하여 정보를 풍부한 그래픽으로 표현하는 데 유용하며 최대한 많은 사용자가 콘텐츠를 사용할 수 있도록 보장한다. 그러나 가능한 경우 소스 데이터에 대한 직접 링크는 많은 사람들이 제공된 콘텐츠를 이해하는 데 도움이 된다.

1.2. 다른 표준과의 호환성

에스브이지는 다음에 설명된대로 다른 더블유3시(W3C) 사양 및 표준을 활용하고 통합한다.

• 에스브이지는 포함 또는 참조를 통해 에이치엠엘에서 에스브이지를 사용하거나 에스브이지에서 에이치엠엘을 사용하여 에이치엠엘과 통합할 수 있다.
• 에스브이지는 엑스엠엘의 응용 프로그램이며 엑스엠엘 1.0 및 엑스엠엘 사양의 '이름공간(Namespace)'과 호환된다. 그러나 에스브이지 콘텐츠가 에이치엠엘 문서에 포함된 경우 에이치엠엘 구문이 적용되며 엑스엠엘과 호환되지 않을 수 있다. 자세한 내용은 에스브이지 통합을 참조하시오.
• 에스브이지 콘텐츠는 시에스에스로 스타일이 지정된다. 자세한 내용은 시에스에스로 스타일링을 참조.
• 에스브이지는 완전한 '디오엠'을 포함하고 디오엠4를 확장한다.
• 에스브이지 디오엠은 에이치티엠엘 디오엠과 높은 수준의 호환성 및 일관성을 가지고 있다.
• 또한 에스브이지 디오엠은 시에스에스 개체 모델 및 이벤트 처리에 설명된 많은 기능을 지원하고 통합한다.
• 에스브이지는 '스위치'요소와  '시스템 언어' 속성을 포함하여 에스엠아이엘 3의 일부인 몇 가지 기능과 접근 방식을 통합한다.
• 에스브이지는 국제화에 대한 더블유3시 작업과 호환된다. 참조 (더블유3시 및 기타)에는 [유니코드] 및 [캐릭터 환경]이 포함된다.
• 에스브이지는 웹 접근성에 대한 더블유3시 작업과 호환된다. 접근성 지원을 참조.

 

1.3. 규범 지어진 용어

이 사양에서 키워드 "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY"및 "OPTIONAL" RFC에서 요구 사항 수준을 나타내기 위한 키워드에 설명한 대로 해석된다. 그러나 가독성을 위해 이 사양에서는 이러한 단어가 모두 대문자로 표시되지는 않는다. 때때로 이 사양은 작성자 및 사용자 에이전트에 대한 모범 사례를 권장한다.

www.w3.org/TR/SVG/intro.html#AboutSVG

Introduction — SVG 2