15 장 SMIL and SVG

1. 15장SMIL and SVG • 15.1 SMIL • 15.2 SVG

2. SMIL • SMIL(Synchronized Multimedia Integration Language) 시간적 구조를 표현하기 위한 태그- 기반 언어. • XML DTD에 의해 정의된다. • SMIL 의 태그 형식은 XML과 XHTML 의 각 괄호, 속성 할당 등이 같다. • <smil xmlns=http://www.w3.org/2001/SMIL20/Language>

3. 동기화 요소 • SMIL 문서의 실질적 내용은 body에 있다. • 시간적 특성을 규정하는 동기화 요소. • 두 개의 복잡한 요소(PAR와 SEQ)를 포함. 각각 실제 이미지, 비디오 클립, 사운드 등의 미디어 객체 요소를 포함할 것. • Par 요소 내부에서는 시간적 겹침이 일어나고 seq 에서는 순차적으로 표시됨. • SMIL 사양에는 동기화 속성이 감지될 수 있어야 한다는 규칙이 있다. • Begin과 end 속성은 시간선 상에 SMIL 요소의 위치를 지정 하는 것이다. • 요소들은 서로 동기를 맞출 수 있다. 모든 매체 요소가 고유한 이름의 id속성을 가져야 한다. • SMIL 재생기는 두 개의 가능한 방식인 하드 동기화와 소프트 동기화가 있다.

4. 링크 • HTML에서 연결 요소 모델에 사용된 간단한 단방향 링크를 SMIL에서 제공. • 두 개의 연결 요소 타입 : a는 HTML의 a 요소 타입과 비슷. href 속성은 필수적이며 링크의 목적지 URL을 표시한다. • SMIL의 a 요소와 조각 식별자는 전체 요소에 대한 링크를 제공한다. area 는 HTML 에서 이미지 맵의 핫스팟을 정의하기 위해 같은 이름을 사용한 것과 비슷. • 이미지 맵은 객체가 차지하는 공간 영역을 링크로 연결된 하부 영역으로 나눈다. • area 요소의 id속성이 URL 에서 조각 식별자로 쓰일 수 있기 때문에 영화의 일부가 링크 목적지로 쓰일 수 있다.

5. 애니메이션 • SMIL 1.0에서 프레젠테이션에애니메이션 포함시킬 수 있는 유일한 방법은 SWF 외부 파일과 같은 애니메이션 요소를 사용하는 것. • 애니메이션 작동원리의 기본은 animate 요소이다. • 애니메이션의 시간적으로 변하는 특징은 여러 방법으로 지정할 수 있다. (from, to ..) • animate 요소가 반복으로 설정되면 각 반복의 끝에서 시작 위치로 되돌아간다. • 비교적 복잡한 애니메이션도 SMIL 요소들의 적절한 조합에 의해 구축될 수 있다.

6. SVG • SVG(Scalable Vector Graphics) 언어는 XML 을 이용해 2차원 그래픽들을 기술할 수 있도록 한다. • 첫줄은 잘 알려진 XML 선언, 다음은 DOCTYPE 선언으로 svg로 문서요소를 선언하고 SVG DTD의 공개된 이름과 시스템 식별자를 보여준다. • 다음은 svg 요소에 포함되는 내용이 온다. XHTML 이나 SMIL 문서와 달리 SVG문서는 헤드와 몸체로 구분되지 않음. • SVG 이름공간을 기본 이름공간으로 선언하여 접두어 없이 SVG 요소안에서 SVG 요소와 속성이름을 사용할 수 있게 된다.

7. 모양 • svg 요소 안에 문서의 실체인 그래픽 객체 표현이 들어감. • Illustrator 와 같은 프로그램에서 사각형을 그릴 때 먼저 채움, 스트로크 색, 스트로크 폭을 설정 후 사각형 툴로 그려질 위치를 설정해 모양을 드래그 한다. • Polygon과 polyline 의 속성인 points 의 속성값은 콤마나 공백 문자로 분리된 좌표값들의 순차로 구성. • 모든 경로는 M 명령어로 시작된다. (move to)

8. 스트로크와 채움 • 여러 모양 요소와 경로 요소는 stroke와 fill 속성을 이용해 스크로크와 채움 색상을 지정. • 스트로크와 채우기를 반투명하게 할 수도 있다. • 값이 0이면 스트로크와 채우기가 완전 투명해지고, 값이 1이면 완전 불투명 • SVG 는 linearGradient 와 radiaGradient 요소를 사용해 선형과 방사형 경사를 지원. • 두 경우 모두 경사 요소 내용은 stop 요소로 구성.

9. 변환 • transform의 값은 변환 사양을 구성하는 문자열이며, 공백 문자나 콤마로 구분. • 변환 이름으로 translate, scale, rotate, skewX, skewY . 인수들은 변환에 따라 다르게 해석. • 스케일링 변환값은 비슷하게 한 개나 두 개의 인수 필요. • 찌그러짐 변환에는 찌그러지는 각도를 지정하는 하나의 인수가 필요. • 찌그러짐 변환도 스케일처럼 객체를 이동. • 동일한 변환을 한번에 여러 개의 대상에 적용할 수도 있다.

10. 그 밖의 기능 • 링크 : SVG 문에서는 링크하기 위해 Xlink 속성이 포함될 수 있다. • Xlink:type은 “simple” 이고, xlink:actuate 는 “onRequest” 이다. HTML 처럼 a 요소의 내용은 링크 소스처럼 동작한다. • SVG에서 요소들은 일반적으로 그래픽 객체를 나타냄.

11. 그 밖의 기능 • 텍스트 : SVG 는 XML 이기 떄문에, 텍스트를 표현하는 방법은 요소 내부에 XML 문자를 쓰는 것. • 이것은 어떠한 유니코드 문자들도 텍스트에 쓰일 수 있다는 것을 의미. • SVG 문서에서 텍스트 문자열을 유지하기 위해 text 요소가 사용. • Text와 tspan 요소로 가능한 모든 속성을 이용하면 SVG 텍스트를 상당한 정도로 자세하기 조절할 수 있다.

12. 그 밖의 기능 • 애니메이션 : SVG는 SMIL 애니메이션에 기초한 간단하고 잠재적으로 강력한 애니메이션 기능이 있다. • 모든 요소는 animate 요소를 가질 수 있어 속성값이 시간에 따라 변하도록 할 수 있다. • 애니메이션될 요소를 결합하면,SVG는 웹- 기반 벡터 그래픽 애니메이션 언어로 쓰일 수 있다. • SVG는 몇 가지 방법으로 SMIL 애니메이션을 확장한다. 그러나 가장 비호환적인 것은 animate 요소가 부모가 아닌 요소라면 xlink:href 속성을 반드시 이용해 타겟을 인식해야지 SMIL 의 targetElement 속성을 사용하면 안된다.