x, y, width, height 기하 속성들은 임베디드 콘텐츠가 위치하게 될 사각형 영역(이를 포지셔닝 사각형이라 부름)을 지정합니다.
포지셔닝 사각형은 해당 요소의 바운딩 박스로 사용됩니다.
단, 그래픽이 포지셔닝 사각형을 넘칠 수 있음을 유념해야 하며,
이는 overflow 속성 값에 따라 달라집니다.
HTML 네임스페이스의 요소들은 기하 속성을 위한 SVG 표현 속성을 갖지 않습니다.
그러나 대부분의 이런 요소들은 HTML의
width 및 height치수
속성을 받아들이며,
이는 해당 크기 속성의 기본값을 설정하기 위한 프리젠테이션 힌트로 사용됩니다.
HTML 치수 속성은 HTML 명세[HTML]에 정의된 대로 해석 및 처리되어야 합니다.
즉, 단위가 포함된 CSS 길이가 아니라 정수값만 허용됩니다.
‘canvas’ 요소의 경우,
해당
속성은 약간 다릅니다:
속성은 레이아웃뿐 아니라 렌더링되는 비트맵에도 영향을 미칩니다.
x 및 y 기하 속성은
HTML 네임스페이스 요소에서는 CSS를 통해서만 설정할 수 있습니다.
width 또는 height 값이 0이면 해당 요소와 임베디드 콘텐츠의 렌더링이 비활성화됩니다.
width 또는 height에 'auto' 값을 지정하면
참조 리소스의 내재 크기 또는 내재 비율을 기반으로 해당 요소의 크기가 자동으로 결정됩니다.
자동 크기 산출은 CSS 레이아웃에서 대체 요소(replaced element)에 대한 기본
크기 산출 알고리즘을 따릅니다 [css-images-3].
특히, 참조 리소스에 내재 크기가 없는 경우(예: ‘iframe’ 또는 크기가 정의되지 않은 이미지 타입),
가로 300px, 세로 150px로 간주합니다.
CSS 포지셔닝 속성(예: top, margin)은 SVG 좌표계 내에서 임베디드 콘텐츠
요소의 위치에는 영향을 주지 않습니다.
하지만 ‘foreignObject’나 HTML 임베딩 요소의 자식 요소를
배치하는 데는 사용할 수 있습니다.
‘image’ 요소는 완전한 파일의 내용을
현재 사용자 좌표계 내의 지정된 사각형에 렌더링하도록 지정합니다. ‘image’ 요소는 PNG나 JPEG 같은 래스터 이미지 파일이나 MIME 타입이
"image/svg+xml"인 파일을 참조할 수 있습니다. 적합한 SVG 뷰어는 최소한 PNG, JPEG, SVG
포맷 파일을 지원해야 합니다.
SVG 파일은 현재 문서가 애니메이션을 지원할 경우 보안 애니메이션 모드로 처리되어야 하며,
문서가 정적일 경우 보안 정적 모드로 처리되어야 합니다.
‘image’ 요소를 처리한 결과는 항상
4채널 RGBA 결과입니다. ‘image’
요소가 3채널(RGB)만 가진 이미지(PNG, JPEG 등)를 참조하면,
오브젝트가 알파 채널이 1로 균일하게 설정된 4채널 RGBA 이미지로 변환된 것과 같은 효과를 냅니다. 단일 채널(그레이스케일) 래스터 이미지의 경우, 참조된 오브젝트의 단일 채널로 세 가지 색상
채널을 계산하고 알파 채널은 1로 균일하게 설정된 4채널 RGBA 이미지로 변환된 것과 같습니다.
예를 들어, 이미지 요소가 PNG 또는 JPEG을 참조하고 preserveAspectRatio="xMinYMin
meet"인 경우, 래스터의 비율이 유지됩니다(즉, 이미지 좌표에서 사용자 공간 좌표로의 스케일 팩터가 X와 Y 모두 동일함),
래스터는 뷰포트 내 전체가 들어가도록 가능한 크게 사이즈가 조정되고, 래스터의 좌상단이 뷰포트의 좌상단과
‘image’ 요소의 x, y, width, height 속성으로 정의된 값에 맞춰 정렬됩니다. 만약 ‘preserveAspectRatio’ 값이 'none'이라면 이미지의 비율은 유지되지 않습니다. 이미지는 래스터의 좌상단이 (x, y) 좌표와 정확히 맞게,
우하단이 (x+width, y+height) 좌표와 정확히 맞게 맞춰집니다.
이미지 참조는 항상 완전한 문서를 참조하므로,
target 전용 URL은 동일한 파일에 대한 링크로 처리되어,
독립적인 임베디드 이미지로 다시 렌더링됩니다.
임베디드 이미지는 보안 모드로 처리되기 때문에,
그 자체의 임베디드 참조는 처리되지 않아
무한 재귀를 방지합니다.
<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 50 30"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>재귀 SVG</title>
<desc>자기 자신을 두 번 재귀적으로 참조하는 이미지를 가진 SVG입니다.
하나의 참조는 파일명을 상대 URL로 사용하고,
다른 하나는 target 프래그먼트만 사용합니다.
외부 파일 참조를 지원하는 처리 모드에서 보면,
임베디드 이미지는 렌더링되어야 합니다;
하지만 임베디드 이미지는 보안 모드에서 처리되어야 하므로,
재귀는 한 번만 발생합니다.
결과적으로 세 개의 중첩된 빨간 원이 표적(bulls-eye) 패턴을 이루며,
가장 안쪽 원은 target 스타일 때문에 실색으로 표시됩니다.
</desc>
<style type="text/css">
#target:target {
fill: red;
}
</style>
<circle id="target"
stroke="red" stroke-width="5" fill="none"
cx="50%" cy="50%" r="12" />
<image xlink:href="recursive-image.svg"
x="25%" y="25%" width="50%" height="50%" />
<image xlink:href="#target"
x="45%" y="45%" width="10%" height="10%" />
</svg>
HTML 네임스페이스의 HTML 요소들이 SVG 문서 조각 내에서 'video', 'audio', 'iframe', 'canvas' 요소의 자식으로 사용될 때는
HTML에 정의된 대로 동작합니다. 특히 폴백 콘텐츠에
적용됩니다;
폴백 콘텐츠가 렌더링되는 경우,
임베디드 요소는 HTML 콘텐츠를 담기 위해 SVG ‘foreignObject’ 요소처럼 동작합니다.
예를 들어,
‘video’ 요소에서 사용자 에이전트가
지정된 비디오 포맷을 지원하지 않거나,
‘canvas’ 요소에서 스크립트가
비활성화된 경우에 해당합니다.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<html:video src="http://example.org/dummyvideo" controls="controls">
<html:p>이 브라우저는 해당 비디오 포맷을 지원하지 않습니다.</html:p>
</html:video>
</svg>
SVG는 다른 종류의 콘텐츠를 기술하고 렌더링하기 위한 XML 언어들과 호환되도록 설계되었습니다.
‘foreignObject’
요소는 SVG 네임스페이스가 아닌 요소를 포함하여,
SVG 그래픽의 특정 영역에서 다른 사용자 에이전트 프로세스를 통해 렌더링할 수 있도록 해줍니다.
포함된 외부 그래픽 콘텐츠는 SVG의 변형, 필터, 클리핑, 마스킹 및 합성의 영향을 받습니다.
예를 들어
MathML 수식을 SVG 도면에 삽입하거나 [MathML3],
복잡한 CSS로 포맷된 HTML 텍스트 블록 또는 폼 입력을 추가하는 것이 가능합니다.
HTML 파서는 ‘foreignObject’ 내부의 요소를
HTML 문서 조각 내부의 요소와 동일하게 처리합니다.
svg 또는 math 요소와 그 하위 요소들은 각각 SVG 또는 MathML 네임스페이스로 파싱됩니다;
그 외 모든 태그들은 HTML 네임스페이스로 파싱됩니다.
이 명세는 ‘requiredExtensions’
값이 다양한 XML 언어 지원과 어떻게 매핑되는지 정의하지 않습니다;
향후 명세에서 다룰 수 있습니다.
SVG 사용자 에이전트가 임의의 외부 사용자 에이전트를 호출해 임베디드 외부 객체 타입을 처리하는 기능을 반드시 지원할 필요는 없습니다;
하지만 모든 적합한 SVG 사용자 에이전트는 ‘switch’ 요소를 지원해야 하며,
‘switch’ 요소 내 대안 중 하나로
등장하는 유효한 SVG 요소를 렌더링할 수 있어야 합니다.
상업용 웹 브라우저들은 SVG에서
CSS로 포맷된 HTML 및 MathML 콘텐츠를 임베딩하는 기능을 지원할 것으로 기대되며,
렌더링된 콘텐츠는 SVG 조각에서 정의된 변형과 합성의 영향을 받습니다.
현 시점에서는 이러한 기능이 필수 요구 사항은 아닙니다.
<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
xmlns = 'http://www.w3.org/2000/svg'>
<desc>이 예제는 'switch' 요소를 사용하여 단락의 그래픽 대체 표현을 제공합니다. XMHTML이 지원되지 않을 경우.</desc>
<!-- 'switch' 요소는 테스트 속성이 true로 평가되는 첫 번째 자식 요소를 처리합니다.-->
<switch>
<!-- requiredExtensions 속성이 true로 평가되면(즉, 사용자 에이전트가 SVG 내에 XHTML 임베딩을 지원하면) 임베디드 XHTML을 처리합니다. -->
<foreignObject width="100" height="50"
requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
<!-- XHTML 콘텐츠가 여기에 들어갑니다 -->
<body xmlns="http://www.w3.org/1999/xhtml">
<p>여기에는 줄 바꿈이 필요한 단락이 있습니다</p>
</body>
</foreignObject>
<!-- 그렇지 않으면 다음 대체 SVG를 처리합니다.
'text' 요소에는 테스트 속성이 없습니다.
테스트 속성이 없으면, 테스트 속성이 있는 것처럼 true로 평가된다고 간주합니다.-->
<text font-size="10" font-family="Verdana">
<tspan x="10" y="10">여기에는 단락이 있습니다</tspan>
<tspan x="10" y="20">줄 바꿈이 필요합니다.</tspan>
</text>
</switch>
</svg>
