SVG 문서 내 요소는 CSS로 스타일링할 수 있습니다. 대부분의 시각적 특성과 일부 요소의 기하학적 속성은 CSS 프로퍼티로 제어됩니다. 예를 들어 fill 프로퍼티는 도형 내부를 채우는 페인트를 제어하고, width 및 height 프로퍼티는 ‘rect’ 요소의 크기를 제어하는 데 사용됩니다.
SVG 사용자 에이전트는 이 장에서 설명하는 모든 CSS 스타일링 메커니즘을 지원해야 합니다.
SVG 1.1에서는 ‘style’ 요소와 ‘style’을 사용한 인라인 스타일 시트 지원이 필수는 아니었습니다. SVG 2에서는 반드시 지원해야 합니다.
| SVG 2 요구사항: | HTML5 ‘style’ 요소 속성을 SVG의 ‘style’ 요소에 추가. |
|---|---|
| 결정: | SVG 2 ‘style’ 요소는 HTML5 ‘style’ 요소와 일치해야 한다. |
| 목적: | HTML과 SVG 콘텐츠에서 ‘style’ 요소의 동작이 달라 저자가 혼동하지 않게 하기 위함. |
| 담당자: | Cameron (ACTION-3277) |
‘style’ 요소는 스타일 시트를 SVG 콘텐츠에 직접 포함할 수 있습니다. SVG의 ‘style’ 요소는 HTML의 동일 요소와 동일한 속성을 가집니다.
속성 정의:
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| type | (아래 참조) | text/css | 아니오 |
이 속성은 요소 내용의 스타일 시트 언어를 미디어 타입으로 지정합니다. [rfc2046]. 속성을 지정하지 않으면 스타일 시트 언어는 CSS로 간주됩니다.
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| media | (아래 참조) | all | 아니오 |
이 속성은 스타일 시트가 적용되기 위해 반드시 일치해야 하는 미디어 쿼리를 지정합니다. 값은 media_query_list로 해석됩니다. 지정하지 않으면 스타일 시트는 무조건 적용됩니다.
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| title | (아래 참조) | (없음) | 아니오 |
이 속성은 스타일 시트의 제목을 지정하며, 대체 스타일 시트 노출 및 선택 시 사용됩니다. 값은 임의의 값을 가질 수 있습니다.
‘style’ 및 그 속성의 시맨틱과 처리 방식은 HTML ‘style’ 요소의 정의와 동일해야 합니다.
스타일 시트의 텍스트 내용은 직접적으로 렌더링되지 않습니다. ‘style’ 요소의 display 값은 사용자 에이전트 스타일 시트에서 항상 none으로 설정되어야 하며, 이 선언은 다른 CSS 규칙이나 표현 속성보다 우선해야 합니다.
SVG 문서에서 HTML ‘link’ 요소(즉, HTML 네임스페이스에 있고 로컬 이름이 "link"인 요소)가 ‘rel’ 속성이 'stylesheet'로 설정되어 있으면, HTML 명세에 정의된 대로 처리되어 외부 스타일 시트가 문서에 로드되고 적용되어야 합니다. HTML 문서에서 인라인 SVG 조각 외부에 있는 이러한 요소도 SVG 콘텐츠에 적용되어야 합니다.
이 요소가 반드시 HTML 네임스페이스에 있어야 하므로, HTML ‘link’ 요소가 text/html 문서의 인라인 SVG 조각의 일부로 파싱될 수 없습니다. 그러나 XML 문법으로 SVG 문서를 파싱할 때는 XML 네임스페이스 선언을 사용해 해당 요소를 HTML 네임스페이스로 지정할 수 있습니다.
외부 스타일 시트를 HTML ‘link’ 요소 대신 참조하는 다른 방법으로 인라인 스타일 시트에서 @import 규칙을 사용할 수 있습니다. 예시:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@import url(mystyles.css);
</style>
<rect .../>
</svg>
위 코드는 다음과 비슷하게 동작합니다:
<svg xmlns="http://www.w3.org/2000/svg"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/> <rect .../> </svg>
또한 XML 문서에서는 <?xml-stylesheet?> 처리 명령어를 사용해 외부 CSS 스타일 시트를 포함할 수 있습니다. [xml-stylesheet]
SVG ‘style’ 또는 HTML ‘style’ 요소가 HTML 문서에 사용될 때, 해당 스타일 시트는 문서 내 모든 HTML 및 인라인 SVG 콘텐츠에 적용되어야 합니다. 마찬가지로 SVG 문서에서 사용된 HTML ‘style’ 요소도 문서 전체에 스타일 시트를 적용해야 합니다.
HTML과 마찬가지로, SVG는 모든 요소에서 ‘class’ 및 ‘style’ 속성을 지원하여 요소별 스타일링을 할 수 있습니다.
속성 정의:
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| class | 공백으로 구분된 토큰 집합 [HTML] | (없음) | 예 |
‘class’ 속성은 하나 이상의 클래스 이름을 요소에 지정하며, 스타일링 언어에서 해당 클래스를 참조할 수 있습니다.
| 이름 | 값 | 초기값 | 애니메이션 가능 |
|---|---|---|---|
| style | (아래 참조) | (없음) | 아니오 |
‘style’ 속성은 요소에 대한 CSS 선언을 정의하는 데 사용됩니다. 이 속성은 declaration-list로 파싱됩니다.
‘class’ 속성이 SVG DOM에서 (className IDL 속성으로 SVGElement에서 반영되는 방식)을 제외하면, ‘class’ 및 ‘style’ 속성의 의미와 동작은 HTML의 해당 속성과 동일해야 합니다.
다음 예시에서는 ‘text’ 요소와 ‘class’ 속성을 함께 사용하여 문서 메시지를 마크업합니다. 메시지는 영어와 프랑스어 버전 모두에 나타납니다.
<!-- 영어 메시지 --> <text class="info" lang="en">변수가 두 번 선언됨</text> <text class="warning" lang="en">선언되지 않은 변수</text> <text class="error" lang="en">변수 이름의 문법 오류</text> <!-- 프랑스어 메시지 --> <text class="info" lang="fr">Variable déclarée deux fois</text> <text class="warning" lang="fr">Variable indéfinie</text> <text class="error" lang="fr">Erreur de syntaxe pour variable</text>
다음 CSS 스타일 규칙은 시각적 사용자 에이전트에게 정보 메시지는 녹색, 경고 메시지는 노란색, 오류 메시지는 빨간색으로 표시하도록 지시합니다:
text.info { fill: green; }
text.warning { fill: yellow; }
text.error { fill: red; }
이 예시에서는 ‘style’ 속성을 사용하여 ‘text’ 요소를 앞선 예시와 유사하게 스타일링하는 방법을 보여줍니다:
<text style="fill: green;" lang="en">변수가 두 번 선언됨</text> <text style="fill: yellow;" lang="en">선언되지 않은 변수</text> <text style="fill: red;" lang="en">변수 이름의 문법 오류</text>
일부 스타일링 프로퍼티는 스타일 시트나 ‘style’ 속성뿐만 아니라, 표현 속성에서도 지정할 수 있습니다. 표현 속성이란 이름이 특정 CSS 프로퍼티와 동일하거나 유사하며, 값이 해당 프로퍼티의 값으로 파싱되는 속성입니다. 표현 속성은 저자 단계의 cascade에 포함되어, 다른 모든 저자 단계 스타일 시트 다음에 적용되며, 특이성은 0입니다.
표현 속성은 CSS 선언이 아니라 CSS 값으로 파싱되므로, 표현 속성에 !important 선언이 들어가면 잘못된 값이 됩니다. 표현 속성이 어떻게 파싱되는지에 대한 자세한 내용은 속성 문법을 참고하세요.
SVG 렌더링에 영향을 줄 수 있는 모든 스타일 프로퍼티가 반드시 대응하는 표현 속성을 갖는 것은 아닙니다. 이름이 스타일 프로퍼티와 우연히 겹치는 다른 속성은 표현 속성으로 파싱되어서는 안 되며, CSS의 cascade나 상속에도 영향을 주어서는 안 됩니다. 또한 오직 SVG 네임스페이스 내 요소만 표현 속성을 지원합니다. 대부분의 SVG 표현 속성은 SVG 네임스페이스 내 기존 속성과 이름이 충돌하지 않는 모든 요소에 지정할 수 있습니다. 단, 기하학 프로퍼티는 지정된 요소에서만 표현 속성이 있습니다. 다른 요소의 동일 이름 속성은 CSS cascade나 상속에 영향을 주지 않습니다.
transform 표현 속성을 위한 표에 별도 설명이 있는 경우를 제외하면, 표현 속성의 이름은 프로퍼티 이름과 동일하며 소문자로 표기됩니다.
표현 속성은 SVG 네임스페이스 내 요소에서만 사용할 수 있으므로,
예를 들어 HTML video 요소는 그래픽 요소로 분류되지만,
표현 속성을 지원하지 않습니다.
‘cx’, ‘cy’, ‘r’, ‘x’, ‘y’, ‘width’, ‘height’ 속성이 항상 표현 속성인 것은 아닙니다. 예를 들어 ‘text’ 및 ‘tspan’의 ‘x’ 속성은 x 프로퍼티의 표현 속성이 아니며, ‘radialGradient’의 ‘r’ 속성도 r 프로퍼티의 표현 속성이 아닙니다.
앞으로 SVG 콘텐츠에 적용되는 새로운 프로퍼티에는 표현 속성이 추가되지 않을 것입니다. 따라서 저자들은 SVG 콘텐츠 스타일링 시 인라인 ‘style’ 속성이나 스타일 시트를 통해 스타일링 프로퍼티를 사용하는 것이 좋습니다.
표현 속성의 애니메이션은 해당 프로퍼티의 애니메이션과 동일합니다.
다음 프로퍼티는 모든 SVG 사용자 에이전트에서 지원되어야 합니다:
다음 사용자 에이전트 스타일 시트는 모든 SVG 사용자 에이전트에서 적용되어야 합니다.
@namespace url(http://www.w3.org/2000/svg);
@namespace xml url(http://www.w3.org/XML/1998/namespace);
svg:not(:root), image, marker, pattern, symbol { overflow: hidden; }
*:not(svg),
*:not(foreignObject) > svg {
transform-origin: 0 0;
}
*[xml|space=preserve] {
text-space-collapse: preserve-spaces;
}
defs,
clipPath, mask, marker,
desc, title, metadata,
pattern, linearGradient, radialGradient,
script, style,
symbol {
display: none !important;
}
:host(use) > symbol {
display: inline !important;
}
:link, :visited {
cursor: pointer;
}
이 외에도,
모든 인터랙티브 사용자 에이전트는
:focus 의사 클래스에 독특한 스타일을 적용해야 하며
(일반적으로 outline 프로퍼티 사용),
::selection 의사 요소에도 적용해야 합니다
(적절한 하이라이트 방법 사용, 예: 선택된 글리프를 반전 색상으로 다시 그리기).
사용자 에이전트 스타일 시트의 !important 규칙은
모든 사용자 및 저자 스타일을 덮어씁니다
[css-cascade-4].
절대 렌더링되지 않는 요소와
‘symbol’ 요소의 display 값은
따라서 변경할 수 없습니다.
symbol은 반드시 섀도우 루트의 직접 자식이고, 그 호스트가 ‘use’ 요소일 때만 렌더링되어야 하며
(그리고 호스트 ‘use’ 요소가 렌더링되면 항상
렌더링되어야 함),
다른 요소 및 그 자식 콘텐츠는 직접 렌더링되지 않습니다.
CSS Transforms에서는 transform-origin의 초기값이 50% 50%으로 정의되어 있습니다. 하지만 SVG의 요소는 기본적으로 (0, 0)에서 변환해야 하므로, transform-origin은 오버라이드되어 모든 SVG 요소에 대해 기본값이 0 0으로 설정됩니다 (단, 루트 ‘svg’ 요소와 ‘svg’ 요소가 ‘foreignObject’ 요소의 자식이거나 비-SVG 네임스페이스의 요소의 자식인 경우에는 해당 요소의 중심에서 변환해야 합니다). [css-transforms-1]
OpenType 명세에서는 추가 사용자 에이전트 스타일 시트를 적용할 것을 요구합니다 [OPENTYPE]. 다음과 같습니다:
@namespace svg url(http://www.w3.org/2000/svg);
svg|text, svg|foreignObject {
display: none !important;
}
:root {
fill: context-fill;
fill-opacity: context-fill-opacity;
stroke: context-stroke;
stroke-opacity: context-stroke-opacity;
stroke-width: context-value;
stroke-dasharray: context-value;
stroke-dashoffset: context-value;
}
context-fill 및 context-stroke 키워드는 이 명세에서 정의된 것이며, 폰트 글리프의 context element는 해당 텍스트 콘텐츠 요소가 됩니다. 나머지 키워드는 OpenType 명세에서 정의되며, 텍스트 콘텐츠 요소의 스타일 값을 폰트 글리프로 전달되도록 하고, 좌표계 변화에 맞게 적절하게 조정됩니다 [OPENTYPE].
위에서 설명한 기능 외에도, 다음 CSS 기능은 SVG 사용자 에이전트에서 반드시 지원되어야 합니다:
SVGStyleElement 객체는 DOM에서 ‘style’ 요소를 나타냅니다.
[Exposed=Window]
interface SVGStyleElement : SVGElement {
attribute DOMString type;
attribute DOMString media;
attribute DOMString title;
};
SVGStyleElement includes LinkStyle;
type, media, title IDL 속성은 각각 ‘type’, ‘media’, ‘title’ 콘텐츠 속성을 반영합니다.