제2장: 적합성 기준

2.1. 개요

SVG로 정의된 그래픽은 다양한 응용 분야를 가지고 있습니다. 그 결과, SVG를 사용하는 모든 소프트웨어가 동일한 기능을 제공하는 것은 아닙니다. SVG 명세에 대한 적합성은 이진적인 문제가 아니며, 소프트웨어는 제한된 기능 집합 내에서 적합성을 가질 수 있습니다.

또한, SVG는 다른 유형의 문서에 통합될 수 있도록 설계되었습니다. 통합 방식에 따라 제한된 기능 집합만이 적합할 수 있습니다. SVG 문서의 일부(fragment)는 다양한 방법으로 다른 문서에서 참조되거나 포함되어 사용자 에이전트에 의해 처리될 수 있습니다. SVG 문서는 기본 문서로 직접 볼 수도 있습니다. SVG 문서 fragment가 사용되는 각 방식은 SVG 문서 fragment가 어떻게 처리되어야 하는지에 대한 특정 요구사항 집합을 내포합니다.

따라서 이 장에서는 처리 모드 를 정의하여 문서에서 활성화되거나 비활성화될 수 있는 다양한 기능 조합을 포괄합니다. 또한, SVG 문서가 다른 SVG 문서를 참조하거나 포함할 때 어떤 처리 모드를 사용해야 하는지에 대한 규범적 요구사항을 명시합니다. 동일한 처리 모드 집합은 다른 명세에서 참조되어 SVG 문서가 어떻게 처리되어야 하는지를 기술하는 데 사용될 수 있습니다.

이 문서는 HTML 및 다양한 CSS 명세처럼 SVG 문서를 참조하거나 포함할 수 있는 다른 명세에 규범적 요구사항을 부과하지 않습니다. 의도는 이러한 다른 명세들이 본 문서에서 적절한 처리 모드를 규범적으로 참조하도록 하는 것입니다.

이 장은 또한 다양한 유형의 SVG 콘텐츠와 SVG를 사용하거나 생성하는 소프트웨어의 다양한 분류에 대한 구체적인 적합성 요구사항을 개략적으로 설명합니다.

2.2. 처리 모드

이 섹션에서는 SVG 문서에 대한 표준 처리 모드 집합을 정의합니다. 각 처리 모드는 특정 고급 SVG 기능이 활성화되는지 여부를 지정합니다.

2.2.1. 기능

처리 모드에 따라 활성화되거나 비활성화될 수 있는 기능은 다음과 같습니다:

선언적 애니메이션

선언적 애니메이션에는 SVG의 애니메이션 요소들 – ‘animate’, ‘animateMotion’, ‘animateTransform’ 그리고 ‘set’ – 및 CSS 트랜지션과 애니메이션이 포함됩니다 (자세한 내용은 애니메이션 부록 참조). 선언적 애니메이션이 SVG 문서에서 비활성화되면, 모든 애니메이션 요소나 CSS 트랜지션 또는 애니메이션은 적용되거나 실행되어서는 안 됩니다.

이는 문서의 애니메이션 상태를 0초로 일시정지하는 것과 다릅니다; 애니메이션이 0초에 시작하도록 정의된 경우에도, 적용되지 않습니다.

외부 리소스 참조

외부 리소스에 대한 참조는 문서에서 사용되는 마크업, 스타일 속성, 스크립트 또는 기타 웹 플랫폼 기능을 통해 만들어진 URL 참조 또는 네트워크 접근 요청을 의미하며, 다음은 제외됩니다:

• 동일 문서 URL 참조 (자세한 정의는 링킹 챕터 참조)
• data URL 참조 ("data" URL 스킴 [rfc2397])

SVG 문서에서 외부 참조가 비활성화된 경우, 외부 참조를 통해 문서를 가져오려는 모든 시도는 네트워크 오류가 발생하여 데이터가 수신되지 않은 것처럼 처리되어야 합니다.

외부 참조가 활성화된 경우, 인터넷에서 외부 파일 요청을 지원하는 사용자 에이전트는 링킹 챕터에 명시된 교차 출처 리소스 가져오기 제한을 따라야 합니다.

스크립트 실행

스크립트 실행은 SVG의 ‘script’ 요소, 이벤트 속성(예: SVG 요소의 ‘onclick’), 혹은 문서에서 사용된 기타 웹 플랫폼 기능에 의해 정의된 모든 스크립트(HTML의 ‘script’ 등)의 실행을 의미합니다. SVG 문서에서 스크립트 실행이 비활성화된 경우, 문서 내 모든 스크립트는 실행되어서는 안 됩니다.

상호작용

상호작용은 DOM 이벤트 전달 또는 사용자 에이전트별 UI 동작(텍스트 선택, 포커스 변경, 링크 이동, 애니메이션 또는 트랜지션 트리거 등)을 의미하며, 이는 마우스 또는 키보드 활동 등 사용자 입력에 대한 응답으로 수행됩니다. SVG 문서에서 상호작용이 비활성화된 경우, 문서 또는 문서 내 요소에 대상으로 하는 사용자 입력 이벤트는 아무런 효과가 없어야 합니다.

2.2.2. 동적 상호작용 모드

이 처리 모드는 SVG 언어의 모든 기능에 대해 제한을 두지 않습니다.

2.2.3. 애니메이션 모드

이 처리 모드는 SVG 문서가 외부 참조를 해결할 수 있는 애니메이션 이미지로 사용되지만, 상호작용 문서로 사용되지 않을 경우를 위해 설계되었습니다.

2.2.4. 보안 애니메이션 모드

이 처리 모드는 SVG 문서가 외부 참조를 해결할 수 없으며, 상호작용 문서로도 사용되지 않을 경우를 위해 설계되었습니다. 이 모드는 이미지 지원이 전통적으로 JPEG, PNG, GIF 등 래스터 이미지로만 제한된 환경에서 사용될 수 있습니다.

2.2.5. 정적 모드

이 처리 모드는 SVG 문서가 외부 참조를 해결할 수 있는 비애니메이션 이미지로 사용되지만, 상호작용 문서로 사용되지 않을 경우를 위해 설계되었습니다. 예를 들어, 인쇄 문서에 그래픽을 포함하기 위해 SVG 뷰어가 그래픽을 처리하는 경우 정적 모드를 사용할 수 있습니다.

2.2.6. 보안 정적 모드

이 처리 모드는 SVG 문서를 외부 참조를 해결할 수 없는 비애니메이션 이미지로 사용하며, 상호작용 문서로도 사용하지 않을 때를 위한 것입니다. 이 모드는 이미지 지원이 전통적으로 비애니메이션 래스터 이미지(JPEG, PNG 등)로만 제한된 환경에서 사용될 수 있습니다.

2.3. SVG 하위 리소스 문서의 처리 모드

SVG 문서를 직접 볼 때에는, 사용자 에이전트가 지원하는 가장 포괄적인 처리 모드로 표시되는 것이 기대됩니다. 그러나 SVG가 하위 리소스 또는 임베디드 문서로 처리될 때에는 다음과 같은 제한이 적용되어야 합니다:

‘image’ 참조

SVG가 ‘image’ 요소 내에 임베드될 경우, 임베드된 문서가 선언적 애니메이션을 지원하면 보안 애니메이션 모드로, 그렇지 않으면 보안 정적 모드로 처리해야 합니다.

SVG가 래스터 이미지를 대신하여 사용되는 다른 사례(HTML ‘img’ 요소, 또는 <image> 데이터 타입을 사용하는 CSS 속성 등)에서도 동일한 처리 모드가 사용되는 것이 기대됩니다. 이는 HTML의 요구사항과 일치하며, 이미지 소스는 "상호작용이 없고, (선택적으로) 애니메이션이 가능하며, 페이징되거나 스크립트가 적용되지 않은 이미지 리소스"를 참조해야 합니다 [HTML]

‘iframe’ 참조

SVG 문서가 HTML ‘iframe’ 요소로 참조될 경우, 해당 SVG 문서는 임베드된 문서와 동일한 처리 모드를 사용해야 하며, 임베드 ‘iframe’의 sandbox 속성에 의해 정의된 제한을 따릅니다.

SVG 문서가 HTML ‘embed’, ‘iframe’, ‘object’ 요소로 로드되는 경우에도 동일한 처리 규칙이 적용됩니다 [HTML]. 상호작용 웹 브라우저에서 최상위 브라우징 컨텍스트인 HTML 문서는 SVG의 동적 상호작용 처리 모드와 동일합니다.

‘use’ 요소 및 기타 ‘href’ 참조

SVG 문서가 ‘use’ 요소나 페인트 서버 요소 교차 참조를 통해 로드될 경우 보안 정적 모드로 처리되어야 합니다.

애니메이션은 하위 리소스 문서를 처리할 때 실행되지 않습니다. 이는 성능상의 이유와 현재 리소스 문서가 타임라인을 참조할 컨텍스트가 정의되어 있지 않기 때문입니다. 그러나 ‘use’ 요소 참조나 페인트 서버 교차 참조로 인해 하위 리소스 문서의 요소가 현재 문서에 복제될 경우, 복제된 요소 인스턴스는 현재 문서의 타임라인에서 애니메이션될 수 있으며(use 요소 섀도 트리의 애니메이션 참조), 추가 하위 리소스 파일의 로딩을 트리거할 수 있습니다.

그래픽 효과 참조

SVG 문서가 문서 내 특정 요소를 대상으로 하는 스타일 속성 참조(이미지 포맷으로서의 SVG가 아닌 경우)를 통해 로드될 때는 보안 정적 모드로 처리되어야 합니다.

하위 리소스 문서에서는 애니메이션이 실행되지 않습니다. 이는 성능상의 이유와 리소스 문서가 타임라인을 참조할 컨텍스트가 정의되어 있지 않기 때문입니다.

일부 스타일 속성은 특정 요소 또는 전체 이미지 파일을 참조할 수 있는데, 첫 번째 경우에 처리 모드가 더 제한적입니다. 예를 들어, SVG ‘mask’ 요소에 대한 참조는 애니메이션되지 않지만, 전체 SVG 파일이 이미지 마스크로 사용되는 경우에는 애니메이션될 수 있습니다.

폰트 내 SVG

SVG 파일이 폰트 참조의 일부로 처리될 경우, 애니메이션 글리프가 지원되면 보안 애니메이션 모드, 그렇지 않으면 보안 정적 모드를 사용해야 합니다.

이러한 제한은 OpenType 명세의 "SVG" 테이블 처리에 포함되어 있습니다. OpenType은 렌더링된 텍스트와 foreignObject의 렌더링을 방지하는 사용자 에이전트 스타일시트도 추가적으로 적용합니다 [OPENTYPE].

호스트 문서에 인라인으로 포함된 SVG 문서 fragment는 호스트 문서의 처리 모드와 일치하는 모드를 사용해야 합니다. SVG ‘foreignObject’ 요소의 자식으로 포함된 SVG 문서 fragment는 주변 SVG 문서의 처리 모드를 따라야 하며, 비-SVG foreign content는 동등한 제한으로 처리되어야 합니다.

예를 들어, SVG 문서가 HTML ‘img’ 또는 SVG ‘image’ 요소에 의해 보안 애니메이션 모드로 사용되고 있다면, ‘foreignObject’ 요소 내의 모든 콘텐츠는 스크립트, 상호작용, 외부 파일 참조가 비활성화되어야 하며, 선언적 애니메이션은 활성화되어야 합니다.

2.3.1. 예시

아래는 참조를 통해 HTML 페이지에 SVG를 임베드하는 다양한 방법과 각 방법에 대한 예상 처리 모드 및 허용 기능입니다.

"실시간 예제" 행의 각 셀은 노란색 웃는 얼굴을 표시해야 합니다. 아래 각 예제에서 눈을 클릭하면 링크 이동이 테스트되고, 얼굴을 클릭하면 선언적 상호작용 및 스크립트 실행이 테스트됩니다. 링크를 클릭하면 이미지를 파란색 사각형으로 바꾸고(다시 클릭하면 원래 이미지로 복귀), 선언적 상호작용은 ‘set’ 요소를 이용해 얼굴 색을 노란색에서 녹색으로, CSS 의사클래스를 이용해 상호작용 요소에 스트로크를 추가합니다. 스크립트는 미소를 채워줍니다. 시간 기반(상호작용 기반 아님) 선언적 애니메이션이 지원되는 경우 왼쪽 눈이 윙크하고(‘animate’ 요소 사용), 눈이 짙은 파랑색에서 일정 간격으로 밝은 파랑색으로 번쩍이면(CSS 키프레임 애니메이션 사용) 동작합니다.

여기서 설명한 예상 처리 모드 및 기능은 해당 HTML 또는 CSS 명세의 향후 변경에 따라 달라질 수 있습니다.

임베딩 방식	object(샌드박스 미사용)	iframe(sandbox="" 사용)	img	CSS 배경
예상 처리 모드	동적 상호작용	동적 상호작용(제한 포함)	보안 애니메이션	보안 애니메이션
선언적, 시간 기반 애니메이션 (윙크하는 왼쪽 눈, 두 눈의 색상 변화)	허용됨	허용됨	허용됨	허용됨
선언적, 상호작용 애니메이션 및 스타일 변경 (클릭 시 얼굴 색상 변경, 마우스오버/포커스 시 얼굴/눈 테두리 강조)	허용됨	허용됨	비활성화	비활성화
동일 브라우징 컨텍스트 내의 링크 이동(동일 도메인) (눈 클릭 시 이미지 변경)	허용됨	허용됨	비활성화	비활성화
스크립트 기반 상호작용 (얼굴 클릭 시 미소 확대)	허용됨	비활성화(샌드박스 때문)	비활성화	비활성화
실시간 예제

2.4. 문서 적합성 분류

SVG는 특정 파일 형식이나 문서 유형이 아닌, 문서 객체 모델(DOM)을 기반으로 정의됩니다. 그러므로 SVG 콘텐츠의 경우, 이 명세에 대한 적합성은 콘텐츠가 적합한 DOM을 생성할 수 있는지 또는 이미 그러한 DOM인지로 정의됩니다. 추가 적합성 분류는 콘텐츠가 유효하고 올바른 XML([xml])인지 여부에 따라 달라집니다.

2.4.1. 적합한 SVG DOM 서브트리

특정 요소를 루트로 하는 DOM 노드 트리 또는 서브트리가 적합한 SVG DOM 서브트리가 되려면 SVG 문서 프래그먼트를 구성해야 하며, 이 문서에서 기술하는 명세(Scalable Vector Graphics (SVG) Specification)를 준수해야 합니다. 구체적으로 다음을 만족해야 합니다:

• SVG 네임스페이스 내의 ‘svg’ 요소가 루트여야 합니다,
• 이 문서(Scalable Vector Graphics (SVG) Specification)에 정의된 요소에 대한 콘텐츠 모델 및 속성 규칙을 준수해야 하며,
• 해당 명세에서 정의한 SVG 네임스페이스의 다른 요소에 대해서도 해당 명세에서 정의하는 콘텐츠 모델 및 속성 규칙을 준수해야 합니다 (예시: [filter-effects-1], [css-masking-1], [svg-animation]).

SVG 문서 프래그먼트는 XML 네임스페이스([xml-names])에서 설명된 XML 네임스페이스 기능을 사용하여 상위 XML 문서 내에 포함될 수 있습니다. 하지만, 적합한 SVG DOM 서브트리는 반드시 루트로 ‘svg’ 요소를 가져야 하므로, SVG 네임스페이스의 개별적이고 ‘svg’가 아닌 요소는 사용할 수 없습니다. 따라서 다음 문서의 SVG 부분은 적합하지 않습니다:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- ParentXML의 요소가 여기에 들어갑니다 -->
  <!-- 다음 내용은 적합하지 않음 -->
  <z:rect xmlns:z="http://www.w3.org/2000/svg"
          x="0" y="0" width="10" height="10" />
  <!-- ParentXML의 추가 요소가 여기에 들어갑니다 -->
</ParentXML>

대신, SVG 부분을 적합한 SVG DOM 서브트리로 만들려면 파일을 다음과 같이 수정해야 합니다:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd">
<ParentXML>
  <!-- ParentXML의 요소가 여기에 들어갑니다 -->
  <!-- 다음 내용은 적합함 -->
  <z:svg xmlns:z="http://www.w3.org/2000/svg"
         width="100px" height="100px">
    <z:rect x="0" y="0" width="10" height="10"/>
  </z:svg>
  <!-- ParentXML의 추가 요소가 여기에 들어갑니다 -->
</ParentXML>

SVG 언어 및 이 적합성 기준은 SVG 콘텐츠의 어떤 측면에도 크기 제한을 지정하지 않습니다. 요소 개수, 문자 데이터 양, 속성 값 내 문자 수에 대한 최대값은 없습니다.

2.4.2. 적합한 SVG 마크업 프래그먼트

문서 또는 문서의 일부가 적합한 SVG 마크업 프래그먼트가 되려면, 해당 문서 MIME 타입에 적합한 파서에 의해(네트워크 오류 제외) 오류 없이 파싱되어 적합한 SVG DOM 서브트리를 형성할 수 있어야 하며, 추가적으로 다음을 만족해야 합니다:

• 문서에 포함된 모든 CSS 스타일시트가 Cascading Style Sheets, level 2 revision 1 [CSS2]의 핵심 문법을 준수해야 합니다.

2.4.3. 적합한 XML 호환 SVG 마크업 프래그먼트

적합한 SVG 마크업 프래그먼트는 다음을 모두 만족하면 적합한 XML 호환 SVG 마크업 프래그먼트가 됩니다:

• XML 올바름(well-formedness) 제약 ([xml])을 모두 만족해야 하며,
• XML 네임스페이스 명세([xml-names])를 준수해야 하며,
• 모든 ‘id’ 속성은 유효한 XML ID ([xml], section 3.3.1)여야 하며,
• 모든 <?xml-stylesheet?> 처리 명령은 XML 문서에 스타일시트 연결하기 [xml-stylesheet]를 준수해야 합니다.

2.4.4. 적합한 XML 호환 SVG DOM 서브트리

특정 요소를 루트로 하는 DOM 노드 트리 또는 서브트리가 적합한 XML 호환 SVG DOM 서브트리가 되려면, XML로 직렬화했을 때 적합한 XML 호환 SVG 마크업 프래그먼트를 형성할 수 있어야 합니다.

DOM 서브트리가 XML로 직렬화되어도 변경 없이 적합한 XML이 되지 않는 경우(예: ‘id’ 값이 유효한 XML 이름이 아니거나, Comment 노드의 데이터에 "--"가 포함된 경우)에는 해당 서브트리는 적합한 XML 호환 SVG DOM 서브트리가 아닙니다.

2.4.5. 적합한 독립 SVG 파일

문서가 적합한 독립 SVG 파일이 되려면 다음을 만족해야 합니다:

• 올바른 XML 문서여야 합니다,
• 루트 요소가 ‘svg’여야 합니다,
• 문서 요소를 루트로 하는 SVG 문서 프래그먼트가 적합한 XML 호환 SVG 마크업 프래그먼트여야 하며,
• 문서 내의 다른 SVG 문서 프래그먼트(예: ‘foreignObject’ 내부)는 적합한 XML 호환 SVG 마크업 프래그먼트여야 합니다.

2.4.6. 오류 처리

SVG 문서 프래그먼트가 기술적으로 오류 상태가 되는 다양한 상황이 있습니다:

• 문서 또는 DOM 서브트리가 이전 섹션에서 설명한 해당 문서 유형에 대해 적합하지 않은 경우,
• 이 명세에서 오류 상태로 설명된 다른 상황(예: 잘못된 속성 값) 포함.

동적 문서는 시간에 따라 오류 상태가 생기거나 사라질 수 있습니다. 예를 들어, SVG DOM이나 애니메이션을 통한 문서 변경으로 인해 문서가 오류 상태가 될 수 있으며, 추가 변경으로 인해 다시 올바른 상태가 될 수 있습니다.

사용자 에이전트는 문서가 오류 상태일 때(해당 오류 유형에 대해 더 구체적인 처리 규칙이 명세의 다른 섹션에 정의되어 있지 않은 경우) 다음 오류 처리 규칙을 사용해야 합니다:

• 오류가 있는 요소를 만난 후에도 문서 렌더링을 계속해야 합니다. 오류가 있는 요소 또는 그 일부는 렌더링되지 않습니다.
• 사용자 에이전트가 상태 표시줄이나 콘솔 등 오류 보고 기능에 접근할 수 있는 경우, 사용자나 개발자가 오류의 원인을 신속히 찾을 수 있도록 가능한 추가 정보를 제공하는 것이 권장됩니다. 예를 들어, 사용자 에이전트는 오류 발생 위치의 행 번호 및 문자 번호와 함께 오류 메시지를 제공할 수 있습니다.

스크립트 변경 블록으로 인해 SVG 문서 프래그먼트가 오류 상태가 되거나 벗어날 수 있으므로, 사용자 에이전트는 문서 표시(예: 디스플레이 장치에 렌더링)가 업데이트될 때만 오류 처리를 적용해야 합니다.

2.5. 소프트웨어 적합성 분류

소프트웨어의 경우, 적합성에 대한 요구사항은 프로그램의 분류에 따라 달라집니다:

SVG 생성기

SVG 콘텐츠를 마크업 또는 DOM 형태로 생성하거나 제공하는 모든 소프트웨어(클라이언트 사이드 자바스크립트 라이브러리 등 포함).

SVG 저작 도구

사람이 그래픽이나 SVG를 생성할 코드/그래픽을 조작할 수 있는 인터페이스를 제공하는 모든 소프트웨어. SVG 저작 도구는 묵시적으로 SVG 생성기이기도 합니다.

SVG 서버

다른 소프트웨어의 요청에 따라 SVG 콘텐츠를 네트워크 또는 파일 서버로 제공하는 모든 소프트웨어. SVG 서버는 묵시적으로 SVG 생성기이기도 합니다.

SVG 해석기

SVG 문서 또는 마크업 프래그먼트를 파싱하거나 처리하는 모든 소프트웨어. SVG 해석기는 이 명세에서 해석기에서 수행되는 파싱 또는 처리 단계와 관련된 모든 섹션에 대해 SVG 사용자 에이전트로 간주됩니다.

SVG 뷰어

SVG 문서 또는 SVG 마크업 프래그먼트를 파싱 또는 처리한 후 그래픽적으로 렌더링하는 모든 소프트웨어. SVG 뷰어는 묵시적으로 SVG 해석기이기도 하며, 이 명세의 목적상 항상 SVG 사용자 에이전트입니다.

SVG 사용자 에이전트

SVG 콘텐츠를 가져오고 렌더링할 수 있는 사용자 에이전트입니다.

사용자 에이전트

사용자 에이전트의 일반적인 정의는 웹 콘텐츠(텍스트, 그래픽, 사운드, 비디오, 이미지 등)를 가져오고 렌더링하는 애플리케이션입니다. 사용자 에이전트는 일부 콘텐츠 유형을 처리하기 위해 추가 사용자 에이전트를 필요로 할 수 있습니다. 예를 들어, 브라우저가 사운드나 비디오를 렌더링하기 위해 별도의 프로그램이나 플러그인을 실행할 수 있습니다. 사용자 에이전트에는 그래픽 데스크톱 브라우저, 멀티미디어 플레이어, 텍스트 브라우저, 음성 브라우저, 스크린 리더, 스크린 확대기, 음성 합성기, 화면 키보드, 음성 입력 소프트웨어 등이 포함됩니다.

일반적으로 "사용자 에이전트"는 SVG 콘텐츠를 가져오고 렌더링할 수 있는 능력이 있을 수도 없을 수도 있습니다. 그러나 문맥상 다른 해석이 요구되지 않는 한, 이 명세에서 "사용자 에이전트"에 대한 모든 참조는 SVG 콘텐츠를 가져오고 렌더링하는 SVG 사용자 에이전트를 의미합니다.

다수의 프로그램이 여러 소프트웨어 분류에 속할 수 있습니다. 예를 들어, SVG 파일을 가져와서 표시하고, 사용자가 수정한 후 파일로 내보낼 수 있는 그래픽 에디터는 SVG 해석기, SVG 뷰어, SVG 저작 도구, 그리고 SVG 생성기입니다.

2.5.1. 적합한 SVG 생성기

적합한 SVG 생성기란, SVG 생성기로서 다음을 만족하는 것입니다:

• 항상 적합한 SVG DOM 서브트리, 적합한 SVG 마크업 프래그먼트, 또는 적합한 독립 SVG 파일을 생성해야 합니다;
• 적합하지 않은 SVG 문서 프래그먼트를 포함하는 문서를 생성해서는 안 됩니다;
• SVG 작성자 및 SVG 생성기에 대한 이 명세의 모든 규범적 요구사항을 준수해야 합니다.

SVG 생성기는 기본적으로 유니코드 문자 인코딩을 사용하는 것이 강력히 권장되며, 월드 와이드 웹용 문자 모델 [UNICODE] [charmod]의 기타 가이드라인을 따르는 것이 바람직합니다.

고정밀 데이터를 처리하는 SVG 생성기는 고정밀 기하 생성에 관한 노트 섹션의 가이드라인을 따르길 권장합니다.

2.5.2. 적합한 SVG 저작 도구

저작 도구(Authoring Tool Accessibility Guidelines 2.0에서 정의됨)는 적합한 SVG 저작 도구가 되려면 적합한 SVG 생성기이어야 하며, 해당 문서의 모든 관련 Level A 요구사항을 준수해야 합니다([atag20]). Level AA 및 Level AAA 요구사항은 권장되지만 적합성에 필수는 아닙니다.

2.5.3. 적합한 SVG 서버

적합한 SVG 서버는 적합한 SVG 생성기의 모든 요구사항을 충족해야 합니다. 또한, HTTP 또는 인터넷 미디어 타입을 사용하는 기타 프로토콜을 사용하는 적합한 SVG 서버는 독립 SVG 파일을 미디어 타입 "image/svg+xml"로 제공해야 합니다.

또한, SVG 파일이 gzip 또는 deflate로 압축된 경우, 적합한 SVG 서버는 프로토콜이 지원하는 경우 적절한 헤더로 이를 표시해야 합니다. 구체적으로, 전송 직전에 서버에서 압축하는 경우 "Transfer-Encoding: gzip" 또는 "Transfer-Encoding: deflate" 헤더를 사용해야 하며, 서버에 압축 형식(svgz 등)으로 저장된 콘텐츠의 경우 "Content-Encoding: gzip" 또는 "Content-Encoding: deflate" 헤더를 사용해야 합니다.

저장된 콘텐츠(HTTP 용어로 "엔터티")의 압축은 HTTP/1.1 TE/ Transfer Encoding ([rfc2616], 섹션 14.39 및 14.41)에서 정의된 메시지 본문의 자동 압축과는 다릅니다.

2.5.4. 적합한 SVG 해석기

SVG 해석기란 SVG 문서 프래그먼트를 파싱하고 처리할 수 있는 프로그램입니다. SVG 해석기의 예로는 서버 사이드 트랜스코딩 도구나 최적화 도구(예: SVG 콘텐츠를 수정된 SVG 콘텐츠로 변환하는 도구), 또는 분석 도구(예: SVG 콘텐츠에서 텍스트를 추출하거나, 유효성 검사기)가 있습니다. SVG를 다른 그래픽 표현으로 변환하는 트랜스코더(예: SVG를 래스터 이미지로 변환하는 트랜스코더)는 뷰어에 해당하므로 뷰어 적합성 기준도 적용됩니다.

적합한 SVG 해석기는 XML 1.0 [xml] 및 XML 네임스페이스 [xml-names]에서 정의된 모든 XML 구성 요소를 파싱하고 처리할 수 있어야 합니다.

적합한 SVG 해석기는 적합한 XML 호환 SVG 마크업 프래그먼트를 DOM 구조(요소, 속성, 텍스트 콘텐츠, 주석 등)를 올바르게 존중하는 방식으로 파싱해야 합니다. 해석기는 모든 기능의 의미를 올바르게 해석할 필요는 없습니다.

SVG 해석기가 비 XML 문법(예: HTML)을 지원한다면, 해당 문법의 적합한 SVG 마크업 프래그먼트도 올바르게 파싱할 수 있어야 합니다.

SVG 해석기가 SVG 콘텐츠를 처리하면서 스크립트 실행 또는 외부 리소스 파일을 가져오는 경우, SVG 하위 리소스 문서의 처리 모드 및 링킹 챕터에서 사용자 에이전트에 대해 설명된 제한을 따라야 합니다.

2.5.5. 적합한 SVG 뷰어

SVG 뷰어란 SVG 문서 프래그먼트를 파싱하고 처리한 후, 문서의 내용을 디스플레이, 프린터, 인그레이버 등 그래픽 출력 매체에 렌더링할 수 있는 프로그램입니다. 따라서 SVG 뷰어는 SVG 해석기이기도 하지만(즉, SVG 문서 프래그먼트를 파싱 및 처리할 수 있음), 올바른 렌더링이라는 추가 요구사항이 있습니다.

적합한 SVG 뷰어는 적합한 SVG 해석기여야 하며, 본 장에서 정의된 처리 모드 중 최소 하나 이상의 렌더링 출력을 지원할 수 있어야 합니다:

• 동적 상호작용 모드
• 애니메이션 모드
• 보안 애니메이션 모드
• 정적 모드
• 보안 정적 모드

적합한 SVG 뷰어는 본 명세에서 사용자 에이전트에 대해 명시된 모든 규범적 요구사항을, 자신이 지원하는 처리 모드의 모든 기능에 대해 충족해야 합니다.

모든 적합한 SVG 뷰어에 적용되는 구체적 기준:

• 뷰어는 Cascading Style Sheets, level 2 revision 1 [CSS2]에서 정의된 모든 CSS 문법 기능을 파싱할 수 있어야 하며, 스타일링 챕터에 나열된 모든 필수 속성과 필수 기능을 포함하여 SVG 콘텐츠에 CSS 스타일을 적용할 수 있어야 합니다. 뷰어는 다른 CSS 언어 기능이나 SVG 요소에 적용되는 기타 속성을 지원할 수 있습니다. CSS 2.1에서 지원해야 하는 기능은 CSS 2.1 명세의 적합성 정의 ([CSS2], section 3.2)에 따라 구현해야 합니다.
• 뷰어는 표현 속성을 사용하여 SVG 콘텐츠에 스타일 속성을 적용할 수 있어야 합니다.
• SVG 콘텐츠의 이미지 영역은 100% 미만의 불투명도를 가질 수 있습니다. 뷰어는 최소한 Compositing and Blending Specification에서 설명하는 단순 알파 합성(Simple Alpha Compositing)을 지원해야 합니다.
• 뷰어는 data URL 참조를 지원해야 하며, base64 인코딩 또는 URL 인코딩된 콘텐츠를 "data:" URL 스킴 [rfc2397]에 따라 SVG 콘텐츠 내에서 다른 문서에 대한 URI 참조가 허용되는 모든 위치에서 처리할 수 있어야 합니다. 인코딩된 문서의 MIME 타입이 image/svg+xml인 경우, 잘 형성된 완전한 SVG 문서여야만 처리됩니다.
• 뷰어는 JPEG 및 PNG 이미지 포맷을 지원해야 합니다 [JPEG] [PNG].

  뷰어가 보안 처리 모드만 지원하더라도, data URL 참조 처리를 위해 해당 이미지 포맷을 지원해야 합니다.

• 이미지 데이터 리샘플링은 image-rendering 속성 명세와 일치해야 합니다.
• 부모 환경에서 가능하다면, 뷰어는 물리적 장치 해상도 및 예상되는 시청 환경 정보를 이용해 초기 축척을 정확히 결정해야 하며, 이는 CSS 2.1에서 설명하는 규칙 ([CSS2], section 4.3.2)에 따라야 합니다. 해당 정보를 결정할 수 없는 경우에는 뷰어 또는 부모 환경이 일반적인 대상 장치에 대해 합리적인 근사값을 사용해야 합니다.
• 모든 시각적 렌더링은 초기 1:1 줌 비율에서 수학적으로 정확한 결과에 대해 한 디바이스 픽셀 또는 포인트 이내의 정확도를 가져야 합니다. 뷰어는 줌 시에도 높은 정확도를 유지하도록 노력하는 것이 좋습니다.

  저해상도 디스플레이 장치에서는 안티앨리어싱이나 기타 스무딩 방법 지원이 강력히 권장됩니다. 이는 적합한 고품질 SVG 뷰어에서는 필수입니다.

• 프린팅 장치를 지원하는 경우, SVG 콘텐츠는 프린터 해상도에서 인쇄될 수 있어야 하며, 디스플레이에서 요구되는 그래픽 기능(예: 색상 지정)은 프린터에서도 동일하게 지원되어야 합니다.
• 정확한 sRGB [SRGB] 색상을 지원하는 시스템에서는, 모든 sRGB 색상 계산 및 결과 색상 값이 sRGB 색상 컴포넌트 값(0~255)의 오차 1 이내로 정확해야 합니다.
• SVG 구현체는 gzip 인코딩 [rfc1952] 및 deflate 인코딩 [rfc1951] 데이터 스트림을 모든 콘텐츠 유형(예: SVG, 스크립트 파일, 이미지)에 대해 올바르게 지원해야 합니다. HTTP를 지원하는 SVG 구현체는 HTTP 1.1 명세([rfc2616])에 따라 해당 인코딩을 지원해야 하며, 클라이언트는 "Accept-Encoding:" 요청 헤더 [HTTP-ACCEPT-ENCODING]에 gzip과 deflate를 최소한 명시해야 하며, 서버에서 다운로드한 gzip 인코딩 및 deflate 인코딩 데이터 스트림을 반드시 해제해야 합니다. SVG 뷰어가 압축된 콘텐츠(예: .svgz 파일)를 HTTP로 가져올 때, "Content-Encoding" 및 "Transfer-Encoding" 응답 헤더가 누락되거나, 적용된 압축 방식과 일치하지 않는 값을 지정한 경우, SVG 뷰어는 콘텐츠를 렌더링하지 않고 문서를 오류 상태로 처리해야 합니다.
• 좌표 변환 등 모든 수치 연산의 중간 계산에는 최소한 단정도(single-precision) 부동소수점 연산을 사용해야 합니다. 단, 좌표 변환의 반올림 오차를 방지하기 위해 CTM 생성 처리에서는 최소한 배정도(double-precision) 부동소수점 연산을 사용해야 합니다. 최소한의 전형적 연산 방식은 다음 수식과 같습니다.
  $$(\mathrm{single})\mathrm{CTM}=(\mathrm{single})((\mathrm{double})\left[\begin{array}{ccc}{a}_1& c_1& e_1\\ b_1& d_1& f_1\\ 0& 0& 1\end{array}\right]\cdot <!--\; \cdot \; -->(\mathrm{double})\left[\begin{array}{ccc}{a}_2& c_2& e_2\\ b_2& d_2& f_2\\ 0& 0& 1\end{array}\right])$$

  
  $$
  (single)
  {\large \rm CTM} =
  (single)
  \left(
    (double)
    \left[
      \begin{matrix}
         a_1 & c_1 & e_1 \\
         b_1 & d_1 & f_1 \\
         0 &   0 &   1
      \end{matrix}
    \right]
    \cdot
    (double)
    \left[
      \begin{matrix}
         a_2 & c_2 & e_2 \\
         b_2 & d_2 & f_2 \\
         0 &   0 &   1
      \end{matrix}
    \right]
  \right)
  $$
  
    

  $$(\mathrm{single})\left[\begin{array}{c}{x}_{\mathrm{viewport}}\\ y_{\mathrm{viewport}}\\ 1\end{array}\right]=\mathrm{CTM}\cdot <!--\; \cdot \; -->(\mathrm{single})\left[\begin{array}{c}{x}_{\mathrm{userspace}}\\ y_{\mathrm{userspace}}\\ 1\end{array}\right]$$

  $$
  (single)
  \left[
  \begin{matrix}
  x_{\rm viewport} \\
  y_{\rm viewport} \\
  1
  \end{matrix}
  \right]
  =
  {\large \rm CTM} \cdot (single)
  \left[
  \begin{matrix}
  x_{\rm userspace} \\
  y_{\rm userspace} \\
  1
  \end{matrix}
  \right]
  $$
    

  또한, 중첩된 viewport 좌표계가 있을 때 사용자 좌표를 출력 장치의 좌표로 변환하는 중첩 CTM에 의해 생성되는 ScreenCTM도 배정도(double-precision) 부동소수점 연산으로 생성되어야 합니다.

적합한 SVG 뷰어가 처리 모드 중 상호작용을 포함하는 경우, 추가로 다음 기능을 지원해야 합니다:

• 인터랙티브 사용자 환경에서는 독립 SVG 문서 또는 부모 XML 문서에 임베드된 SVG 문서 프래그먼트에 대해 줌 및 팬 기능을 제공해야 합니다.
• 적절한 사용자 상호작용 기능이 있는 환경에서는 뷰어가 하이퍼링크 활성화 기능을 지원해야 합니다.
• 웹 브라우저 환경에서는 뷰어가 SVG 콘텐츠 내에서 텍스트 문자열을 검색 및 선택할 수 있어야 합니다.
• 디스플레이 장치를 지원하는 경우, 뷰어가 SVG 콘텐츠에서 텍스트를 선택하여 시스템 클립보드로 복사할 수 있어야 합니다.
• 뷰어는 User Agent Accessibility Guidelines 2.0 [UAAG20]의 모든 해당 Level A 요구사항을 충족해야 합니다. Level AA 및 AAA 기능은 권장되나 필수는 아닙니다.

적합한 SVG 뷰어가 처리 모드 중 스크립트 실행을 포함하는 경우, 추가로 다음 기능을 지원해야 합니다:

• 뷰어는 본 명세의 모든 IDL 조각에 대해 적합한 ECMAScript 구현체여야 합니다. [WebIDL]

사용자 에이전트가 HTML 또는 XHTML 보기 기능을 포함하거나, XML 문서에 CSS 스타일 속성을 적용할 수 있는 경우, 적합한 SVG 뷰어는 "image/svg+xml" MIME 타입 리소스를 래스터 이미지 외부 리소스를 사용할 수 있는 모든 위치(HTML 또는 XHTML ‘img’ 요소, CSS의 래스터 이미지 참조 속성 등)에서 지원해야 합니다(예: ‘background-image’).

2.5.5.1. 인쇄 구현 노트

디스플레이 장치에서 줌을 지원하며 프린팅도 지원하는 사용자 에이전트의 경우, 기본 인쇄 옵션이 현재 SVG 문서 프래그먼트의 디스플레이 장치상 뷰를 반영하는 인쇄 결과를 생성하는 것이 권장됩니다(미디어 전용 스타일링이 없다면). 이때 사용자가 수행한 줌/팬, 현재 애니메이션 상태, DOM 및 스크립팅에 의한 문서 변경 사항을 모두 고려해야 합니다.

따라서 사용자가 디스플레이에서 지도 특정 영역을 확대하여 하드카피를 요청하면, 하드카피는 디스플레이에 나타난 지도와 동일한 뷰를 보여야 합니다. 사용자가 애니메이션을 일시정지하고 인쇄하면, 하드카피는 디스플레이의 현재 일시정지된 그림과 동일한 그래픽을 보여야 합니다. 스크립팅으로 문서에 요소가 추가/삭제된 경우, 하드카피에도 디스플레이에 반영된 변경 사항이 동일하게 반영되어야 합니다.

SVG 문서가 애니메이션 및 스크립트 기능을 지원하지 않는 프린터 등 정적 전용 장치에 렌더링될 때, 사용자 에이전트는 문서 내의 애니메이션 및 스크립트 요소를 무시하고, 나머지 그래픽 요소를 본 명세의 규칙에 따라 렌더링해야 합니다.

2.5.6. 적합한 고품질 SVG 뷰어

적합한 SVG 뷰어가 적합한 고품질 SVG 뷰어로 간주되려면, 다음 추가 기능을 지원해야 합니다:

• 우수한 처리 및 렌더링 성능, 부드럽고 깜빡임 없는 애니메이션 등 전문가 수준의 결과.
• 150dpi 이하의 저해상도 장치에서는 선, 곡선, 텍스트의 가장자리를 부드럽게 처리(스무딩, 안티앨리어싱 등).
• ICC 프로파일 지원을 통한 색상 관리 [ICC] (ICC 프로파일을 사용한 색상 지원) [css-color-4]
• 이미지 데이터 리샘플링은 image-rendering 속성 설명의 고품질 SVG 뷰어 요구사항을 준수해야 합니다.
• 좌표계 변환의 수치 계산에는 최소한 배정도(double-precision) 부동소수점 연산을 사용해야 합니다.

적합한 고품질 SVG 뷰어가 처리 모드 중 스크립트 실행, 선언적 애니메이션, 상호작용을 포함하는 경우, 다음 추가 기능을 지원해야 합니다:

• 점진적 렌더링 및 애니메이션 효과(문서가 다운로드 중에도 일부가 바로 표시되고 애니메이션이 동시에 실행됨).
• 화면 업데이트 제한(즉, 다시 그리기 이벤트에 응답해 필요한 영역만 화면을 갱신).

적합한 고품질 SVG 뷰어가 처리 모드 중 상호작용을 포함하는 경우, 추가로 다음 기능을 지원해야 합니다:

• 웹 서버에서 이미지를 백그라운드로 다운로드하고, 다운로드가 완료되면 화면을 갱신함(폰트 포함).