3장: 렌더링 모델

3.2. 렌더링 트리

SVG 문서의 최종 렌더링된 표현의 구성 요소는 문서 모델의 기본 요소와 일대일 관계를 가지지 않습니다. 그래픽의 외형은 대신 렌더링 트리라는 병렬 구조를 반영하며, 일부 요소는 제외되고 다른 요소는 반복됩니다.

SVG 네임스페이스의 많은 요소는 그래픽 문서의 구성 요소를 직접 나타내지 않습니다. 대신, 그래픽 효과, 메타데이터, 다른 요소를 나타내기 위한 콘텐츠, 혹은 특정 조건에서 표시될 대안을 정의합니다. 동적 문서에서는 그래픽의 특정 구성 요소가 상호작용이나 애니메이션에 따라 렌더링될 수도 있고 그렇지 않을 수도 있습니다. 이러한 렌더링되지 않는(non-rendered) 요소는 렌더링 트리에 직접 포함되지 않습니다.

SVG는 그래픽 하위 구성요소의 재사용을 지원하므로, 일부 요소는 여러 번 렌더링됩니다. 각각의 렌더링은 문맥에 따라 스타일링이 다를 수 있고 서로 다른 배율이나 변환으로 래스터화될 수 있습니다.

3.2.1. 정의

렌더링 트리

렌더링 트리는 SVG 문서 조각에서 렌더링되는 요소 집합입니다. 문서 트리에서 렌더링되지 않는 요소를 제외하고 재사용된 그래픽에 대해 추가 조각을 삽입해 생성됩니다. 그래픽은 렌더링 트리 순서에 따라 페인팅 및 합성되며, paint-order 속성에 따라 재정렬될 수 있습니다. 시각적으로 그릴 내용이 없는 요소도 렌더링 트리에 포함될 수 있다는 점에 유의하세요.

렌더링된 요소

현재 문서의 렌더링 트리에 직접 표현이 있는 요소. use-element shadow tree에서 요소의 렌더링된 인스턴스를 포함합니다. 재사용된 그래픽의 원본 정의로써 렌더링에 영향을 주지만 직접 렌더링되지 않는 요소는 포함되지 않습니다. 렌더링되는 요소와 렌더링되지 않는 요소 참고.

렌더링되지 않는 요소

현재 문서의 렌더링 트리에 직접 표현이 없는 요소. 그래도 재사용된 그래픽이나 그래픽 효과로써 렌더링 트리에 영향을 줄 수 있습니다. 렌더링되는 요소와 렌더링되지 않는 요소 참고.

재사용된 그래픽

렌더링 트리에 포함되지만 문서 모델에 직접적으로 단일 대응하는 요소가 없는 그래픽 구성 요소. shadow DOM 요소로 나타날 수 있으며 (‘use’ 요소로 그래픽을 재사용하는 경우처럼), 그래픽 효과의 일부로 생성된 이미지 조각(패턴이나 마스크 등)일 수도 있습니다.

절대 렌더링되지 않는 요소

문맥이나 display 스타일 값과 관계없이 절대 직접 렌더링되지 않는 요소 타입. 다음 요소들을 포함합니다: ‘clipPath’, ‘defs’, ‘desc’, ‘linearGradient’, ‘marker’, ‘mask’, ‘metadata’, ‘pattern’, ‘radialGradient’, ‘script’, ‘style’ 그리고 ‘title’; 또한 인스턴스 루트가 아닌 ‘symbol’ 요소도 포함합니다.

렌더링 가능한 요소

렌더링 트리에 그래픽, 컨테이너, 텍스트, 오디오, 또는 애니메이션으로 직접 표현될 수 있는 모든 요소 타입. 다음 요소들을 포함합니다: ‘a’, ‘audio’, ‘canvas’, ‘circle’, ‘ellipse’, ‘foreignObject’, ‘g’, ‘iframe’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘svg’, ‘switch’, ‘text’, ‘textPath’, ‘tspan’, ‘unknown’, ‘use’ 그리고 ‘video’; 또한 인스턴스 루트인 ‘symbol’ 요소도 포함합니다.

렌더링 가능한 요소는 특정 문서나 시점에 렌더링될 수도 있고 안 될 수도 있습니다.

3.2.2. 렌더링되는 요소와 렌더링되지 않는 요소

어느 시점이든 모든 SVG 요소 (또는 요소 인스턴스, use-element shadow tree 내) 는 렌더링 또는 비렌더링 상태입니다. 요소가 현재 렌더링되는지 여부는 시각적 표시뿐만 아니라 상호작용 및 기하학적 계산에도 영향을 줍니다.

요소가 렌더링되지 않는다는 네 가지 경우는 다음과 같습니다:

• 절대 렌더링되지 않는 요소 타입
• 조건부 처리 속성이나 ‘switch’ 구조로 인해 제외된 요소
• display 속성의 계산 스타일 값이 none인 요소
• 다른 비렌더링 요소의 자손 요소

렌더링되지 않는(non-rendered) 요소:

• 그래픽에 시각적 효과를 주지 않습니다. 단, 다른 요소가 참조하여 렌더링에 사용한 경우는 예외입니다.
• ‘clipPath’ 또는 ‘mask’ 요소의 자손일 때 클리핑 경로나 마스크의 기하학에 기여하지 않습니다.
• 포인터 이벤트에 반응하지 않습니다.
• 포커스를 받을 수 없습니다.
• 바운딩 박스 계산에 기여하지 않습니다.
• 텍스트 레이아웃 수행 시 고려되지 않습니다.

렌더링되지 않는 요소는 문서 접근성 트리에는 나타나지 않습니다. 그러나 문서 모델의 일부로 남아 있으며, 스타일 상속과 계단식에 참여합니다.

3.2.3. 가시성 제어: ‘display’ 및 ‘visibility’ 속성의 효과

SVG는 일반적으로 렌더링되는 요소의 가시적 표시를 토글하기 위해 두 가지 속성을 사용합니다: display와 visibility입니다. 정적 문서에서는 둘 다 비슷한 시각적 효과를 내지만, 개념적으로는 구별됩니다.

CSS 2.1 명세에서 display와 visibility 정의를 참고하세요. [CSS2]

display를 none으로 설정하면 해당 요소는 렌더링되지 않습니다. 그래픽 요소, 텍스트 콘텐츠 요소, 컨테이너 요소에 적용 시, display를 none으로 설정하면 해당 요소(및 모든 자손)는 렌더링 트리의 일부가 되지 않습니다. display는 상속 속성이 아니라는 점에 유의하세요.

display 값이 none이 아닌 경우는 정상적으로 렌더링됩니다.

display 속성은 렌더링 가능한 요소에만 적용됩니다. 절대 직접 렌더링되지 않는 요소나 조건부 처리로 렌더링되지 않는 요소에 display: none을 설정해도 아무 효과가 없습니다.

display 속성은 해당 요소의 직접 처리에만 영향을 주며, 다른 요소에서 참조하는 것은 막지 않습니다. 예를 들어, display: none을 ‘path’ 요소에 지정하면 그 요소가 캔버스에 직접 렌더링되는 것은 막지만, ‘path’ 요소는 ‘textPath’ 요소에서 참조될 수 있고, 해당 기하 정보는 텍스트 경로(text-on-a-path) 처리에 사용됩니다.

그래픽 요소 또는 ‘use’ 요소에 visibility를 hidden 또는 collapse로 설정하면 해당 요소는 페인팅되지 않습니다. 하지만 렌더링 트리의 일부로 남아 있습니다. 포인터 이벤트에 민감할 수 있고 (pointer-events 값에 따라), 포커스를 받을 수 있으며 (‘tabindex’ 값에 따라), 바운딩 박스 계산 및 클리핑 경로에 기여하며, 텍스트 레이아웃에도 영향을 줍니다.

visibility 속성은 그래픽 요소, 텍스트 콘텐츠 요소, 그리고 ‘a’ 요소가 텍스트 콘텐츠 요소의 자식일 때만 직접적으로 렌더링에 영향을 줍니다. visibility는 상속 속성이므로, ‘use’ 요소나 컨테이너 요소 자체에는 효과가 없지만, 상속된 값이 자손 요소에 영향을 줄 수 있습니다.

3.2.4. 그래픽 재사용

문서의 한 부분(또는 다른 문서)에서 정의된 그래픽 콘텐츠는 다른 요소를 렌더링하는 데 사용할 수 있습니다. 렌더링 관점에서 그래픽 재사용은 두 가지 유형이 있습니다:

• ‘use’ 요소나 페인트 서버 간 교차 참조로 생성되는 shadow DOM 요소
• 다른 요소에 그래픽 효과로 재사용되는 콘텐츠; marker, 페인트 서버 요소, ‘clipPath’ 및 ‘mask’의 자식 콘텐츠 등

Shadow DOM 요소는 일반 요소와 동일하게 렌더링됩니다. 즉, 호스트 요소(예: ‘use’ 요소)가 컨테이너이고 shadow 콘텐츠가 그 자손인 것처럼 취급됩니다. Shadow DOM 요소의 스타일 및 기하 속성은 원본 문서의 대응 요소와는 독립적으로 처리됩니다. display 속성은 shadow 요소에서 일반적으로 동작하지만, ‘symbol’ 요소에는 예외 규칙이 적용됩니다.

블렌딩 관점에서 ‘use’ 요소는 비고립 그룹을 형성합니다.

반면, 그래픽 효과 요소는 독립적인 SVG 조각을 생성하여 스태킹 컨텍스트 및 고립 그룹으로 렌더링됩니다. 이 조각의 캔버스는 크기가 조정됩니다. 그래픽 효과 요소의 자식 콘텐츠는 이 캔버스에 렌더링 및 합성됩니다. 평탄화된(Flattened) 캔버스 전체는 다른 페인트 레이어와 합성/블렌딩할 때 벡터 이미지로 취급됩니다.

그래픽 효과 요소의 자식 콘텐츠에서 display 속성을 none으로 설정하면, 해당 서브트리가 렌더링에 사용되지 않습니다. 그러나 그래픽 효과 요소나 상위 요소에서 display: none 값을 지정해도 그래픽 효과 자체에는 영향을 주지 않습니다.

3.3. 페인터 모델

SVG는 "페인터 모델" 렌더링을 사용합니다. 페인트는 출력 장치에 연속적으로 적용되어 각 작업이 출력 장치의 일부 영역에 페인트를 칠하며, 이미 칠해진 페인트를 가릴 수 있습니다. 각 객체 또는 그룹이 페인팅된 후에는 다음 페인팅 작업의 배경이 됩니다. SVG 2는 각 페인팅 작업이 배경과 어떻게 상호작용할지 제어하는 고급 블렌딩 모드 및 합성 작업을 지원합니다. 이러한 페인팅 작업을 규정하는 규칙은 합성 및 블렌딩 명세에서 설명합니다.

3.4. 렌더링 순서

SVG의 요소들은 3차원으로 배치됩니다. SVG 뷰포트의 x, y 축 위치 외에도, SVG 요소들은 z축에도 배치됩니다. z축 위치가 그려지는 순서를 결정합니다.

z축을 따라 요소들은 스태킹 컨텍스트로 그룹화됩니다.

개별 그래픽 요소는 비고립 그룹처럼 취급되며, 그래픽 요소를 구성하는 컴포넌트(채우기, 외곽선 등)는 (자세한 내용은 도형 및 텍스트 페인팅 참고) 해당 그룹의 구성원입니다. 그룹 렌더링 방법도 확인하세요.

‘g’ 요소(자세한 내용은 컨테이너 요소 참고)와 같은 그룹화 요소는 합성 그룹을 만듭니다. 마찬가지로 ‘use’ 요소도 자신의 섀도우 콘텐츠에 대해 합성 그룹을 만듭니다. 합성 및 블렌딩 명세는 합성 그룹을 렌더링하는 방법을 규범적으로 설명합니다. SVG에서는 효과를 그룹에 적용할 수 있습니다. 예를 들어, 불투명도(opacity), 필터, 마스킹 등이 있습니다. 이러한 효과들은 그룹에 대한 변형(transform)이 적용되기 직전에 렌더링된 그룹 결과에 적용되며, 변형은 그룹이 그룹 배경과 블렌딩 및 합성되기 바로 전에 적용됩니다. 이러한 효과를 그룹에 적용하면 해당 그룹은 고립(isolated)됩니다.

따라서 합성 그룹의 렌더링은 다음과 같은 단계로 진행됩니다:
그룹이 고립된 경우:

1. 초기 배경(initial backdrop)은 rgba(0,0,0,0)로 초기화된 새 버퍼로 설정됩니다
2. 그룹 내 그래픽 요소 또는 ‘g’ 요소의 콘텐츠를 순서대로 초기 배경에 렌더링합니다
3. 필터 및 그룹 캔버스를 변경하는 기타 효과가 적용됩니다

   고품질 렌더링을 위해 필터 프리미티브와 기타 비트맵 효과는 작동 좌표 공간에서 적용해야 합니다.

4. 그룹 변형이 적용됩니다
5. 그룹 캔버스가 그룹 배경과 블렌딩 및 합성됩니다

그렇지 않은 경우(그룹이 고립되지 않음):

1. 초기 배경은 그룹 배경으로 설정됩니다
2. 그룹 내 그래픽 요소 또는 ‘g’ 요소의 콘텐츠를 순서대로 초기 배경에 렌더링합니다. 이때 그룹 변형은 각 요소가 렌더링될 때 각각 적용됩니다.

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- Background blue rectangle -->
  <rect x="100" y="100" width="1000" height="150" fill="blue"/>

  <!-- Red circles going from opaque to nearly transparent -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>

  <!-- Opaque group, opaque circles -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Group opacity: .5, opacity circles -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
  </g>
  <!-- Opaque group, semi-transparent green over red -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
  <!-- Opaque group, semi-transparent red over green -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
  </g>
  <!-- Group opacity .5, semi-transparent green over red -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
  </g>
</svg>

3.9. 클리핑 및 마스킹

SVG는 다음과 같은 클리핑/마스킹 기능을 지원합니다:

• 클리핑 경로: ‘path’, ‘text’ 및 기본 도형을 조합하여(또는 기본 도형 단독으로) 경계선을 정의할 수 있으며, 안티앨리어싱이 없는 1비트 마스크 경계선의 "안쪽"은 표시되고 "바깥쪽"은 마스킹되어 숨겨집니다.
• 마스크: 컨테이너 요소로, 그래픽 요소 또는 그래픽을 정의할 다른 컨테이너 요소들을 포함할 수 있으며, 이 그래픽 집합은 전경 객체를 현재 배경에 합성할 때 반투명 마스크로 사용됩니다.

클리핑과 마스킹 모두 CSS Masking 모듈 [css-masking-1]에서 정의되어 있습니다.

overflow 속성의 SVG 내 동작 요약

element	initial	ua stylesheet	auto	visible	hidden	scroll
document root svg	visible	n/a	visible | scroll	visible	hidden	scroll
other svg	visible	hidden	visible | scroll	visible	hidden	scroll
text	visible	hidden	visible	visible	hidden	hidden
pattern	visible	hidden	visible	visible	hidden	hidden
marker	visible	hidden	visible	visible	hidden	hidden
symbol	visible	hidden	visible	visible	hidden	hidden
image	visible	hidden	visible	visible	hidden	hidden
iframe	visible	hidden	visible | scroll	visible	hidden	scroll
foreignObject	visible	hidden	visible | scroll	visible	hidden	scroll

overflow 속성은 동일한 파라미터 값을 가지며, CSS 2.1에서 정의된 것과 동일한 의미를 가집니다 ([CSS2], 섹션 11.1.1); 다만, 다음 추가 사항이 적용됩니다:

• overflow 속성이 'visible' 값이면, 아무 효과도 없습니다(즉, 클리핑 사각형이 생성되지 않음).
• overflow 속성을 적용할 수 있는 요소의 경우, 값이 hidden 또는 scroll이면 SVG 뷰포트의 정확한 크기로 클립이 적용됩니다.
• scroll 값을 ‘svg’ 요소에 지정하고, 사용자 에이전트가 스크롤 막대나 패너처럼 화면에 표시되는 스크롤 메커니즘을 사용하는 경우, 해당 메커니즘은 SVG 뷰포트에 내용이 클립되었는지 여부와 관계없이 표시되어야 합니다.
• SVG 콘텐츠 내에서 auto 값은 자식 요소의 모든 렌더링된 콘텐츠가 스크롤 메커니즘 또는 클립 없이 visible로 보여야 함을 의미합니다. scroll 값으로 인해 에이전트가 스크롤 메커니즘을 사용하는 경우, auto는 scroll로 처리될 수 있습니다. 사용자 에이전트에 스크롤 메커니즘이 없거나, 내용이 클립되지 않거나, 'scroll' 값을 hidden으로 처리하는 경우, auto는 visible로 처리해야 합니다.