5장: 문서 구조

5.5. ‘symbol’ 요소

‘symbol’ 요소는 그래픽 템플릿을 정의하는 데 사용되며, ‘use’ 요소에 의해 인스턴스화될 수 있지만 직접 렌더링되지는 않습니다.

‘symbol’은 자신이 포함하는 그래픽에 대해 중첩된 좌표계를 설정합니다. 심볼이 ‘use’ 요소의 참조 요소로 인스턴스화될 때, 중첩된 ‘svg’ 요소와 매우 유사하게 렌더링됩니다.

x, y, width, height 기하학 속성은 ‘svg’ 요소에 적용될 때와 동일하게 동작합니다. ‘symbol’이 ‘use’ 요소에 의해 인스턴스화될 때도 마찬가지입니다. 특히 width와 height가 auto로 계산되고 (그리고 인스턴스화하는 ‘use’ 요소의 값으로 오버라이드되지 않는다면) 100% 값으로 처리됩니다.

SVG 2에서 새로 추가됨. symbol에 기하학 속성을 지정할 수 있도록 허용하여 더 일관된 렌더링 모델을 제공하며, 작성자가 각 symbol의 기본 크기를 설정할 수 있게 합니다 (이 값은 ‘use’ 요소의 속성으로 오버라이드될 수 있음).

5.5.1. 속성

이름	값	초기값	애니메이션 가능
refX	<length> | left | center | right	(없음)	예
refY	<length> | top | center | bottom	(없음)	예

SVG 2에서 새로 추가됨. 지도를 비롯해 심볼을 특정 지점에 쉽게 정렬할 수 있도록 추가되었습니다. ‘marker’와 유사한 속성입니다.

symbol 요소에 refX/refY 추가. Leipzig F2F에서 결의됨. 상태: 완료.

marker/symbol의 refX/refY에 top/center/bottom, left/center/right 키워드를 추가합니다. London F2F에서 결의됨. 값은 'background-position'에서 영감받았습니다. 상태: 완료.

‘refX’ 및 ‘refY’ 속성은 해당 symbol의 기준점을 정의하며, symbol의 x,y 위치 좌표에 정확히 배치됩니다. x와 y 속성, 그리고 ‘symbol’과 host ‘use’ 요소의 모든 변형의 누적 효과에 따라 정의됩니다.

키워드 값은 ‘refX’ 및 ‘refY’와 동일한 의미를 가지며, ‘marker’ 요소에서 해당 방향으로 0%, 50%, 100%로 해석됩니다.

다른 위치 속성과 달리, ‘refX’와 ‘refY’는 symbol 내용의 좌표계에서 해석되며, ‘viewBox’ 및 ‘preserveAspectRatio’ 속성이 적용된 후의 좌표계입니다. 하나 또는 두 속성 모두 지정되지 않은 경우, 해당 방향에 대해 조정이 이루어지지 않으며, symbol의 사각형 뷰포트 영역의 위쪽 또는 왼쪽(즉, ‘viewBox’ 좌표와 상관없이) x,y 위치에 배치됩니다.

하위 호환성을 위해, ‘refX’와 ‘refY’가 ‘symbol’에 지정되지 않은 경우의 동작은 값이 0으로 지정된 경우와 다르며, ‘marker’에서 해당 속성이 지정되지 않은 경우의 동작과도 다릅니다.

5.5.2. 심볼에 대한 참고

‘symbol’ 요소를 동일 문서 내에서 여러 번 사용하는 그래픽에 활용하면 구조와 의미가 더해집니다. ‘symbol’ 요소와 밀접하게 관련된 요소로 ‘marker’와 ‘pattern’이 있습니다. 이 세 가지 모두 다양한 위치와 크기로 반복 렌더링할 수 있는 그래픽 콘텐츠 컨테이너를 정의합니다. 하지만 패턴과 마커에서의 재사용 그래픽은 다른 요소에 그래픽 효과를 제공하는 반면, ‘symbol’의 내용은 use 요소 그림자 트리 내부에 완전히 인터랙티브한 콘텐츠로 삽입됩니다.

사용자 에이전트 스타일시트는 ‘symbol’ 요소에 대해 overflow 속성을 hidden으로 설정하며, 이것은 symbol의 SVG 뷰포트 경계에 사각형 클리핑 경로를 생성합니다. overflow 속성이 오버라이드되지 않는 한, symbol 내부의 그래픽이 SVG 뷰포트 밖으로 나가면 클리핑됩니다.

‘symbol’ 요소는 직접적으로 렌더링되어서는 안 됩니다. 오직 ‘use’ 요소를 통해 참조하는 용도로만 사용됩니다. 사용자 에이전트는 ‘symbol’ 요소에 대한 display 속성을 none으로 설정해야 하며, 이는 사용자 에이전트 스타일시트의 일부로, 다른 CSS 규칙이나 프레젠테이션 속성보다 우선되어야 합니다.

생성된 인스턴스 중 ‘symbol’이 ‘use’ 요소의 직접적인 참조 요소인 경우, display 속성의 계산된 값이 항상 inline이어야 합니다. 즉, host ‘use’ 요소가 렌더링될 때마다 인스턴스도 렌더링되어야 합니다. 사용자 에이전트 스타일시트 역시 이 선언이 다른 CSS 규칙이나 프레젠테이션 속성보다 우선되도록 정의합니다. ‘symbol’을 복제하여 use 요소 그림자 트리 내부에서 요소 인스턴스를 생성하는 경우, 해당 symbol 정의로 동작하며, 렌더링되어서는 안 됩니다.

5.6. ‘use’ 요소

‘use’ 요소는 다른 요소를 참조하며, 참조된 요소의 복사본이 문서 내에서 ‘use’ 대신 렌더링됩니다. 참조 요소가 컨테이너 요소일 수 있으며, 이 경우 해당 요소를 루트로 하는 SVG 문서 서브트리 전체가 복사되어 사용됩니다.

복제된 콘텐츠는 ‘use’ 요소의 스타일을 상속받으며, 사용자 이벤트의 대상으로도 사용될 수 있습니다. 그러나 이러한 복제된 요소 인스턴스는 참조된 원본에 연결되어 있으며, 원본의 DOM 변형을 모두 반영합니다. 또한 참조된 요소의 범위에서 적용되는 모든 스타일 규칙은 복제된 그림자 트리의 범위에서도 적용됩니다.

x, y, width, height 기하학 속성은 참조된 요소의 위치를 지정합니다. width와 height 속성은 참조 요소가 뷰포트를 정의할 때만(즉 ‘svg’ 또는 ‘symbol’일 때) 효과가 있습니다. 이 경우 ‘use’ 요소에 auto가 아닌 값이 지정되면 해당 요소의 해당 기하학 속성 값을 덮어씁니다.

width 또는 height에 음수 값이 있으면 잘못된 값으로 처리해야 합니다. width 또는 height가 0이고, 해당 속성이 참조 요소에 영향을 미친다면, 해당 요소의 렌더링은 비활성화됩니다.

x와 y 속성은 요소의 사용자 좌표계를 변경합니다. 구현 세부사항은 레이아웃 섹션을 참조하세요.

이름	값	초기값	애니메이션 가능
href	URL [URL]	(없음)	예

URL 참조를 통해 렌더링을 위해 복제될 SVG 문서 내의 요소/프래그먼트를 지정합니다.

‘use’ 요소는 프래그먼트 없이 ‘href’ 값을 지정함으로써 전체 SVG 문서를 참조할 수 있습니다. 이러한 참조는 그 문서의 루트 요소를 참조하는 것으로 간주합니다.

URL 참조 속성 및 더 이상 사용되지 않는 XLink 속성의 일반 처리 방법을 참조하세요.

SVG 2에서 새로 추가됨. 프래그먼트 없이 ‘href’를 사용하면 루트 요소에 ID가 없어도 전체 SVG 문서를 참조할 수 있습니다.

사용자 에이전트는 보안상의 이유로 외부 리소스 문서에 제한을 둘 수 있습니다. 특히 이 명세에서는 ‘use’ 요소에서 교차 출처 리소스 요청을 허용하지 않습니다. 향후 버전의 이 명세 또는 다른 명세에서 안전하게 교차 출처로 자산을 재사용할 수 있는 방법이 제공될 수 있습니다.

‘href’ 속성이 설정된 경우 (‘href’ 속성이 없을 때는 ‘xlink:href’ 속성을 사용), 사용자 에이전트는 URL을 처리해야 합니다. URL 처리 결과로 얻어진 대상 요소가 ‘use’의 참조 요소가 됩니다.

URL을 해석한 결과의 참조 요소가 SVG 요소도 아니고, SVG 컨테이너 요소의 자식으로 포함될 수 있는 HTML 네임스페이스 요소도 아닌 경우, 해당 참조는 잘못된 값이며 ‘use’ 요소는 오류 상태가 됩니다.

참조된 요소가 ‘use’ 요소의 (그림자 포함) 상위 요소인 경우, 이는 잘못된 순환 참조이며 ‘use’ 요소는 오류 상태가 됩니다.

그 외의 경우, 사용자 에이전트는 그림자 트리를 생성하여 ‘use’ 요소의 내용으로 재사용 그래픽을 렌더링해야 합니다. 자세한 내용은 다음 섹션 use 요소 그림자 트리를 참조하세요.

해결되지 않음 또는 잘못된 값 URL 참조가 있는 ‘use’는 렌더링되지 않습니다. 바운딩 박스 계산 목적에서는 빈 컨테이너 요소와 동일하게 취급됩니다.

5.6.1. use 요소 그림자 트리

‘use’ 요소에 의해 생성된 재사용 그래픽은 그림자 트리의 관점에서 정의됩니다. 상호작용성과 스타일 상속 측면에서, 이들은 SVG의 다른 재사용 그래픽—예를 들어 ‘pattern’이나 ‘marker’ 내용—과 상당히 다릅니다.

그림자 트리의 요소들은 ‘use’ 요소가 컨테이너이고 그 요소들이 자식인 것처럼 렌더링됩니다. 하지만 SVG 문서 객체 모델(DOM)에는 ‘use’ 요소와 그 속성만 포함됩니다. SVG DOM에는 ‘use’ 요소의 자식으로 요소 인스턴스들이 포함되지 않습니다.

스크립팅과 문서 객체 모델을 지원하는 사용자 에이전트는 이 섹션에서 설명된 대로 use 요소 그림자 트리를 구현해야 하며, dom 명세 [dom] 또는 그 후속 표준에 따라야 합니다. 반면, 동적 인터랙티브 처리 모드를 지원하지 않는 사용자 에이전트는 그림자 DOM의 모든 세부사항을 구현할 필요는 없을 수 있습니다. 하지만 모든 사용자 에이전트는 레이아웃과 스타일 상속, 그리고 필요한 경우 멀티미디어 및 선언적 애니메이션이 그림자 DOM이 구현된 것과 동일하게 렌더링되어야 합니다.

다음 정의는 ‘use’ 요소와 그림자 트리와 관련해 사용됩니다:

참조 요소

‘use’ 요소의 ‘href’ (또는 ‘xlink:href’) 속성에 의해 지정된 요소. 만약 URL에 특정 요소 ‘id’를 가리키는 프래그먼트가 없다면, 참조된 문서의 루트 요소.

참조 문서 서브트리

참조 그래픽

참조 요소와 그 모든 자손 노드.

그림자 루트

ShadowRoot 객체. DocumentFragment 노드의 일종이며, 호스트 Element에 연결되고, 해당 호스트를 렌더링하는 데 쓰일 내용을 포함합니다. 그림자 루트는 dom 명세 [dom] 또는 후속 표준에 따라 구현되어야 합니다.

그림자 호스트

호스트

그림자 루트가 연결된 요소; DOM 표준의 host 정의와 일치하는 용법.

그림자 트리

루트가 그림자 루트인 노드 트리; DOM 표준의 shadow tree 정의와 일치하는 용법.

use 요소 그림자 트리

호스트가 ‘use’ 요소인 그림자 트리. 참조 그래픽을 복제하여 생성된 요소 인스턴스를 포함합니다.

요소 인스턴스

인스턴스

use 요소 그림자 트리에 속하는 요소로, 참조 문서 서브트리의 해당 요소를 복제하여 생성된 것.

인스턴스 루트

참조 요소에 대한 요소 인스턴스; 항상 ‘use’ 요소의 그림자 루트의 직접 자식임.

대응 요소

각 요소 인스턴스에 대해, 참조 문서 서브트리에서 복제된 원본 요소.

대응 use 요소

각 요소 인스턴스에 대해, 해당 인스턴스를 문서에서 렌더링하게 하는 ‘use’ 요소. 이 요소가 ‘use’ 그림자 트리 내부의 요소 인스턴스가 아니라면, 그 인스턴스의 그림자 루트의 호스트 ‘use’ 요소가 대응 use 요소임. 만약 해당 요소가 그림자 트리 내부의 요소 인스턴스라면, (필요한 만큼 그림자 트리를 빠져나와) 그림자 트리의 일부로 생성되지 않은 ‘use’ 요소에 도달할 때까지 반복적으로 그 대응 use 요소를 찾음.

사용자 에이전트가 ‘use’ 요소를 성공적으로 해석하여 참조 요소를 식별한 경우, 해당 ‘use’ 요소 자체를 호스트로 하는 use 요소 그림자 트리를 생성해야 합니다. ‘use’ 요소가 렌더링되지 않는 요소의 하위 요소이거나, 조건부 처리, 혹은 display 속성이 none으로 설정된 경우에도 그림자 트리는 반드시 생성되어야 합니다.

그림자 트리의 각 노드는 참조 문서 서브트리의 해당 노드를 복제한 인스턴스입니다. 모든 그림자 노드는 인스턴스 루트에서 시작하며, 인스턴스 루트는 참조 요소의 인스턴스이고, 자체가 그림자 루트 노드의 직접 자식입니다.

그림자 트리는 열려 있지만(스크립트로 검사 가능), 읽기 전용입니다. 그림자 트리의 요소, 속성, 기타 노드를 직접 수정하려고 하면 NoModificationAllowedError가 발생해야 합니다.

use 요소 그림자 트리 내부에서는 ‘script’ 요소는 비활성(실행되지 않음)이고, ‘audio’ 및 ‘video’ 요소는 멀티미디어 섹션에 명시된 제한을 받습니다.

이전 SVG 버전에서는 그림자 트리의 내용을 SVG 그래픽 요소로 제한했습니다. 이 명세에서는 모든 유효한 SVG 문서 서브트리를 복제할 수 있도록 허용합니다. 하지만 비그래픽 콘텐츠를 복제해도 대개 가시적인 효과는 없습니다.

참조 요소가 외부 파일에 있는 경우, 속성과 스타일 속성의 모든 URL 참조는 절대 URL 생성에 따라 요소 인스턴스에 값을 복사하기 전에 절대 경로로 만들어야 합니다. 그림자 트리 자체는 이를 포함한 문서와 동일한 base URL을 사용합니다.

사용자 에이전트는 참조 문서 서브트리에 대한 모든 변형이 그림자 트리에 반영되도록 보장해야 합니다. 여기에는 요소, 속성, 텍스트 및 기타 노드의 변경이 포함됩니다. 또한 참조 그래픽에 적용되는 스타일시트의 변경도 그림자 트리의 범위 내 스타일시트 변경에 반영되어야 하며, 자세한 내용은 스타일 상속 섹션에 설명되어 있습니다.

‘use’ 요소나 참조 요소가 ‘use’ 요소의 URL 참조를 다시 해결되지 않은 상태로 만들도록 변경되면, 해당 use 요소의 그림자 트리는 전체 폐기됩니다.

‘use’ 요소가 또 다른 ‘use’ 요소를 참조하거나, 그 내용에 ‘use’ 요소가 포함되어 있다면, 위에서 설명한 그림자 DOM 복제 방식은 재귀적으로 동작합니다. 하지만 직접 또는 간접적으로 순환 참조를 생성하는 참조 집합은 잘못된 순환 참조입니다. 해당 그림자 트리를 생성하는 ‘use’ 요소 또는 인스턴스는 오류 상태가 되어 사용자 에이전트에 의해 렌더링되지 않아야 합니다.

5.6.2. 재사용 그래픽의 레이아웃

‘use’ 요소의 x, y, width, height 속성 값은 재사용 그래픽의 위치 지정과, 참조 요소가 중첩된 뷰포트를 정의하는 경우 뷰포트 크기 설정에 사용됩니다. 이러한 속성이 ‘use’ 요소에 미치는 영향은 그래픽 요소나 CSS 박스 레이아웃에서의 영향과는 상당히 다릅니다.

x와 y 속성은 추가 변환(translate(x,y)—x와 y는 해당 속성의 계산된 값)을 정의하며, 다른 속성으로 지정된 변환 이후에(변환 리스트의 우측에 추가됨) ‘use’ 요소에 적용됩니다.

‘use’ 요소의 width, height 속성은 참조된 ‘svg’ 또는 ‘symbol’ 요소의 해당 속성 값을 덮어쓰며, 인스턴스 루트 요소에서 해당 속성의 사용 값을 결정할 때 적용됩니다. 단, ‘use’ 요소의 해당 속성의 계산 값이 auto이면, 해당 속성 값은 요소 인스턴스에서 평소대로 계산됩니다.

따라서 이 속성들은 자체 좌표계를 정의한 그래픽을 재사용할 때마다 스케일링하는 데 사용할 수 있습니다. auto가 초기값이므로, ‘use’ 요소에 크기가 명시되지 않으면, ‘svg’ 또는 ‘symbol’에 지정된 값이 기본값으로 사용됩니다.

‘use’ 요소의 width, height 속성은 참조 요소가 새 SVG 뷰포트를 생성하지 않으면 아무 효과가 없습니다. 특히 ‘use’ 요소 자체는 새 뷰포트를 생성하지 않으므로, 재사용 그래픽에서 백분율 해석에는 영향을 주지 않습니다.

그 외의 모든 점에서, use 요소 그림자 트리 내부의 요소들의 렌더링과 레이아웃은 ‘use’ 요소가 자신의 그림자 콘텐츠 컨테이너인 것처럼 동작합니다. 특히 그림자 트리 내부 요소가 새 뷰포트를 생성하지 않는 한, 해당 요소들은 ‘use’ 요소가 정의된 좌표계(모든 누적 변환 포함)에서 그려져야 합니다. 이는 백분율 길이 해석과 userSpaceOnUse 단위의 그래픽 효과에도 영향을 줍니다.

5.6.3. 스타일 범위 및 상속

use 요소 그림자 트리는 다른 그림자 트리와 마찬가지로, CSS 범위 지정 모듈 [css-scoping-1]에서 정의된 대로 스타일 캡슐화를 보입니다. 즉, 그림자 트리 내의 요소들은 자신의 호스트 ‘use’ 요소로부터 스타일을 상속받지만, 외부 문서에서 정의된 스타일 규칙은 그림자 트리 내의 요소에는 적용되지 않습니다. 대신 그림자 트리는 자체 스타일시트 목록을 유지하며, 해당 CSS 규칙이 그림자 트리 내의 요소에 적용됩니다.

프레젠테이션 속성과 ‘style’ 속성은 참조 그래픽의 요소에서 요소 인스턴스로 다른 속성과 동일하게 복제됩니다.

참조 요소가 ‘use’ 요소와 같은 문서에 있을 경우, 동일한 문서의 스타일시트가 원본 문서와 그림자 트리 문서 조각 모두에 적용됩니다. 메인 문서의 스타일시트가 변경되면 그림자 트리에도 영향을 주며, 문서와 그림자 루트 문서 조각의 styleSheets 속성을 통해 접근되는 StyleSheetList 객체는 동일해야 합니다. 만약 ‘style’ 요소가 참조 문서 서브트리의 일부로 복제된다면, 요소 인스턴스의 styleSheet 속성은 대응 요소의 객체와 동일한 객체를 가리킵니다.

참조 요소가 외부 문서에 있을 경우, 해당 문서를 처리할 때 생성된 스타일시트 객체가 그림자 트리에 적용되며, 읽기 전용입니다. 스타일시트 내의 모든 URL 참조(프래그먼트만 있는 참조 포함)는 참조 요소를 포함하는 문서의 URL을 기준으로 절대 경로로 만들어야 합니다. 사용자 에이전트는 동일한 외부 문서를 참조하는 모든 그림자 트리에 대해 동일한 스타일시트 객체를 재사용할 수 있습니다.

그림자 트리의 범위로 지정된 스타일 규칙은 일반적으로 메인 문서의 어떤 요소에도 영향을 줄 수 없습니다. 마찬가지로, 메인 문서의 스타일 규칙은 상속 값을 변경하는 경우에만 그림자 트리 요소에 영향을 줄 수 있습니다. 하지만 CSS 범위 지정은 그림자 트리 내부에서 호스트 요소를 스타일링하거나, 호스트의 컨텍스트 변화에 따라 그림자 트리 내부 스타일을 조정할 수 있는 특수 선택자를 정의합니다 [css-scoping-1].

그림자 트리의 범위 내에서의 CSS 미디어 쿼리는 해당 "라이트" 문서(즉, 그림자 트리가 포함된 대응 use 요소를 포함하는 문서, 모든 중첩 그림자 트리를 재귀적으로 빠져나온 후의 문서)의 동일한 장치 특성과 치수를 사용하여 평가됩니다.

대부분의 경우, 그림자 트리의 요소 인스턴스는 원본 문서의 대응 요소와 동일한 스타일 규칙에 매칭됩니다. 하지만 CSS 규칙이 복잡 선택자를 사용해 요소의 조상이나 형제 관계에 따라 매칭되는 경우, 해당 조상이나 형제가 그림자 트리의 일부로 복제되지 않으면 그 규칙은 요소 인스턴스에 더 이상 적용되지 않습니다. 마찬가지로, nth-of-type나 nth-child와 같은 자식 인덱스 의사 클래스도 한 요소에는 적용되고 다른 요소에는 적용되지 않을 수 있습니다. 이는 이전 SVG 버전에서 정의된 스타일 복제 방식과 달라진 점입니다.

다음 예시는 일관된 경우와 변경된 스타일 매칭 규칙 모두를 보여줍니다. 왼쪽의 원이 복제되어 오른쪽 원이 그려집니다. 원본 원은 여러 방식으로 스타일이 지정됩니다:

• stroke-width(20)는 원 자체의 프레젠테이션 속성으로 지정됨.
• stroke-opacity(0.7)는 원 태그 이름에 매칭되는 단순 선택자의 CSS 규칙으로 지정됨.
• stroke 색상(초록)은 special 클래스를 가진 요소의 자손으로써 복잡 선택자로 지정됨.
• fill 색상은 원에 직접 지정되지 않아, 포함하는 ‘g’ 요소(파랑)의 스타일을 상속받음.

SVG 1.1의 스타일 복제 모델에서는, 지정된 스타일 값이 원본 요소에서 요소 인스턴스로 복제됩니다. 복제된 원은 원본과 동일한 스타일을 가지지만, fill 값은 ‘use’(오렌지)에서 상속받으며, ‘g’(파랑)에서 상속받지는 않습니다.

SVG 2에서 요구하는 그림자 DOM 모델에서는, 복제된 원에 대한 스타일은 다음과 같이 계산됩니다:

• stroke-width(20) 프레젠테이션 속성은 요소 인스턴스로 복제됨.
• stroke-opacity(0.7) CSS 규칙은 그림자 트리로 복제된 스타일시트의 일부이며, 요소 인스턴스의 원 태그 이름에 매칭되어 적용됨.
• 복잡 선택자의 CSS 규칙도 복제된 스타일시트의 일부이지만, 요소 인스턴스의 원은 special 클래스의 요소 자손이 아니므로 해당 규칙이 더 이상 매칭되지 않으며, 대신 원의 stroke 색상은 호스트 ‘use’ 요소(보라)에서 상속받음.
• fill 색상도 직접 지정되지 않아, 역시 호스트 ‘use’ 요소에서 상속받음.

따라서 복제된 원은 원본과 채움 색상(다른 요소에서 상속받기 때문)과 테두리 색상(복잡 선택자가 더 이상 매칭되지 않기 때문) 모두에서 다릅니다.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100" viewBox="0 0 200 100">
  <title>Style inheritance and the use element</title>
  <desc>
    Two circles, one of which is a re-styled clone of the other.
    This file demonstrates one of the cases where
    the shadow-DOM style matching rules in SVG 2
    have a different effect than the SVG 1.1 style cloning rules.
    The original circle on the left
    should have blue fill
    and green stroke.
    In a conforming SVG 1.1 user agent,
    the re-used circle on the right
    should have orange fill and green stroke.
    In a conforming SVG 2 user agent,
    the re-used circle should have orange fill and purple stroke.
    In all cases,
    the stroke should be partially transparent
    and 20 units wide,
    relative to a total circle diameter of 100 units.
  </desc>
  <style type="text/css">
    circle          { stroke-opacity: 0.7; }
    .special circle { stroke: green; }
    use             { stroke: purple;
                      fill: orange; }
  </style>
  <g class="special" style="fill: blue">
     <circle id="c" cy="50" cx="50" r="40"
             stroke-width="20" />
  </g>
  <use xlink:href="#c" x="100" />
</svg>

예시 Use-changed-styles

이 예시를 SVG로 보기 (SVG 지원 브라우저만)

이전 SVG 버전에서는 :hover와 같은 동적 의사 클래스가 요소 인스턴스에 어떻게 적용되는지 명확하지 않았습니다. 그림자 트리 모델에서는 모든 의사 클래스가 요소 인스턴스 또는 대응 요소에 대해 각각 독립적으로 매칭되어야 하며, 어느 요소에 사용자가 상호작용하는지에 따라 달라집니다.

‘use’ 요소에 'visibility:hidden'을 지정해도 참조된 콘텐츠가 렌더링되지 않는다는 보장은 없습니다. display 또는 opacity 속성과 달리, visibility 속성은 컨테이너 요소에 직접 적용되지 않으므로, ‘use’ 요소에도 직접 적용되지 않습니다. visibility가 일반적으로 상속되므로, use 요소를 숨기면 자식 콘텐츠도 자주 숨겨지지만, 반드시 그런 것은 아닙니다. 그림자 트리 내의 어떤 그래픽 요소에 'visibility:visible'이 지정되어 있다면, 해당 요소는 ‘use’ 요소가 'visibility:hidden'을 지정해도 보이게 됩니다.

다음 예시에서, 주요 스타일 규칙은 다음과 같습니다:

.dark {
  visibility: hidden;
}
.eyes {
  visibility: visible;
}
svg:hover .dark, svg:focus .dark {
  visibility: visible;
}

"dark" 클래스는 ‘use’ 요소들을 포함하는 그룹에 지정되어, 재사용 그래픽의 모든 부분이 숨김 속성을 상속받지만, "eyes" 클래스를 가진 서브트리에서는 다시 보이도록 설정됩니다. 그래픽에 마우스를 올리거나 포커스를 주면 숨김 효과가 해제됩니다.

예시 Use-visibility-hidden, 기본 스타일

예시 Use-visibility-hidden, 인터랙티브 스타일

이 예시를 SVG로 보기

이 예시는 ‘use’ 요소에 지정된 fill과 stroke 등 다른 스타일 속성의 상속도 보여줍니다. 심볼 내의 어떤 요소가 명시적 값을 지정하면(예: 분홍 코, 귀, 흰 꼬리) 상속 값이 사용되지 않음을 보여줍니다.

5.6.4. use 요소 그림자 트리의 멀티미디어

use 요소 그림자 트리에 ‘audio’ 또는 ‘video’ 요소가 포함되는 경우, 다음과 같은 동작이 반드시 적용되어야 합니다:

• 사용자 에이전트는 미디어 재생을 대응 요소(동일 문서에서 렌더링되는 경우) 및 문서 내 같은 대응 요소의 다른 인스턴스들과 동기화해야 합니다.
• 인스턴스는 ‘use’ 요소가 렌더링되지 않으면 오디오를 재생해서는 안 됩니다.
• 사용자 에이전트가 제공하는 재생 컨트롤이 대응 요소에 포함되어 있거나(또는 포함될 예정인 경우), 문서 내 모든 인스턴스에 동일하게 포함되어야 하며, 어느 인스턴스에서든 사용자 동작이 모두의 재생을 제어해야 합니다.

5.6.5. use 요소 그림자 트리의 애니메이션

Web Animations API [web-animations-1] 및 SVG Animations 명세 [svg-animation]은 CSS가 아닌 방식으로 대상 요소의 속성과 스타일을 직접 DOM 프로퍼티를 조작하지 않고 애니메이션하는 방법을 정의합니다 (자세한 내용은 애니메이션 부록 참고). 이러한 기능을 구현하는 사용자 에이전트는 참조 문서 서브트리의 요소에 적용되는 모든 애니메이션이 use 요소 그림자 트리의 해당 요소 인스턴스에도 적용됨을 반드시 보장해야 합니다.

use 요소 그림자 트리 내의 모든 애니메이션은 대응 use 요소와 동일한 문서 타임라인에서 동작합니다. 참조 요소가 동일 문서이든 외부 문서이든 관계없이 동일합니다.

Web Animations API 메서드를 사용해 애니메이션 효과를 적용할 때 (web-animations-1), 애니메이션의 대상이 그림자 트리의 요소 인스턴스에 대응하는 대응 요소라면, 사용자 에이전트는 해당 Animation 객체를 소스로 하고 요소 인스턴스를 대상으로 하는 ShadowAnimation을 반드시 생성해야 합니다. 여러 트리에 해당 요소의 인스턴스가 있으면 각각의 인스턴스마다 그림자 애니메이션이 생성됩니다.

사용자 에이전트는 그림자 트리가 생성되는 시점에 (대기 중이거나 정지된 애니메이션 포함) 모든 Web Animations API 애니메이션에 대해 해당 ShadowAnimation 객체를 생성해야 하며, 그림자 트리가 존재하는 동안 새로 적용되는 애니메이션에 대해서도 생성해야 합니다. 사용자는 CSS 애니메이션이나 애니메이션 요소에 대해서는 ShadowAnimation 객체를 생성하면 안 됩니다 (이들은 별도로 복제됨).

인터페이스 정의의 일부로, ShadowAnimation은 읽기 전용이며, 그 sourceAnimation의 변경사항을 반드시 반영해야 합니다.

그림자 트리 내의 읽기 전용 요소 인스턴스(또는 의사 요소)에 새로운 애니메이션을 직접 적용하려고 시도하면 NoModificationAllowedError가 발생해야 합니다.

애니메이션 요소 [svg-animation]가 참조 문서 서브트리의 요소를 대상으로 할 때, 사용자 에이전트는 동일한 애니메이션 요소가 use 요소 그림자 트리에 적용되도록 보장해야 합니다. 만약 애니메이션 요소 자체가 참조 문서 서브트리의 일부라면, 애니메이션 요소의 요소 인스턴스가 생성되는 과정에서 자동으로 적용됩니다. 그렇지 않은 경우, 사용자 에이전트는 그림자 트리의 노드로 동작하는 것과 동일한 효과를 가진 애니메이션 요소의 요소 인스턴스를 생성해야 하며, 이때 생성된 애니메이션 요소의 문서 순서는 대응 요소의 문서 순서와 동일해야 합니다.

모든 애니메이션 요소 또는 인스턴스는 암시적(부모 요소) 또는 명시적(URL 교차 참조로 ‘id’가 지정된 요소) 타겟팅 방식에 관계없이, 동일한 노드 트리(그림자 또는 라이트) 내의 대상 요소에만 영향을 줘야 합니다. 이렇게 함으로써 애니메이션 요소와 대상 요소 간의 일대일 관계가 유지됩니다.

‘id’ 속성은 다른 속성과 마찬가지로 대응 요소에서 요소 인스턴스로 복제되며, 이는 ‘id’가 고유해야 한다는 요구와 충돌하지 않습니다. 복제본과 원본은 서로 다른 노드 트리에 있기 때문입니다.

문서 또는 그림자 트리 내의 모든 애니메이션 요소는, ‘id’ 속성으로 식별되는 다른 요소에서 이벤트가 발생함에 따라 시작 또는 종료되도록 타이밍이 지정되었다면, 해당 ‘id’를 가진 요소의 요소 인스턴스가 동일한 이벤트를 받을 때도 시작 또는 종료되어야 합니다. 이는 참조된 요소의 이벤트 리스너가 해당 요소의 인스턴스에서도 이벤트를 듣는 것과 일치하며, use 요소 그림자 트리의 이벤트 처리 섹션에서 설명되어 있습니다. 이 동작은 이벤트만으로 타이밍이 지정되고 ‘id’로 지정되지 않은 경우에는 적용되지 않으며, 그 경우 각 애니메이션 요소는 자신의 대상만을 트리거합니다.

그림자 트리 내에서 애니메이션 요소의 인스턴스가 생성될 때, 대응 요소에 활성화된 애니메이션(정지된 애니메이션 포함)이 있고, 해당 애니메이션을 시작한 타이밍 이벤트가 인스턴스에도 동일하게 적용된다면, 요소 인스턴스의 애니메이션도 시작되어야 하며, 문서 타임라인에서 시작 시간이 대응 요소의 타이밍에 맞춰 조정되어야 합니다.

<set href="#target" begin="mouseover" ... />
  <!-- 마우스 오버된 요소만 영향을 받음 -->

<set href="#target" begin="target.mouseover" ... />
  <!-- id 'target'을 가진 모든 요소 인스턴스가,
          모든 라이트/그림자 노드 트리에서,
          그 중 하나가 마우스 오버되면 모두 동작함 -->
  

5.6.6. use 요소 그림자 트리의 이벤트 처리

use 요소 그림자 트리의 요소는 DOM 이벤트를 듣거나 이벤트의 대상이 될 수 있습니다. 이벤트 재타겟팅은 캡슐화를 제공하며, 이벤트가 그림자 트리에서 라이트 트리로 버블링될 때 그림자 DOM 구조의 세부사항을 감춥니다.

이벤트 재타겟팅은 SVG 2에서 새로 도입되었습니다. 이는 Shadow DOM 명세와의 일관성을 제공하며, 기존 구현 및 메인 DOM의 요소에만 관심이 있는 저자들의 기대에 부합합니다.

참조 그래픽 내의 요소에 정의된 모든 이벤트 리스너는 use 요소 그림자 트리에서 해당 요소의 모든 인스턴스에 대해 동일한 이벤트와 동일한 캡처 단계에서 작동해야 합니다. 이는 이벤트 속성으로 할당된 이벤트 리스너(다른 DOM 속성과 마찬가지로 복제됨) 및 addEventListener로 할당된 리스너를 포함합니다. 사용자 에이전트는 각 요소 인스턴스의 이벤트 리스너 목록이 대응 요소와 동기화되도록 보장해야 합니다. 읽기 전용 요소 인스턴스에는 직접 이벤트 리스너를 할당할 수 없습니다. 해당 요소에 이벤트 리스너를 추가하려고 하면 NoModificationAllowedError가 발생해야 합니다.

use 요소 그림자 트리 내의 이벤트는 그림자 트리의 이벤트 경로 및 이벤트 재타겟팅 알고리즘 [DOM]에 따라 디스패치되고 버블링됩니다.

SVG 문서에서 컨테이너 요소나 그래픽 요소는 ‘desc’ 및/또는 ‘title’ 요소를 0개 이상 자식으로 가질 수 있으며, 그 내용은 텍스트입니다. ‘desc’와 ‘title’ 요소는 그래픽의 일부로 시각적으로 렌더링되지 않습니다. ‘title’ 및 ‘desc’ 요소의 display 값은 반드시 사용자 에이전트 스타일시트에서 항상 none으로 설정되어야 하며, 이 선언은 다른 모든 CSS 규칙이나 표현 속성보다 우선해야 합니다.

여러 형제 ‘desc’ 또는 ‘title’ 요소는 반드시 서로 다른 언어여야 하며, 이는 서술적 요소 또는 상위 요소에 ‘lang’ 속성(또는 xml:lang 속성)을 지정하여 정의합니다. 사용자 에이전트는 사용자 환경설정 언어와 가장 잘 일치하는 각 타입의 요소를 선택해야 합니다. 빈 문자열 언어 태그(예를 들어 이모지로 구성된 텍스트 대안 등)는 모든 사용자 환경설정보다 낮은 우선순위로 취급됩니다. 여러 개의 동등하게 유효한 일치가 있으면 첫 번째 일치 항목을 사용해야 합니다. 'title' 또는 'desc'에서 일치 항목이 없다면 해당 타입의 첫 번째 요소를 선택해야 합니다.

<svg>
  <use href="#star">
    <title>Favourite</title>
    <title lang="en-us">Favorite</title>
    <title lang="nl">Favoriet</title>
    <title lang="">★</title>
  </use>
</svg>
  

여러 ‘title’ 또는 ‘desc’ 요소를 사용해 현지화 정보를 제공하는 방식은 구현 사례가 없어 위험에 노출되어 있습니다.

사용자 에이전트는 선택된 'title' 및 'desc' 요소의 텍스트 내용을 부모 요소의 이름과 설명 계산의 일부로, 플랫폼 접근성 API에 반드시 제공해야 하며, 이는 SVG 접근성 API 매핑 [SVG-AAM] 명세에 정의되어 있습니다.

직접 자식으로 'title' 또는 'desc' 요소가 포함된 렌더링된 요소는 해당 렌더링 요소가 그래픽에서 의미적 중요성을 가진다는 것을 나타냅니다. 저자는 빈 'title' 또는 'desc' 요소(텍스트 내용이 없거나 공백만 있는 요소)를 포함하지 않아야 하며, SVG 생성기는 반드시 그러한 요소를 생성하지 않아야 합니다. 그렇지 않으면 보조 기술 사용자에게 이름 없는 객체가 표시될 수 있습니다.

개별 그래픽 요소가 자체적으로 의미가 없다면, 대안 텍스트는 의미 있는 객체를 설명하는 가장 가까운 컨테이너 요소에 제공되어야 합니다. 저자는 그룹화(‘g’ 요소)를 사용해 도형 요소를 의미 있는 객체로 구조화하고, 해당 그룹에 ‘title’로 이름을 부여해야 합니다. 반대로, 컨테이너 객체가 스타일이나 레이아웃만 적용하기 위해 사용되고, 객체를 정의하거나 의미 있는 그룹 구조를 제공하지 않는다면, 대안 텍스트는 필요하지 않습니다.

부모가 렌더링되지 않는 요소인 서술적 텍스트 요소는 저자나 저작 도구에서 참조 정보로 사용할 수 있지만, 이 데이터는 일반적으로 보조 기술로 그래픽을 보는 최종 사용자에게 제공되지 않는다는 점에 유의해야 합니다. 그럼에도 불구하고, 비렌더링 요소는 렌더링된 요소의 접근 가능한 이름 또는 설명의 일부로 참조될 수 있으며 (SVG-AAM에서 정의됨), 재귀적 계산은 참조된 요소의 서술적 자식 요소를 사용합니다.

설명 및 제목 요소는 표준 XML 메커니즘을 사용하여 다른 네임스페이스의 마크업 텍스트를 포함할 수 있습니다. 그러나 저자는 대안 텍스트에 의미를 제공하려고 이런 마크업에 의존해서는 안 되며, 현재로서는 일반 텍스트 내용만이 보조 기술에 노출되어야 합니다.

HTML 파서는 ‘title’ 및 ‘desc’ 내부의 모든 마크업을 HTML 프래그먼트의 마크업과 동일하게 처리하며, 대부분의 요소가 HTML 네임스페이스로 할당됩니다.

사용자 에이전트는 ‘title’ 내부의 마크업을 제목(툴팁 등)의 시각적 표현에 활용할 수 있지만, 반드시 그럴 필요는 없습니다.

‘title’ 자식 요소는 해당 요소에 대한 짧은 텍스트 대안을 나타냅니다.

링크에서는 대상 리소스의 제목이나 설명이 될 수 있고, 이미지나 도형 객체에서는 그래픽에 대한 간단한 설명이 될 수 있으며, 인터랙티브 콘텐츠에서는 해당 요소의 라벨 또는 사용법 안내가 될 수 있습니다. 등등.

저자는 ‘title’ 요소에 중복 정보를 제공하지 않아야 하며, 도형 요소에 이미 시각적으로 표시되는 라벨(예: ‘text’ 요소 사용)이 있다면 시각적 라벨은 ‘aria-labelledby’ 속성을 사용하여 도형 요소와 연결해야 합니다.

인터랙티브 사용자 에이전트는 ‘title’ 요소의 일반 텍스트 내용을 사용자 상호작용에 따라 플랫폼 관행에 맞게 제공해야 하며, 기존 사용자 에이전트에서는 부모 요소에 마우스를 올릴 때 ‘title’ 요소를 툴팁으로 렌더링하는 경우가 많습니다.

저자는 독립형 SVG 문서의 루트 svg 요소에 ‘title’ 자식 요소를 반드시 제공해야 합니다. 사용자는 종종 문서를 맥락 없이 참조하므로, 저자는 내용이 풍부한 제목을 제공해야 합니다. 따라서 "Introduction"과 같은 제목 대신 "중세 양봉 입문"과 같이 더 많은 배경 정보를 제공하는 제목을 권장합니다. 접근성을 위해 사용자 에이전트는 언제나 루트 svg 요소의 ‘title’ 자식 요소의 내용을 사용자에게 제공해야 합니다. 그러나 이는 일반적으로 중첩된 SVG 및 그래픽 요소에 사용되는 툴팁 대신, 브라우저 탭에 표시하는 등 다른 방법으로 제공됩니다.

‘desc’ 요소는 해당 요소에 대한 더 자세한 텍스트 정보(예: 설명)를 나타냅니다. 이는 보조 기술에서 더 자세한 정보를 제공하기 위해 주로 노출되며, 예를 들어 그래픽의 시각적 외관에 대한 설명이나 복잡한 위젯의 기능 설명 등에 사용됩니다. 일반 사용자에게는 직접 제공되지 않으므로 필수 사용법 안내에는 사용하지 않아야 합니다.

저자는 ‘aria-describedby’ 속성을 사용하여 그래픽의 일부에 대해 자세한 정보(가시 텍스트 포함)를 연결할 수 있습니다 (설명 대상 요소 또는 부모 컨테이너에 적용). 값은 설명을 포함하는 하나 이상의 SVG 또는 HTML 요소의 ID 참조가 됩니다. 설명을 제공할 때 ‘aria-describedby’ 속성이 자식 ‘desc’보다 우선합니다. 요소에 가시적 설명과 보조 정보로 제공되는 자식 ‘desc’ 요소가 모두 있을 경우, 저자는 해당 요소의 ‘id’를 자신의 ‘aria-describedby’ 목록에 명시적으로 포함하여 두 설명을 연결해야 합니다.

5.12.6. ‘data-*’ 속성

모든 SVG 요소는 커스텀 데이터 속성을 지원합니다. 이는 네임스페이스가 없고 이름이 "data-"로 시작하는 속성입니다. HTML 명세의 커스텀 데이터 속성 요구사항을 참고하세요.

5.14.1. Document 인터페이스의 확장

DOM Core 명세는 Document 인터페이스를 정의하며, 이 명세는 해당 인터페이스를 확장합니다.

SVG 문서가 참조로 임베드되는 경우, 예를 들어 HTML 문서에 ‘object’ 요소의 ‘data’ 속성이 SVG 문서를 참조할 때(즉, MIME 타입이 "image/svg+xml"이고 루트 요소가 ‘svg’인 문서), 두 개의 별도의 DOM 계층 구조가 존재하게 됩니다. 첫 번째 DOM 계층은 참조하는 문서(예: XHTML 문서)를 위한 것이고, 두 번째 DOM 계층은 참조된 SVG 문서를 위한 것입니다.

partial interface Document {
  readonly attribute SVGSVGElement? rootElement;
};

rootElement IDL 속성은 루트 ‘svg’ 요소를 나타냅니다. rootElement를 가져올 때, 문서의 루트 요소가 ‘svg’ 요소면 반환하고, 그렇지 않으면 null을 반환합니다.

이 속성은 폐지되었으며, 향후 SVG 명세에서 제거될 수 있습니다. 저자들은 대신 documentElement 속성을 Document에서 사용할 것을 권장합니다.

HTML을 구현하는 SVG 구현체는 문서 인터페이스에 대한 HTML 확장을 지원해야 합니다. 기타 SVG 구현체는 다음 IDL 조각을 지원해야 합니다.

// 일부 구현체에서만 구현해야 함
partial interface Document {
  readonly attribute DOMString title;
  readonly attribute DOMString referrer;
  readonly attribute DOMString domain;
  readonly attribute Element? activeElement;
};

title, referrer, domain, activeElement IDL 속성은 HTML에서 정의된 해당 IDL 속성과 동일하게 동작해야 합니다.

5.14.2. SVGSVGElement 인터페이스

SVGSVGElement 객체는 DOM에서 ‘svg’ 요소를 나타냅니다. SVGSVGElement 인터페이스는 데이터 타입 오브젝트 팩토리 메서드와 같은 유틸리티 메서드도 포함합니다.

SVGSVGElement 객체는 내부적으로 DOMPoint 객체를 유지하며, 이를 current translate point object라고 합니다. 이 객체는 currentTranslate IDL 속성에서 반환되는 객체입니다.

[Exposed=Window]
interface SVGSVGElement : SVGGraphicsElement {

  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;

  attribute float currentScale;
  [SameObject] readonly attribute DOMPointReadOnly currentTranslate;

  NodeList getIntersectionList(DOMRectReadOnly rect, SVGElement? referenceElement);
  NodeList getEnclosureList(DOMRectReadOnly rect, SVGElement? referenceElement);
  boolean checkIntersection(SVGElement element, DOMRectReadOnly rect);
  boolean checkEnclosure(SVGElement element, DOMRectReadOnly rect);

  void deselectAll();

  SVGNumber createSVGNumber();
  SVGLength createSVGLength();
  SVGAngle createSVGAngle();
  DOMPoint createSVGPoint();
  DOMMatrix createSVGMatrix();
  DOMRect createSVGRect();
  SVGTransform createSVGTransform();
  SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);

  Element getElementById(DOMString elementId);

  // Deprecated methods that have no effect when called,
  // but which are kept for compatibility reasons.
  unsigned long suspendRedraw(unsigned long maxWaitMilliseconds);
  void unsuspendRedraw(unsigned long suspendHandleID);
  void unsuspendRedrawAll();
  void forceRedraw();
};

SVGSVGElement includes SVGFitToViewBox;
SVGSVGElement includes SVGZoomAndPan;
SVGSVGElement includes WindowEventHandlers;

x, y, width, height IDL 속성은 각각 반영되어 x, y, width, height 속성 및 이에 상응하는 표현 속성의 계산 값을 나타냅니다.

currentScale 및 currentTranslate IDL 속성은 문서에 사용자 확대 및 패닝 동작에 따라 적용된 변환을 나타내며, 확대 및 패닝에서 설명합니다.

문서의 확대 및 패닝 변환은 다음과 같은 2x3 행렬 형식입니다: [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. ‘transform’ 속성 값은 currentScale 또는 currentTranslate에 영향을 주지 않습니다.

currentScale을 가져올 때는 다음을 수행합니다:

1. 현재 ‘svg’ 요소가 최상위 svg 요소가 아니면, 1을 반환합니다.
2. [a b c d e f]를 문서의 확대 및 패닝 변환을 나타내는 2x3 행렬로 합니다.
3. a를 반환합니다.

currentScale을 설정할 때는 다음을 수행합니다:

1. 현재 ‘svg’ 요소가 최상위 svg 요소가 아니면, return합니다.
2. scale을 currentScale에 할당할 값으로 합니다.
3. [a b c d e f]를 문서의 확대 및 패닝 변환을 나타내는 2x3 행렬로 합니다.
4. 문서의 확대 및 패닝 변환을 [scale 0 0 scale e f]로 설정합니다.

currentTranslate를 가져올 때는 SVGSVGElement 객체의 current translate point object가 반환됩니다. 이 객체는 현재 변환값을 나타냅니다. ‘svg’ 요소가 최상위 svg 요소가 아닌 경우, current translate point object는 읽기 전용이어야 하며, 그렇지 않으면 읽기 가능해야 합니다.

DOMPoint에 할당 규칙을 참고해 current translate point object를 수정하면 문서의 확대 및 패닝 변환에 미치는 영향을 확인하세요.

사용자 상호작용으로 문서의 확대 및 패닝 변환이 변경되거나, 최상위 svg 요소가 변경될 때마다, 다음을 수행합니다:

1. [a b c d e f]를 문서의 확대 및 패닝 변환을 나타내는 2x3 행렬로 합니다.
2. element를 최상위 svg 요소로 합니다.
3. element의 current translate point object의 x, y 성분을 각각 e, f로 갱신합니다.

최상위 svg 요소가 변경될 때 위 절차를 실행하면, 문서 요소가 다른 ‘svg’ 요소로 교체되더라도 currentTranslate가 즉시 문서의 확대 및 패닝 변환의 변환값을 반영하도록 보장할 수 있습니다.

‘svg’ 요소가 더 이상 최상위 svg 요소가 아닐 때, current translate point object의 x, y 성분을 반드시 0으로 설정해야 합니다.

‘zoomAndPan’ 속성 값은 최상위 svg 요소에서 문서의 확대 및 패닝 변환을 사용자 상호작용으로 갱신할 수 있는지 여부만 제어합니다. 해당 속성 값과 관계없이, 현재 스케일과 변환값은 currentScale 및 currentTranslate를 수정하여 변경할 수 있습니다.

suspendRedraw, unsuspendRedraw, unsuspendRedrawAll, forceRedraw 메서드는 모두 폐지되었으며, 호출해도 아무 동작도 하지 않습니다. suspendRedraw가 호출되면 1을 반환해야 합니다.

getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure 메서드는 그래픽 요소의 도형 영역이 주어진 사각형 안에 일부 또는 전체가 포함되는지 검사하거나, 해당 요소를 찾기 위한 기하 연산을 수행할 때 사용됩니다.

주어진 요소 element와 사각형 rectangle에 대해, ancestor를 사각형의 좌표 공간을 해석할 기준 요소로 사용하여, 교차 또는 포함된 자손을 찾으려면 다음을 수행합니다:

1. result를 초기에는 빈 리스트로 둡니다.
2. element가 display 값이 none이거나, 실패한 조건부 처리 속성이 있는 서브트리에 속하거나, ‘switch’의 실패한 브랜치에 있을 경우 표시되지 않으면, result를 반환합니다.
3. element의 각 자식 요소 child에 대해, 문서 순서대로:
   1. child가 ‘svg’ 또는 ‘g’ 요소인 경우:
      1. descendants를 child의 ancestor 좌표계에서 rectangle과 교차(또는 포함)하는 자손을 찾는 결과로 합니다.
      2. descendants의 모든 요소를 result에 추가합니다.
   2. 그렇지 않고 child가 ‘use’ 요소인 경우:
      1. root를 child의 섀도우 트리의 루트로 합니다.
      2. descendants를 root의 ancestor 좌표계에서 rectangle과 교차(또는 포함)하는 자손을 찾는 결과로 합니다.
      3. descendants가 비어 있지 않으면 child를 result에 추가합니다.

         이 뜻은 use 요소 섀도우 트리의 요소들은 살펴보지만, element instance나 그 대응하는 요소는 result 리스트에 넣지 않고, ‘use’ 요소 자체만 반환된다는 뜻입니다.

   3. 그밖에 child가 그래픽 요소인 경우:
      1. region을 child의 좌표계에서 적중 감지에 민감한 도형으로 합니다. 이때 child의 pointer-events 값을 해석하는 규칙을 적용합니다.
      2. region을 ancestor의 좌표계로 변환합니다.
      3. 교차하는 자손을 찾는 중이고 region이 rectangle에 일부 또는 전체 포함되면 child를 result에 추가합니다.
      4. 그 밖에 포함되는 자손을 찾는 중이라면 region이 rectangle에 완전히 포함되면 child를 result에 추가합니다.
4. result를 반환합니다.

주어진 요소 element 내에서 비컨테이너 그래픽 요소를 찾으려면 다음을 수행합니다:

1. result를 초기에는 빈 리스트로 둡니다.
2. element가 ‘svg’ 또는 ‘g’ 요소라면, element의 각 자식 요소 child에 대해 문서 순서대로:
   1. descendants를 child 내에서 비컨테이너 그래픽 요소 찾기 결과로 합니다.
   2. descendants의 모든 요소를 result에 추가합니다.
3. 그렇지 않고 element가 그래픽 요소라면 element를 result에 추가합니다.
4. result를 반환합니다.

getIntersectionList(rect, referenceElement) 또는 getEnclosureList(rect, referenceElement)가 호출되면, 다음을 수행합니다:

1. descendants를 메서드에 따라 다음과 같이 합니다:

   getIntersectionList

   descendants는 현재 ‘svg’ 요소의 좌표계에서 rect와 교차하는 자손을 찾는 결과입니다.

   getEnclosureList

   descendants는 현재 ‘svg’ 요소의 좌표계에서 rect에 포함되는 자손을 찾는 결과입니다.

2. referenceElement가 null이 아니면, descendants에서 referenceElement를 조상으로 갖지 않는 요소를 모두 제거합니다.
3. descendants의 모든 요소를 포함하는 static NodeList를 반환합니다. ([DOM], section 5.2.7)

checkIntersection(element, rect) 또는 checkEnclosure(element, rect)가 호출되면, 다음을 수행합니다:

1. descendants를 메서드에 따라 다음과 같이 합니다:

   getIntersectionList

   descendants는 현재 ‘svg’ 요소의 좌표계에서 rect와 교차하는 자손을 찾는 결과입니다.

   getEnclosureList

   descendants는 현재 ‘svg’ 요소의 좌표계에서 rect에 포함되는 자손을 찾는 결과입니다.

2. elements를 element 내에서 비컨테이너 그래픽 요소 찾기 결과로 합니다.
3. elements가 비어 있으면 false를 반환합니다.
4. elements의 요소 중 하나라도 descendants에 포함되지 않으면, false를 반환합니다.
5. true를 반환합니다.

createSVGNumber, createSVGLength, createSVGAngle, createSVGPoint, createSVGMatrix, createSVGRect, createSVGTransform 메서드는 모두 특정 타입의 새 데이터 타입 객체를 생성하는 팩토리 함수입니다. 각 메서드가 호출되면 아래 표에 따라 새 객체를 반환합니다:

createSVGPoint, createSVGMatrix, createSVGRect 메서드는 모두 폐지되었으며, 레거시 콘텐츠와의 호환성만을 위해 유지됩니다. 저자들은 대신 DOMPoint, DOMMatrix, DOMRect 생성자를 사용할 것을 권장합니다.

createSVGTransformFromMatrix 메서드는 행렬 객체로부터 새로운 SVGTransform 객체를 생성합니다. 동작은 SVGTransformList의 createSVGTransformFromMatrix와 동일합니다.

5.14.3. SVGGElement 인터페이스

SVGGElement 객체는 DOM에서 ‘g’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGGElement : SVGGraphicsElement {
};

5.14.4. SVGUnknownElement 인터페이스

SVGUnknownElement 객체는 SVG 네임스페이스의 알 수 없는 요소를 나타냅니다.

[Exposed=Window]
interface SVGUnknownElement : SVGGraphicsElement {
};

5.14.5. SVGDefsElement 인터페이스

SVGDefsElement 객체는 DOM에서 ‘defs’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGDefsElement : SVGGraphicsElement {
};

5.14.6. SVGDescElement 인터페이스

SVGDescElement 객체는 DOM에서 ‘desc’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGDescElement : SVGElement {
};

5.14.7. SVGMetadataElement 인터페이스

SVGMetadataElement 객체는 DOM에서 ‘metadata’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGMetadataElement : SVGElement {
};

5.14.8. SVGTitleElement 인터페이스

SVGTitleElement 객체는 DOM에서 ‘title’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGTitleElement : SVGElement {
};

5.14.9. SVGSymbolElement 인터페이스

SVGSymbolElement 객체는 DOM에서 ‘symbol’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGSymbolElement : SVGGraphicsElement {
};

SVGSymbolElement includes SVGFitToViewBox;

SVG 2에 새로 추가됨. SVGSymbolElement 인터페이스는 이제 SVGGraphicsElement를 상속하므로, 섀도우 DOM에서 인스턴스화된 symbol을 그래픽 요소로 쿼리할 수 있습니다.

5.14.10. SVGUseElement 인터페이스

SVGUseElement 객체는 DOM에서 ‘use’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGUseElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGElement? instanceRoot;
  [SameObject] readonly attribute SVGElement? animatedInstanceRoot;
};

SVGUseElement includes SVGURIReference;

x, y, width, height IDL 속성들은 각각 반영되어 x, y, width, height 속성 및 이에 상응하는 표현 속성의 계산 값을 나타냅니다.

instanceRoot와 animatedInstanceRoot IDL 속성은 모두 인스턴스 루트를 가리키며, 이 요소의 섀도우 루트의 직접 자식인 SVGElementInstance입니다 (u.instanceRoot는 u.shadowRoot.firstChild를 가져오는 것과 동일합니다). 이 요소에 섀도우 트리가 없으면(예: URI가 유효하지 않거나 조건부 처리로 인해 비활성화된 경우), 해당 속성을 가져오면 null을 반환합니다.

5.14.11. SVGUseElementShadowRoot 인터페이스

각 use 요소 섀도우 트리의 루트 객체는 SVGUseElementShadowRoot 인터페이스를 구현합니다. 이 인터페이스는 현재 ShadowRoot 인터페이스와 DocumentOrShadowRoot 믹스인에 정의된 속성 및 메서드에 대한 확장을 정의하지 않습니다. 하지만 이 노드가 루트인 트리는 저자 스크립트 관점에서 완전히 읽기 전용입니다.

[Exposed=Window]
interface SVGUseElementShadowRoot : ShadowRoot {
};

5.14.12. SVGElementInstance 믹스인

SVGElementInstance 인터페이스는 SVGElement 인터페이스에 대한 확장을 정의하며, 이는 use 요소 섀도우 트리 내의 요소에만 사용됩니다.

이전 버전의 SVG에서는 SVG 요소 인스턴스가 DOM 노드는 아니지만 이벤트 타깃으로 유효한 비요소 객체로 정의되었습니다. 이 명세는 use 요소 섀도우 트리를 Shadow DOM 명세와 일치하도록 재정의하며, 이제 인스턴스는 실제 SVGElement 객체가 됩니다. 이 인터페이스는 이전 호환성을 위한 누락된 기능을 추가합니다. 단, 저자는 호환성이 완벽하지 않음을 인지하고 스크립트를 설계해야 합니다. 또한 섀도우 트리 내의 HTML 네임스페이스 요소 객체에서는 이 속성들이 제공되지 않는다는 점도 주의해야 합니다.

interface mixin SVGElementInstance {
  [SameObject] readonly attribute SVGElement? correspondingElement;
  [SameObject] readonly attribute SVGUseElement? correspondingUseElement;
};

correspondingElement IDL 속성은 이 요소가 use 요소 섀도우 트리의 element instance인 경우 대응하는 요소를 가리키며, 그렇지 않으면 null입니다.

참조된 요소가 외부 파일에 있을 때, 이 포인터가 있으면 외부 파일의 전체 DOM을 메모리에 유지해야 함을 의미합니다. 하지만 현재 명세상, 외부 DOM은 읽기 전용입니다. 따라서 기능이 제한되고 성능에 큰 영향을 줄 수 있습니다. 구현자 피드백을 대기 중이므로 저자는 외부 파일 참조에서 correspondingElement 사용을 위험(risk)으로 간주해야 합니다.

correspondingUseElement IDL 속성은 이 요소가 use 요소 섀도우 트리의 element instance인 경우 대응하는 use 요소를 가리키며, 그렇지 않으면 null입니다.

5.14.13. ShadowAnimation 인터페이스

ShadowAnimation 인터페이스는 읽기 전용 Animation 객체를 정의하며, 생성 시 전달된 sourceAnimation 객체의 모든 변경을 반영합니다. 이는 use 요소 섀도우 트리에서 저자에 의해 생성된 애니메이션 객체를 미러링하는 데 사용됩니다.

[Constructor(Animation source, Animatable newTarget), Exposed=Window]
interface ShadowAnimation : Animation {
  [SameObject] readonly attribute Animation sourceAnimation;
};

sourceAnimation IDL 속성은 생성자에서 전달된 Animation 객체를 가리킵니다.

생성자는 새로운 ShadowAnimation 객체를 생성하며, sourceAnimation의 모든 속성을 반영합니다. 단, effect는 KeyframeEffectReadOnly를 sourceAnimation의 키프레임 이펙트를 소스로 하여 새로 생성한 후, target을 newTarget 파라미터에 맞게 수정합니다.

ShadowAnimation은 읽기 전용입니다. 상속된 IDL 속성을 설정하거나, Animation의 상태를 바꾸는 메서드를 호출하려고 하면, NoModificationAllowedError가 반드시 발생해야 합니다. 하지만 사용자 에이전트는 sourceAnimation의 속성이나 상태가 변경되면 ShadowAnimation에도 반영되도록 해야 합니다.

5.14.14. SVGSwitchElement 인터페이스

SVGSwitchElement 객체는 DOM에서 ‘switch’ 요소를 나타냅니다.

[Exposed=Window]
interface SVGSwitchElement : SVGGraphicsElement {
};

5.14.15. GetSVGDocument 믹스인

이 인터페이스는 다른 DOM 기반 언어에 참조로 임베드된 SVG 문서에 접근할 수 있도록 제공합니다. 이 인터페이스는 해당 SVG 문서 참조를 허용하는 DOM 객체에 구현된다고 예상됩니다.

이 인터페이스는 폐지되었으며, 향후 SVG 명세 버전에서 삭제될 수 있습니다. ‘iframe’ 또는 ‘object’ 요소 내부의 SVG 문서에 접근하려면, 저자들은 각각 HTMLIFrameElement 또는 HTMLObjectElement 인터페이스의 contentDocument 속성을 사용할 것을 권장합니다.

HTMLIFrameElement, HTMLEmbedElement 및 HTMLObjectElement 인터페이스 모두 getSVGDocument 메서드를 정의하며, GetSVGDocument와 동일하게 SVG 문서에 접근할 수 있습니다. 따라서 이 세 인터페이스는 GetSVGDocument를 별도로 구현할 필요는 없습니다. 저자들은 contentDocument 사용을 강력히 추천합니다.

interface mixin GetSVGDocument {
  Document getSVGDocument();
};

getSVGDocument 메서드는 참조된 SVG 문서를 반환하는 데 사용됩니다. getSVGDocument()가 호출되면, 이 인터페이스를 구현하는 임베딩 요소가 참조하는 Document 객체를 반환해야 하며, 문서가 없으면 null을 반환해야 합니다.

이 메서드는 참조된 문서가 실제로 SVG 문서인지 확인하지 않습니다. 대신, 어떤 문서든 반환합니다.