4장: 기본 데이터 타입과 인터페이스

4.1. 정의

초기값

속성이나 프로퍼티의 초기값은 해당 속성 또는 프로퍼티가 명시되지 않았거나 잘못된 값이 지정됐을 때 사용되는 값입니다. 이 값은 렌더링, 애니메이션 값 계산, 그리고 DOM 인터페이스를 통해 속성이나 프로퍼티에 접근할 때 사용됩니다.

잘못된 값

스타일시트나 프레젠테이션 속성에서 프로퍼티에 지정된 잘못된 값이란, 해당 프로퍼티 값의 문법에 따라 허용되지 않거나, 문법상 허용되더라도 본문에서 추가로 금지된 값을 의미합니다. 잘못된 값이 포함된 CSS 선언은 무시됩니다. 자세한 내용은 Declarations and properties ([CSS2], section 4.1.8) 참고.

4.2. 속성 문법

4.2.1. 실수 정밀도

별도 명시가 없는 한, SVG 속성과 SVG 요소에 영향을 주는 프로퍼티의 숫자 값은 호스트 아키텍처에서 지원하는 모든 유한 단정밀도(single-precision) 값을 반드시 지원해야 합니다.

좌표계 변환 등 연산에서는 더 높은 정밀도의 부동소수점 저장 및 계산을 수행하여 최상의 정밀도를 제공하고 반올림 오류를 방지하는 것이 권장됩니다.

적합한 SVG 뷰어는 적합성 기준에 따라 수치 계산을 수행해야 합니다.

4.2.2. 특정 범위로 제한되는 값 클램핑

일부 숫자 속성 및 프로퍼티 값은 제한된 범위를 가집니다. 다른 값들은 장치의 제한에 의해 제한될 수 있습니다. 별도 명시가 없다면, 사용자 에이전트는 범위를 벗어난 오류 검사를 렌더링 과정에서 가능한 한 늦게까지 미뤄야 합니다. 이는 특히 장치 제한과 관련하여 중요하며, 복합 연산에서 중간값은 범위를 벗어날 수 있지만 최종값은 범위 내에 있을 수 있기 때문입니다.

4.3. SVG DOM 개요

스크립트 실행을 지원하는 SVG 뷰어 또는 SVG 인터프리터는 본 명세 전체에서 정의된 SVG DOM 인터페이스를 반드시 구현해야 하며, 구체적인 요구사항과 의존성은 본 절에 명시되어 있습니다.

4.3.1. SVG DOM 지원을 위한 의존성

SVG DOM은 Web IDL 인터페이스로 정의됩니다. 본 명세의 모든 IDL 조각은 적합한 IDL 조각으로 해석되어야 하며, 자세한 내용은 Web IDL 명세 참고 [WebIDL]

SVG DOM은 여러 DOM 명세를 기반으로 합니다. 특히:

• SVG DOM은 DOM 현행 표준의 최신 Review Draft에 정의된 모든 기능에 대한 완전한 지원을 요구하며, 이후 제거되거나 폐기된 기능은 제외합니다. DOM 지원 SVG 소프트웨어는 최신 DOM 표준을 가능한 한 구현해야 합니다 [DOM]
• SVG DOM은 UI 이벤트 및 클립보드 API 및 이벤트의 관련 기능을 지원해야 합니다([uievents], [clipboard-apis]). (필수 기능은 UI Events와의 관계 참고.)
• SVG DOM은 DOM Level 2 Style ([dom-level-2-style])의 모든 인터페이스를 완전히 지원해야 하며, CSS 객체 모델(CSSOM) 명세에서 제거되지 않은 인터페이스만 해당합니다. SVG 소프트웨어는 CSSOM 최신 버전을 가능한 한 구현해야 합니다 ([cssom-1])
• SVG DOM은 Geometry Interfaces Module Level 1 ([geometry-1])도 완전히 지원해야 합니다.

4.3.2. 명명 규칙

SVG DOM은 HTML 및 DOM 표준([HTML], [DOM])과 유사한 명명 규칙을 따릅니다.

모든 이름은 하나 이상의 영어 단어를 연결해 하나의 문자열로 정의됩니다. 프로퍼티나 메서드 이름은 첫 단어를 소문자로 시작하고, 이후 단어는 첫 글자가 대문자입니다. 예를 들어, 파일 생성 날짜 등 문서 메타 정보를 반환하는 프로퍼티는 "fileDateCreated" 형태입니다.

본 명세에서 정의된 인터페이스 이름은 거의 모두 "SVG"로 시작합니다. SVG 네임스페이스 요소의 DOM Element 객체를 나타내는 인터페이스는 SVGElementNameElement 형식을 따르며, ElementName은 요소 태그 이름의 첫 글자를 대문자로 표시합니다. 예를 들어 SVGRadialGradientElement는 ‘radialGradient’ 요소의 인터페이스입니다.

이 케이싱 규칙의 예외는 SVGSVGElement로, 태그 이름 전체가 대문자입니다.

4.3.3. SVG DOM 내 요소

SVG DOM을 지원해야 하는 모든 SVG 소프트웨어는 SVG 문서 프래그먼트에 대해 다음과 같이 DOM 요소를 확장해야 합니다:

• 지원하는 SVG 요소(즉, 네임스페이스 URI가 "http://www.w3.org/2000/svg"이고, 로컬 이름이 본 명세 또는 소프트웨어가 구현하는 다른 명세에서 정의된 요소 중 하나인 요소)에 해당하는 Element 객체는 반드시 해당 요소 정의에서 지정한 DOM 인터페이스도 구현해야 합니다.

• SVG 네임스페이스 내에서 로컬 이름이 소프트웨어가 지원하는 명세에 정의된 요소와 일치하지 않는 요소는 SVGUnknownElement 인터페이스를 구현해야 하며, 반드시 SVGElement 인터페이스도 구현해야 합니다.

SVGUnknownElement 인터페이스는 "위험군"입니다.

‘rect’ 요소에서 SVGRectElement 인터페이스가 지정됩니다. 즉, 네임스페이스 URI가 "http://www.w3.org/2000/svg"이고 로컬 이름이 "rect"인 Element 객체는 반드시 SVGRectElement도 구현해야 합니다.

4.3.4. DOM에서 콘텐츠 속성 반영

SVG DOM 프로퍼티(IDL 속성) 중 다수는 해당 요소의 콘텐츠 속성 또는 프로퍼티를 반영합니다. 즉, 콘텐츠 속성과 IDL 속성이 동일한 기본 데이터를 나타냅니다. 예를 들어, SVGAnimatedLength ry는 SVGRectElement에서 해당 ‘rect’ 요소의 ry 프레젠테이션 속성을 반영합니다.

이 반영 방식은 IDL 속성의 타입에 따라 다릅니다:

• 반영하는 IDL 속성 타입이 원시 타입(예: long, tabIndex에서 사용)이나 DOMString(title에서 사용)인 경우, HTML에서 IDL 속성에 콘텐츠 속성 반영하는 규칙을 따릅니다.
• 반영하는 IDL 속성 타입이 SVGAnimatedBoolean, SVGAnimatedString, SVGAnimatedEnumeration, SVGAnimatedNumber, SVGAnimatedNumberList, SVGAnimatedLength, SVGAnimatedLengthList, SVGAnimatedAngle, SVGAnimatedRect 또는 SVGAnimatedPreserveAspectRatio인 경우, 해당 반영 인터페이스를 정의하는 절의 규칙을 따릅니다.

  상위 수준에서, 객체의 baseVal을 콘텐츠 속성 값 반영에 사용합니다. CSS 프로퍼티를 반영하는 객체의 경우 baseVal은 프레젠테이션 속성 반영에 사용됩니다.

이 관계는 실시간(live)이므로, 속성 또는 반영 프로퍼티가 수정될 때마다 값이 반드시 동기화되어야 하며(자세한 규칙은 반영 값 동기화 참고), 어느 한쪽을 수정할 때 반영되어야 합니다.

속성이 문서 마크업에서 명시적으로 지정되지 않더라도, 해당 속성에 접근하면 반영 객체가 반드시 초기값으로 초기화됩니다. 만약 속성의 초기값이 (없음)이라면, 비어있는 초기값 반영에서 정의된 대로 객체가 초기화됩니다. 새로 생성된 객체는 최초로 수정되기 전까지 요소에 속성으로 추가되지 않습니다. 대응 속성의 수정을 즉시 객체에 반영합니다.

예를 들어 lineElement.x1.baseVal에 접근하면 (lineElement는 SVGLineElement 인스턴스) ‘x1’ 속성이 문서에서 명시되지 않았다면, 반환된 SVGLength 객체는 0 사용자 단위 값을 나타내며, 해당 속성의 초기값이 0이기 때문입니다.

4.3.5. 반영 값 동기화

반영되는 콘텐츠 속성의 기본값이 변경될 때마다, 반영 객체는 값 변경 직후 아래 절차를 따라 동기화되어야 합니다:

1. 반영 객체가 리스트 인터페이스 객체라면, 리스트 인터페이스 객체 동기화 절차를 수행합니다.
2. 그 외의 경우, 객체의 값을 반영되는 콘텐츠 속성의 기본값(속성이 존재하지 않거나 잘못된 값이면 초기값 사용)으로 갱신합니다.

   예를 들어, value가 SVGLength 객체의 값을 갱신합니다.

반영된 콘텐츠 속성을 재직렬화할 때(특정 값을 사용할 수도 있음), 아래 절차를 수행해야 합니다:

1. value를 주어진 특정 값, 또는 특정 값이 없을 경우 콘텐츠 속성의 반영 IDL 속성값으로 설정합니다.
2. value의 타입에 따라:

   SVGAnimatedBoolean

   SVGAnimatedNumber

   SVGAnimatedLength

   SVGAnimatedAngle

   SVGAnimatedRect

   SVGAnimatedString

   SVGAnimatedNumberList

   SVGAnimatedLengthList

   SVGAnimatedTransformList

   콘텐츠 속성을 value의 baseVal 멤버로 재직렬화합니다.

   SVGAnimatedEnumeration

   1. number에 value의 baseVal 멤버 값을 설정합니다.
   2. keyword에 number에 해당하는 콘텐츠 속성의 키워드 값(0이면 빈 문자열)을 설정합니다.

      열거값이 "unknown" 값이면, 콘텐츠 속성은 빈 문자열로 설정됩니다.

   3. 콘텐츠 속성에 keyword를 설정합니다.

   boolean

   콘텐츠 속성을 value가 true이면 "true"로, 아니면 "false"로 설정합니다.

   float

   double

   콘텐츠 속성을, CSS 문법으로 <number>로 파싱했을 때 value와 가장 가까운 숫자값을 반환할 구현별 문자열로 설정합니다(구현의 실수 정밀도를 감안).

   SVGLength

   콘텐츠 속성을 value의 valueAsString 멤버 값으로 설정합니다.

   SVGAngle

   콘텐츠 속성을 value의 valueAsString 멤버 값으로 설정합니다.

   DOMRect

   1. components에 value의 x, y, width, height 멤버 값 4개를 리스트로 설정합니다.
   2. serialized components에 각 값이 CSS 문법 <number>로 파싱시 해당 값과 가장 가까운 숫자값을 반환할 구현별 문자열로 변환한 4개 문자열 리스트를 설정합니다(구현의 실수 정밀도 반영).
   3. 콘텐츠 속성에 serialized components 리스트의 문자열들을 공백(U+0020 SPACE)으로 연결한 문자열을 설정합니다.

   DOMString

   콘텐츠 속성을 value로 설정합니다.

   SVGNumberList

   SVGLengthList

   SVGPointList

   SVGTransformList

   SVGStringList

   1. elements에 value의 값 리스트를 설정합니다.

      값은 SVGNumber, SVGLength, DOMPoint, SVGTransform 객체, 또는 DOMString 값입니다. value의 타입에 따라 결정됩니다.

   2. serialized elements에 각 값의 타입에 따라 다음 방식으로 문자열을 생성한 리스트를 설정합니다:

      SVGNumber 객체

      해당 객체의 value 멤버를 CSS 문법 <number>로 파싱 시 가장 가까운 숫자값을 반환할 구현별 문자열로 변환.

      SVGLength 객체

      값의 valueAsString 멤버 값을 문자열로 변환.

      DOMPoint 객체

      다음 절차로 문자열 값 생성:

      1. string을 빈 문자열로 초기화.
      2. x, y에 객체의 x, y 좌표 값 설정.
      3. x를 CSS 문법 <number>로 파싱 시 해당 값과 가장 가까운 숫자값을 반환할 구현별 문자열로 변환해 string에 추가.
      4. string에 콤마(U+002C) 추가.
      5. y를 CSS 문법 <number>로 파싱 시 해당 값과 가장 가까운 숫자값을 반환할 구현별 문자열로 변환해 string에 추가.
      6. 해당 문자열이 string임.

      SVGTransform 객체

      변환 함수 직렬화 규칙에 따라 SVGTransform 객체의 matrix object를 직렬화한 문자열.

      DOMString

      DOMString의 값 자체를 문자열로 사용.

   3. 콘텐츠 속성을 serialized elements 리스트의 문자열들을 공백(U+0020 SPACE)으로 연결한 문자열로 설정합니다.

4.3.6. 비어있는 초기값 반영

null 또는 비어있는 초기값을 반영하는 SVG DOM 속성 초기화 시, 해당 프로퍼티는 본 절에서 정의된 데이터 타입에 따라 초기화되어야 합니다. 이는 반영되는 콘텐츠 속성에 명시적 값이 없고, 속성 정의 테이블의 초기값이 (없음)일 때에만 발생합니다.

아래에 명시되지 않은 인터페이스는, 해당 인터페이스가 포함하는 객체의 값을 사용해 초기화해야 합니다. 예를 들어, SVGAnimatedString은 두 개의 DOMString 멤버로 구성되고, DOMRect는 여러 double로 구성됩니다.

DOMString

빈 문자열("")로 초기화.

float

long

short

WebIDL에서 정의된 기타 숫자 타입

0으로 초기화.

boolean

false로 초기화.

SVGLength

0 사용자 단위(SVG_LENGTHTYPE_NUMBER)로 초기화.

SVGLengthList

SVGNumberList

SVGPointList

SVGStringList

SVGTransformList

빈 리스트로 초기화.

SVGAngle

0(단위 미지정)(SVG_ANGLETYPE_UNSPECIFIED)로 초기화.

SVGZoomAndPan

0(SVG_ZOOMANDPAN_UNKNOWN)로 초기화.

SVGPreserveAspectRatio

'xMidYMid meet'로 초기화.

만약 textElement.dx.baseVal에 접근하면 (textElement는 SVGTextElement 인스턴스) ‘dx’ 속성이 문서에서 명시되지 않았다면, 반환된 SVGLengthList 객체는 빈 리스트가 됩니다.

4.3.7. 잘못된 값

스크립트가 반영된 DOM 속성에 대해 콘텐츠 속성에 잘못된 값을 설정하면(예: 음수가 필요한 속성에 음수, 열거형에 범위 밖 값 등), 본 명세에서 별도 명시하지 않는 한, 설정 시 예외를 발생시키지 않으며, 해당 문서 프래그먼트는 오류 처리에 따라 기술적으로 오류 상태가 됩니다.

현재 많은 브라우저가 범위를 벗어난 열거형 값이나 열거형을 UNKNOWN 값으로 명시적으로 설정할 경우 오류를 발생시킵니다. 토론은 Should setting an enum IDL to an invalid value throw an error?의 GitHub 이슈 참고.

4.4. SVG 요소를 위한 DOM 인터페이스

[Exposed=Window]
interface SVGElement : Element {

  [SameObject] readonly attribute SVGAnimatedString className;

  readonly attribute SVGSVGElement? ownerSVGElement;
  readonly attribute SVGElement? viewportElement;
};

SVGElement includes GlobalEventHandlers;
SVGElement includes DocumentAndElementEventHandlers;
SVGElement includes SVGElementInstance;
SVGElement includes HTMLOrSVGElement;

dictionary SVGBoundingBoxOptions {
  boolean fill = true;
  boolean stroke = false;
  boolean markers = false;
  boolean clipped = false;
};

interface SVGGraphicsElement : SVGElement {
  [SameObject] readonly attribute SVGAnimatedTransformList transform;

  DOMRect getBBox(optional SVGBoundingBoxOptions options);
  DOMMatrix? getCTM();
  DOMMatrix? getScreenCTM();
};

SVGGraphicsElement includes SVGTests;

[Exposed=Window]
interface SVGGeometryElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedNumber pathLength;

  boolean isPointInFill(optional DOMPointInit point);
  boolean isPointInStroke(optional DOMPointInit point);
  float getTotalLength();
  DOMPoint getPointAtLength(float distance);
};

4.5. 기본 데이터 타입을 위한 DOM 인터페이스

4.5.1. SVGNumber 인터페이스

SVGNumber 인터페이스는 주로 <숫자> 값을 SVGNumberList의 일부로 표현하는 데 사용됩니다. 개별 SVGNumber 객체는 스크립트로 생성할 수도 있습니다.

SVGNumber 객체는 읽기 전용으로 지정될 수 있으며, 이 경우 객체를 수정하려 하면 아래와 같이 예외가 발생합니다. animVal IDL 속성을 통해 반영되는 SVGNumber 객체는 항상 읽기 전용입니다.

SVGNumber 객체는 특정 요소와 연관될 수 있습니다. 연관된 요소는 객체가 반영 속성일 때 어느 요소의 콘텐츠 속성을 갱신할지 결정하는 데 사용됩니다. 별도 설명이 없는 한, SVGNumber 객체는 어떤 요소와도 연관되지 않습니다.

SVGNumber 객체는 내부적으로 숫자 값을 유지합니다. 이를 value라고 합니다.

[Exposed=Window]
interface SVGNumber {
  attribute float value;
};

value IDL 속성은 숫자를 나타냅니다. value를 가져오면 SVGNumber의 value가 반환됩니다.

value를 설정하면 다음 절차가 실행됩니다:

1. SVGNumber가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. SVGNumber의 value를 할당된 값으로 설정합니다.
3. SVGNumber가 반영된 base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

4.5.2. SVGLength 인터페이스

SVGLength 인터페이스는 <길이>, <퍼센트> 또는 <숫자> 값으로 표현될 수 있는 값을 나타냅니다.

SVGLength 객체는 읽기 전용으로 지정될 수 있으며, 이 경우 객체를 수정하려 하면 아래와 같이 예외가 발생합니다. animVal IDL 속성을 통해 반영되는 SVGLength 객체는 항상 읽기 전용입니다.

SVGLength 객체는 특정 요소와 연관될 수 있으며, 방향성(수평, 수직, 미지정)도 가질 수 있습니다. 연관 요소와 방향성은 퍼센트 값을 사용자 단위로 변환하거나, 객체가 반영 속성일 때 어느 요소의 콘텐츠 속성을 갱신할지 결정하는 데 사용됩니다. 별도 설명이 없는 한, SVGLength 객체는 어떤 요소와도 연관되지 않고, 방향성도 미지정입니다.

SVGLength 객체는 내부적으로 <길이> 또는 <퍼센트> 또는 <숫자> 값을 유지합니다. 이를 value라고 합니다.

[Exposed=Window]
interface SVGLength {

  // 길이 단위 타입 상수
  const unsigned short SVG_LENGTHTYPE_UNKNOWN = 0;
  const unsigned short SVG_LENGTHTYPE_NUMBER = 1;
  const unsigned short SVG_LENGTHTYPE_PERCENTAGE = 2;
  const unsigned short SVG_LENGTHTYPE_EMS = 3;
  const unsigned short SVG_LENGTHTYPE_EXS = 4;
  const unsigned short SVG_LENGTHTYPE_PX = 5;
  const unsigned short SVG_LENGTHTYPE_CM = 6;
  const unsigned short SVG_LENGTHTYPE_MM = 7;
  const unsigned short SVG_LENGTHTYPE_IN = 8;
  const unsigned short SVG_LENGTHTYPE_PT = 9;
  const unsigned short SVG_LENGTHTYPE_PC = 10;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  void convertToSpecifiedUnits(unsigned short unitType);
};

SVGLength에 정의된 숫자형 길이 단위 타입 상수는 SVGLength의 value 타입을 나타냅니다. 각 의미는 다음과 같습니다:

숫자형 길이 단위 타입 상수 사용은 안티패턴이며, SVGLength에서 지원하는 다른 단위나 길이 타입을 위한 새 상수 값은 도입되지 않습니다. 만약 다른 타입의 길이가 지원된다면, SVGLength는 SVG_LENGTHTYPE_UNKNOWN 단위 타입을 사용합니다. 기타 길이 타입에서 SVGLength의 다른 속성이 동작하는 방식은 아래 참고.

unitType IDL 속성은 SVGLength의 value 타입을 나타냅니다. unitType을 가져오면 다음 절차가 실행됩니다:

1. SVGLength의 value가 단위 없는 <숫자>, <퍼센트>, 또는 <길이>에서 em, ex, px, cm, mm, in, pt, pc 단위를 가지면, 위 길이 단위 타입 테이블의 해당 상수 값을 반환합니다.
2. 그 외에는 SVG_LENGTHTYPE_UNKNOWN을 반환합니다.

   예를 들어, ch 단위의 <길이>나 calc() 등 비스칼라 값의 경우 SVG_LENGTHTYPE_UNKNOWN이 반환됩니다.

value IDL 속성은 SVGLength의 value를 사용자 단위로 나타냅니다. value를 가져오면 다음 절차가 실행됩니다:

1. value에 SVGLength의 value를 설정.
2. value가 <숫자>면 그 숫자를 반환.
3. viewport size를 퍼센트 변환 기준으로 설정. 이는 SVGLength의 연관 요소 및 방향성에 따라 달라집니다:

   연관 요소 없음

   size는 100임

   연관 요소 있음 + 수평 방향성

   size는 연관 요소의 SVG 뷰포트 너비

   연관 요소 있음 + 수직 방향성

   size는 연관 요소의 SVG 뷰포트 높이

   연관 요소 있음 + 미지정 방향성

   size는 연관 요소의 SVG 뷰포트 대각선 길이(Units 참고)

4. font size를 폰트 크기 변환 기준으로 설정. 이는 SVGLength의 연관 요소에 따라 달라집니다:

   연관 요소 없음

   font size는 font-size 프로퍼티의 초기값의 절대 길이

   연관 요소 있음

   size는 연관 요소의 font-size 프로퍼티의 계산값

5. value를 viewport size, font size를 기준으로 절대 길이로 변환한 결과를 반환합니다. 연관 요소가 없어 변환이 불가하면 0 반환.

value를 설정하면 다음 절차가 실행됩니다:

1. SVGLength 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. SVGLength의 value를 value 값의 <숫자>로 설정.
4. SVGLength가 base value를 반영, 프레젠테이션 속성을 반영, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

valueInSpecifiedUnits IDL 속성은 SVGLength의 value의 숫자 계수를 나타냅니다. valueInSpecifiedUnits를 가져오면 다음 절차가 실행됩니다:

1. value에 SVGLength의 value를 설정.
2. value가 <숫자>면 그 숫자를 반환.
3. 그 외, value가 <퍼센트> 또는 스칼라 <길이> 값이면, 단위 앞의 숫자 계수를 반환.
4. 그 외에는 0 반환.

   따라서 valueInSpecifiedUnits는 '12%'와 12em 모두 12를 반환하지만, calc(12px + 5%) 같은 비스칼라 값에는 0을 반환합니다.

valueInSpecifiedUnits를 설정하면 다음 절차가 실행됩니다:

1. SVGLength 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. SVGLength의 value가 <숫자>면 해당 값으로 갱신.
4. 그 외, SVGLength의 value가 <퍼센트>나 스칼라 값 <길이>면 숫자 계수를 value로 갱신.
5. 그 외에는 SVGLength의 value를 <숫자>로 설정(값은 value).
6. SVGLength가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

valueAsString IDL 속성은 SVGLength의 value를 문자열로 나타냅니다. valueAsString을 가져오면 다음 절차가 실행됩니다:

1. value에 SVGLength의 value를 설정.
2. string을 빈 문자열로 초기화.
3. value가 <숫자>, <퍼센트> 또는 스칼라 <길이> 값이면:
   1. factor에 value의 숫자 계수(<퍼센트>나 <길이>일 때), 또는 <숫자>일 때 value 자체를 할당.
   2. string에 구현별 CSS 문법 <숫자>로 파싱 시 factor에 가장 가까운 값이 되는 문자열을 추가(구현의 실수 정밀도 반영).
   3. value가 <퍼센트>면 string에 U+0025(%) 추가.
   4. 그 외, value가 <길이>면 string에 단위의 표준 문자열 추가.
   5. string 반환.
4. 그 외에는, 구현별 CSS 문법 <길이>로 파싱 시 value에 가장 가까운 길이 값이 되는 문자열 반환(구현의 실수 정밀도 반영).

valueAsString을 설정하면 다음 절차가 실행됩니다:

1. SVGLength 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. value를 CSS 문법 [ <숫자> | <길이> | <퍼센트> ]로 파싱.
4. 파싱 실패 시 예외 발생 SyntaxError.
5. 파싱 성공 시, SVGLength의 value를 파싱 결과로 갱신.
6. SVGLength가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

newValueSpecifiedUnits 메서드는 SVGLength의 값을 타입별로 설정하는 데 사용됩니다. newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 호출 시, 다음 절차를 실행합니다:

1. SVGLength 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. unitType이 SVG_LENGTHTYPE_UNKNOWN이거나 위 길이 단위 타입 테이블에 없는 값이면, 예외 발생 NotSupportedError.
3. SVGLength의 value를 unitType에 따라 설정:

   SVG_LENGTHTYPE_NUMBER

   valueInSpecifiedUnits 값을 가지는 <숫자>

   SVG_LENGTHTYPE_PERCENTAGE

   숫자 계수가 valueInSpecifiedUnits인 <퍼센트>

   그 외

   숫자 계수가 valueInSpecifiedUnits이고 단위는 위 테이블에 따라 결정되는 <길이>

4. SVGLength가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

convertToSpecifiedUnits 메서드는 SVGLength의 값을 특정 타입으로 변환하는 데 사용됩니다. convertToSpecifiedUnits(unitType) 호출 시, 다음 절차를 실행합니다:

1. SVGLength 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. unitType이 SVG_LENGTHTYPE_UNKNOWN이거나 위 길이 단위 타입 테이블에 없는 값이면, 예외 발생 NotSupportedError.
3. absolute에 value 멤버 반환값을 설정.
4. unitType이 SVG_LENGTHTYPE_NUMBER이면:
   1. SVGLength의 value를 absolute 값을 가지는 <숫자>로 설정.
5. 그 외, unitType이 SVG_LENGTHTYPE_PERCENTAGE이면:
   1. viewport size를 퍼센트 변환 기준으로 설정. 이는 SVGLength의 연관 요소 및 방향성에 따라 달라집니다:

      연관 요소 없음

      size는 100임

      연관 요소 있음 + 수평 방향성

      size는 연관 요소의 SVG 뷰포트 너비

      연관 요소 있음 + 수직 방향성

      size는 연관 요소의 SVG 뷰포트 높이

      연관 요소 있음 + 미지정 방향성

      size는 연관 요소의 SVG 뷰포트 대각선 길이(Units 참고)

   2. SVGLength의 value를 absolute를 viewport size 기준으로 <퍼센트>로 변환한 값으로 설정.
6. 그 외, unitType이 SVG_LENGTHTYPE_EMS 또는 SVG_LENGTHTYPE_EXS이면:
   1. font size를 폰트 크기 변환 기준으로 설정. 이는 SVGLength의 연관 요소에 따라 달라집니다:

      연관 요소 없음

      font size는 font-size 프로퍼티의 초기값의 절대 길이

      연관 요소 있음

      size는 연관 요소의 font-size 프로퍼티의 계산값

   2. SVGLength의 value를 absolute를 font size 기준으로 em 또는 ex 단위 <길이>로 변환한 값으로 설정.
7. 그 외:
   1. SVGLength의 value를 absolute를 위 테이블에서 unitType에 해당하는 단위로 변환한 <길이> 값으로 설정.
8. SVGLength가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

4.5.3. SVGAngle 인터페이스

SVGAngle 인터페이스는 <각도> 또는 <숫자> 값으로 표현될 수 있는 값을 나타냅니다.

SVGAngle 객체는 읽기 전용으로 지정될 수 있으며, 이 경우 객체를 수정하려 하면 아래와 같이 예외가 발생합니다. animVal 속성으로 반영되는 SVGAngle 객체는 항상 읽기 전용입니다.

SVGAngle 객체는 특정 요소와 연관될 수 있습니다. 연관된 요소는 객체가 반영 속성일 때 어느 요소의 콘텐츠 속성을 갱신할지 결정하는 데 사용됩니다. 별도 설명이 없는 한, SVGAngle 객체는 어떤 요소와도 연관되지 않습니다.

SVGAngle 객체는 내부적으로 <각도> 또는 <숫자> 값을 유지합니다. 이를 value라고 합니다.

[Exposed=Window]
interface SVGAngle {

  // 각도 단위 타입 상수
  const unsigned short SVG_ANGLETYPE_UNKNOWN = 0;
  const unsigned short SVG_ANGLETYPE_UNSPECIFIED = 1;
  const unsigned short SVG_ANGLETYPE_DEG = 2;
  const unsigned short SVG_ANGLETYPE_RAD = 3;
  const unsigned short SVG_ANGLETYPE_GRAD = 4;

  readonly attribute unsigned short unitType;
           attribute float value;
           attribute float valueInSpecifiedUnits;
           attribute DOMString valueAsString;

  void newValueSpecifiedUnits(unsigned short unitType, float valueInSpecifiedUnits);
  void convertToSpecifiedUnits(unsigned short unitType);
};

SVGAngle에 정의된 숫자형 각도 단위 타입 상수는 SVGAngle의 value 타입을 나타냅니다. 각 의미는 다음과 같습니다:

숫자형 각도 단위 타입 상수 사용은 안티패턴이며, SVGAngle에서 지원하는 다른 단위나 각도 타입을 위한 새 상수 값은 도입되지 않습니다. 만약 다른 타입의 각도가 지원된다면, SVGAngle는 SVG_ANGLETYPE_UNKNOWN 단위 타입을 사용합니다. 기타 각도 타입에서 SVGAngle의 다른 속성이 동작하는 방식은 아래 참고.

unitType IDL 속성은 SVGAngle의 value 타입을 나타냅니다. unitType을 가져오면 다음 절차가 실행됩니다:

1. SVGAngle의 value가 단위 없는 <숫자>거나, deg, rad, grad 단위의 <길이>일 경우, 위 각도 단위 타입 테이블의 해당 상수 값을 반환합니다.
2. 그 외에는 SVG_ANGLETYPE_UNKNOWN을 반환합니다.

   예를 들어, turn 단위의 <각도>인 경우 SVG_ANGLETYPE_UNKNOWN이 반환됩니다.

value IDL 속성은 SVGAngle의 value를 도(degree) 단위로 나타냅니다. value를 가져오면 다음 절차가 실행됩니다:

1. value에 SVGAngle의 value를 설정.
2. value가 <숫자>면 그 숫자를 반환.
3. value를 도(degree) 단위의 각도로 변환한 결과를 반환.

value를 설정하면 다음 절차가 실행됩니다:

1. SVGAngle 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. SVGAngle의 value를 value 값을 가지는 <숫자>로 설정.
4. SVGAngle가 base value를 반영하는 경우, 속성을 재직렬화합니다.

valueInSpecifiedUnits IDL 속성은 SVGAngle의 value의 숫자 계수를 나타냅니다. valueInSpecifiedUnits를 가져오면 다음 절차가 실행됩니다:

1. value에 SVGAngle의 value를 설정.
2. value가 <숫자>면 그 숫자를 반환.
3. 그 외에는 value가 <각도> 값이므로, 단위 앞의 숫자 계수를 반환.

valueInSpecifiedUnits를 설정하면 다음 절차가 실행됩니다:

1. SVGAngle 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. SVGAngle의 value가 <숫자>면 해당 값으로 갱신.
4. 그 외, SVGAngle의 value가 <각도>면 숫자 계수를 value로 갱신.
5. SVGAngle가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

valueAsString IDL 속성은 SVGAngle의 value를 문자열로 나타냅니다. valueAsString을 가져오면 다음 절차가 실행됩니다:

1. value에 SVGAngle의 value를 설정.
2. string을 빈 문자열로 초기화.
3. factor에 value가 <각도>일 경우 숫자 계수, <숫자>일 경우 value 자체를 설정.
4. string에 구현별 CSS 문법 <숫자>로 파싱 시 factor에 가장 가까운 값이 되는 문자열을 추가(구현의 실수 정밀도 반영).
5. value가 <각도>면 string에 단위의 표준 문자열 추가.
6. string 반환.

valueAsString을 설정하면 다음 절차가 실행됩니다:

1. SVGAngle 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. value에 할당할 값을 설정.
3. value를 CSS 문법 [ <숫자> | <각도> ]로 파싱.
4. 파싱 실패 시 예외 발생 SyntaxError.
5. 파싱 성공 시, SVGAngle의 value를 파싱 결과로 갱신.
6. SVGAngle가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

newValueSpecifiedUnits 메서드는 SVGAngle의 값을 타입별로 설정하는 데 사용됩니다. newValueSpecifiedUnits(unitType, valueInSpecifiedUnits) 호출 시, 다음 절차를 실행합니다:

1. SVGAngle 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. unitType이 SVG_ANGLETYPE_UNKNOWN이거나 위 각도 단위 타입 테이블에 없는 값이면, 예외 발생 NotSupportedError.
3. SVGAngle의 value를 unitType에 따라 설정:

   SVG_ANGLETYPE_UNSPECIFIED

   valueInSpecifiedUnits 값을 가지는 <숫자>

   그 외

   숫자 계수가 valueInSpecifiedUnits이고 단위는 위 테이블에 따라 결정되는 <각도>

4. SVGAngle가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

convertToSpecifiedUnits 메서드는 SVGAngle의 값을 특정 타입으로 변환하는 데 사용됩니다. convertToSpecifiedUnits(unitType) 호출 시, 다음 절차를 실행합니다:

1. SVGAngle 객체가 읽기 전용이면, 예외 발생 NoModificationAllowedError.
2. unitType이 SVG_ANGLETYPE_UNKNOWN이거나 위 각도 단위 타입 테이블에 없는 값이면, 예외 발생 NotSupportedError.
3. degrees에 value 멤버 반환값을 설정.
4. unitType이 SVG_ANGLETYPE_UNSPECIFIED이면:
   1. SVGAngle의 value를 degrees 값을 가지는 <숫자>로 설정.
5. 그 외:
   1. SVGAngle의 value를 degrees를 위 테이블에서 unitType에 해당하는 단위로 변환한 <각도> 값으로 설정.
6. SVGAngle가 base value를 반영하거나, base value의 요소를 반영하는 경우, 속성을 재직렬화합니다.

4.5.4. 리스트 인터페이스

일부 SVG 속성은 값의 리스트를 포함하며, 이러한 값을 표현하기 위해 여러 SVG DOM 리스트 인터페이스가 있습니다. 각 필요한 요소 타입별로 하나씩 있으며 – SVGNumberList, SVGLengthList, SVGPointList, SVGTransformList, SVGStringList가 있습니다. 처음 네 가지는 SVGAnimatedNumberList, SVGAnimatedLengthList, SVGAnimatedPoints 및 SVGTransformList 객체의 base/애니메이션 성분을 표현하는 데 사용되고, 다섯 번째 SVGStringList는 문자열 리스트를 받는 몇몇 애니메이션되지 않는 속성을 반영하는 데 사용됩니다.

대부분의 리스트 인터페이스는 아래와 같은 형식을 취합니다:

interface SVGNameList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  Type initialize(Type newItem);
  getter Type getItem(unsigned long index);
  Type insertItemBefore(Type newItem, unsigned long index);
  Type replaceItem(Type newItem, unsigned long index);
  Type removeItem(unsigned long index);
  Type appendItem(Type newItem);
  setter void (unsigned long index, Type newItem);
};

여기서 Name은 리스트 요소의 설명적 이름("Number", "Length", "Point", "Transform", "String")이고 Type은 리스트 요소의 IDL 타입(SVGNumber, SVGLength, DOMPoint, SVGTransform, DOMString)입니다.

SVGTransformList 인터페이스는 위 형식을 따르지만 두 개의 추가 메서드가 있습니다.

모든 리스트 인터페이스 객체(SVGTransformList 제외)는 반영된 콘텐츠 속성의 base value를 반영합니다. SVGTransformList 객체는 프레젠테이션 속성(‘transform’, ‘gradientTransform’, ‘patternTransform’)을 반영합니다. 모든 리스트 인터페이스 객체는 특정 요소와 연관되어 있습니다. SVGLength 등과 달리 "분리된" 리스트 인터페이스 객체는 없습니다.

리스트 인터페이스 객체는 내부적으로 요소 리스트를 유지하며, 아래에서는 단순히 "리스트"라 칭합니다. IDL 속성과 메서드를 통해 리스트의 요소를 조회 및 조작할 수 있습니다. 리스트는 반영된 콘텐츠 속성의 변경이나 애니메이션(혹은 SVGTransformList 객체의 경우 transform 프로퍼티의 계산값 변경)에 따라 역시 변경될 수 있습니다.

리스트 인터페이스 객체는 읽기 전용으로 지정될 수 있으며, 이 경우 객체를 수정하려 하면 아래와 같이 예외가 발생합니다. animVal IDL 속성으로 반영되는 리스트 인터페이스 객체는 항상 읽기 전용입니다.

리스트 인터페이스 객체는 다음 절차로 동기화됩니다:

1. value에 반영된 콘텐츠 속성의 base value를 설정(속성이 존재하지 않거나 잘못된 값이면 초기값 사용).
2. length에 리스트의 항목 개수 설정.
3. new length에 value의 값 개수 설정. value가 none 키워드이면(transform 프로퍼티에서 지원), new length는 0.
4. 리스트 요소 타입이 SVGNumber, SVGLength, DOMPoint, SVGTransform인 경우:
   1. length > new length이면:
      1. new length 이상 인덱스의 객체를 모두 detach.
      2. 리스트를 new length로 잘라냄.
      3. length를 new length로 설정.
   2. length < new length 동안:
      1. 리스트 요소 타입의 새 객체 item 생성.
      2. item을 리스트 인터페이스 객체에 attach.
      3. 리스트에 item 추가.
      4. length를 1 증가.
   3. index를 0으로 설정.
   4. index < length 동안:
      1. 리스트의 index 위치 객체 item 획득.
      2. value의 index 위치 값 v 획득.
      3. item의 값을 v로 설정.
      4. item이 SVGTransform 객체라면, matrix object의 구성요소를 새로운 transform 함수 값과 일치시킴.
      5. index를 1 증가.
5. 그 외, 리스트 요소 타입이 DOMString인 경우:
   1. 리스트를 value의 값으로 구성된 새 리스트로 교체.

리스트 요소 객체를 detach할 때는, 리스트 요소 타입에 따라 아래 절차를 실행합니다:

SVGNumber

SVGNumber 객체가 어떤 요소와도 연관되지 않도록 설정. SVGNumber가 읽기 전용이면, 더 이상 읽기 전용이 아니도록 설정.

SVGLength

SVGLength 객체가 어떤 요소와도 연관되지 않도록 설정. SVGLength가 읽기 전용이면, 더 이상 읽기 전용이 아니도록 설정. SVGLength의 방향성을 미지정으로 설정.

DOMPoint

DOMPoint 객체가 어떤 요소와도 연관되지 않도록 설정. DOMPoint가 읽기 전용이면, 더 이상 읽기 전용이 아니도록 설정.

SVGTransform

SVGTransform 객체가 어떤 요소와도 연관되지 않도록 설정. SVGTransform가 읽기 전용이면, 더 이상 읽기 전용이 아니도록 설정.

DOMString

별도 동작 없음.

리스트 요소 객체를 attach할 때는, 리스트 요소 타입에 따라 아래 절차를 실행합니다:

지원되는 프로퍼티 인덱스는 리스트 인터페이스 객체의 리스트 길이보다 작은 모든 0 이상의 정수 집합입니다.

length와 numberOfItems IDL 속성은 리스트의 길이를 나타내며, 값을 가져오면 리스트의 길이를 반환합니다.

clear 메서드는 리스트의 모든 항목을 제거하는 데 사용됩니다. clear() 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. 리스트의 모든 요소를 detach한 후 제거.
3. 리스트가 속성 반영 또는 반영된 속성의 base value 객체를 표현하면 속성을 재직렬화함.

initialize 메서드는 리스트를 초기화하고 지정한 값 하나만 추가하는 데 사용됩니다. initialize(newItem) 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. 리스트의 모든 요소를 detach한 후 제거.
3. newItem이 객체 타입이고, 분리된 객체가 아니면 동일 타입의 새 객체(값은 같음)로 newItem을 설정.
4. newItem을 리스트 인터페이스 객체에 attach.
5. 리스트에 newItem 추가.
6. 리스트가 속성 반영 또는 반영된 속성의 base value 객체를 표현하면 속성을 재직렬화함.
7. newItem 반환.

getItem 메서드는 리스트에서 특정 위치의 항목을 얻는 데 사용됩니다. getItem(index) 호출 시 다음 절차를 실행합니다:

1. index가 리스트 길이 이상이면 예외 발생 IndexSizeError.
2. index 위치의 요소를 반환.

   리스트 요소 타입이 객체 타입(SVGLength 등)인 경우, 해당 객체의 참조를 반환하며 복사본이 아님.

insertItemBefore 메서드는 리스트의 특정 위치에 요소를 삽입하는 데 사용됩니다. insertItemBefore(newItem, index) 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. newItem이 객체 타입이고, 분리된 객체가 아니면 동일 타입의 새 객체(값은 같음)로 newItem을 설정.
3. index가 리스트 길이보다 크면 index를 리스트 길이로 설정.
4. newItem을 index 위치에 삽입.
5. newItem을 리스트 인터페이스 객체에 attach.
6. 리스트가 속성 반영 또는 반영된 속성의 base value 객체를 표현하면 속성을 재직렬화함.
7. newItem 반환.

replaceItem 메서드는 리스트의 기존 항목을 새 항목으로 교체합니다. replaceItem(newItem, index) 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. index가 리스트 길이 이상이면 예외 발생 IndexSizeError.
3. newItem이 객체 타입이고, 분리된 객체가 아니면 동일 타입의 새 객체(값은 같음)로 newItem을 설정.
4. index 위치의 요소를 detach.
5. index 위치의 요소를 newItem으로 교체.
6. newItem을 리스트 인터페이스 객체에 attach.
7. 리스트가 속성 반영 또는 반영된 속성의 base value 객체를 표현하면 속성을 재직렬화함.
8. newItem 반환.

removeItem 메서드는 리스트에서 항목 하나를 제거합니다. removeItem(index) 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. index가 리스트 길이 이상이면 예외 발생 IndexSizeError 발생.
3. index 위치의 리스트 요소를 item에 저장.
4. item을 detach.
5. index 위치의 리스트 요소를 제거.
6. item 반환.

appendItem 메서드는 리스트 끝에 항목을 추가합니다. appendItem(newItem) 호출 시 다음 절차를 실행합니다:

1. 리스트가 읽기 전용이면 예외 발생 NoModificationAllowedError.
2. newItem이 객체 타입이고, 분리된 객체가 아니면 동일 타입의 새 객체(값은 같음)로 newItem을 설정.
3. index를 리스트 길이로 설정.
4. 리스트 끝에 newItem 추가.
5. newItem을 리스트 인터페이스 객체에 attach.
6. 리스트가 속성 반영 또는 반영된 속성의 base value 객체를 표현하면 속성을 재직렬화함.
7. newItem 반환.

인덱스 프로퍼티 setter의 동작은 replaceItem 메서드와 동일합니다.

4.5.5. SVGNumberList 인터페이스

SVGNumberList 인터페이스는 요소가 리스트 인터페이스이며, 각 요소는 SVGNumber 객체입니다. SVGNumberList 객체는 숫자 리스트를 나타냅니다.

[Exposed=Window]
interface SVGNumberList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGNumber initialize(SVGNumber newItem);
  getter SVGNumber getItem(unsigned long index);
  SVGNumber insertItemBefore(SVGNumber newItem, unsigned long index);
  SVGNumber replaceItem(SVGNumber newItem, unsigned long index);
  SVGNumber removeItem(unsigned long index);
  SVGNumber appendItem(SVGNumber newItem);
  setter void (unsigned long index, SVGNumber newItem);
};

SVGNumberList의 모든 인터페이스 멤버의 동작은 위 리스트 인터페이스 절에서 정의되어 있습니다.

4.5.6. SVGLengthList 인터페이스

SVGLengthList 인터페이스는 요소가 리스트 인터페이스이며, 각 요소는 SVGLength 객체입니다. SVGLengthList 객체는 길이 리스트를 나타냅니다.

[Exposed=Window]
interface SVGLengthList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGLength initialize(SVGLength newItem);
  getter SVGLength getItem(unsigned long index);
  SVGLength insertItemBefore(SVGLength newItem, unsigned long index);
  SVGLength replaceItem(SVGLength newItem, unsigned long index);
  SVGLength removeItem(unsigned long index);
  SVGLength appendItem(SVGLength newItem);
  setter void (unsigned long index, SVGLength newItem);
};

SVGLengthList의 모든 인터페이스 멤버의 동작은 위 리스트 인터페이스 절에서 정의되어 있습니다.

4.5.7. SVGStringList 인터페이스

SVGStringList 인터페이스는 요소가 리스트 인터페이스이며, 각 요소는 DOMString 값입니다. SVGStringList 객체는 문자열 리스트를 나타냅니다.

[Exposed=Window]
interface SVGStringList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  DOMString initialize(DOMString newItem);
  getter DOMString getItem(unsigned long index);
  DOMString insertItemBefore(DOMString newItem, unsigned long index);
  DOMString replaceItem(DOMString newItem, unsigned long index);
  DOMString removeItem(unsigned long index);
  DOMString appendItem(DOMString newItem);
  setter void (unsigned long index, DOMString newItem);
};

SVGStringList의 모든 인터페이스 멤버의 동작은 위 리스트 인터페이스 절에서 정의되어 있습니다.

4.6. 애니메이션 가능한 SVG 속성 반영을 위한 DOM 인터페이스

다음 인터페이스들은 애니메이션 가능한 콘텐츠 속성의 반영값을 표현하는 데 사용됩니다. 각 인터페이스는 동일한 데이터를 나타내는 두 개의 구성 객체를 포함합니다: baseVal 및 animVal. baseVal (기본값) 객체는 수정 가능하여, 해당 속성 값을 갱신할 수 있습니다.

SVG 1.1에서는 SVG DOM 인터페이스의 animVal 속성이 반영된 속성의 현재 애니메이션 값을 나타냈습니다. 이 버전의 SVG에서는 animVal이 더 이상 현재 애니메이션 값을 나타내지 않고, 대신 baseVal의 별칭이 됩니다.

4.6.1. SVGAnimatedBoolean 인터페이스

SVGAnimatedBoolean 객체는 불리언 값이 들어가는 애니메이션 가능한 속성을 반영하는 데 사용됩니다.

[Exposed=Window]
interface SVGAnimatedBoolean {
           attribute boolean baseVal;
  readonly attribute boolean animVal;
};

baseVal과 animVal IDL 속성은 모두 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. baseVal 또는 animVal을 가져오면 다음 절차가 실행됩니다:

1. value에 반영된 속성의 값을 설정(속성이 없으면 빈 문자열).
2. value가 "true" 또는 "false"가 아니면, value를 반영된 속성의 초기값으로 설정.
3. value가 "true"면 true, 아니면 false 반환.

baseVal을 설정하면, 값이 true면 반영된 속성을 "true"로, 아니면 "false"로 설정합니다.

4.6.2. SVGAnimatedEnumeration 인터페이스

SVGAnimatedEnumeration 객체는 키워드 값을 받는 애니메이션 가능한 속성을 반영하는 데 사용됩니다 (예: ‘method’ 속성, ‘textPath’ 등). 또한 애니메이션 가능한 속성 값의 타입을 반영하는 데 사용됩니다(예: orientType IDL 속성, ‘marker’ 요소의 ‘orient’ 속성).

[Exposed=Window]
interface SVGAnimatedEnumeration {
           attribute unsigned short baseVal;
  readonly attribute unsigned short animVal;
};

키워드 값만 받는 애니메이션 가능한 속성을 반영하는 SVGAnimatedEnumeration 객체에서, baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. orientType의 경우, 반영된 ‘orient’ 속성의 현재(애니메이션되지 않은) 값의 타입을 나타냅니다. baseVal 또는 animVal을 가져오면 다음 절차가 실행됩니다:

1. value에 반영된 속성의 값을 설정(속성이 없거나 잘못된 값이면 초기값 사용).
2. value에 대해 해당 반영 IDL 속성 정의에 따라 숫자형 타입 값 반환.

baseVal을 설정하면, 다음 절차를 실행합니다:

1. baseVal에 할당할 값을 value로 설정.
2. value가 0이거나 반영된 속성의 어떤 값에 대해서도 숫자형 타입 값이 아니면, 반영된 속성을 빈 문자열로 설정.
3. 그 외, 반영 IDL 속성이 orientType이고 value가 SVG_MARKER_ORIENT_ANGLE이면, 반영된 속성을 "0" 문자열로 설정.
4. 그 외, value가 반영된 속성의 특정 키워드 값에 대한 숫자형 타입 값이면, 반영된 속성을 해당 값으로 설정.

4.6.3. SVGAnimatedInteger 인터페이스

SVGAnimatedInteger 객체는 정수 값을 받는 애니메이션 가능한 속성을 반영하는 데 사용됩니다 (예: ‘numOctaves’, ‘feTurbulence’). 또한 정수 + 선택적 두 번째 정수를 받는 애니메이션 가능한 속성의 일부를 반영하는 데도 사용됩니다 (예: ‘order’, ‘feConvolveMatrix’).

SVGAnimatedInteger 인터페이스는 본 명세에서는 사용되지 않으나, Filter Effects 명세에서 여러 곳에 사용됨.

[Exposed=Window]
interface SVGAnimatedInteger {
           attribute long baseVal;
  readonly attribute long animVal;
};

단일 정수 값을 받는 애니메이션 가능한 속성을 반영하는 SVGAnimatedInteger 객체에서, baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. 정수 + 선택적 두 번째 정수를 받는 속성의 일부를 반영하는 경우, 두 정수 중 하나의 현재 값을 나타냅니다. baseVal 또는 animVal을 가져오면 다음 절차를 실행합니다:

1. value에 반영된 속성의 값을 설정(속성이 없거나 잘못된 값이면 초기값 사용).
2. 반영된 속성이 정수 + 선택적 두 번째 정수를 받는 경우:
   1. 이 SVGAnimatedInteger 객체가 첫 번째 정수를 반영하면, value의 첫 번째 값을 반환.
   2. 그 외, 두 번째 정수를 반영하면, value에 명시적으로 지정된 두 번째 값이 있으면 그 값을, 없으면 속성 정의에 따라 암시적 값을 반환.

      예: ‘order’ 정의에 따르면, 두 번째 값이 없으면 첫 번째 값과 동일하게 간주.

3. 그 외, 단일 정수 값을 받는 속성인 경우 value 반환.

baseVal을 설정하면, 다음 절차를 실행합니다:

1. baseVal에 할당할 값을 value로 설정.
2. new에 정수 리스트를 저장.
3. 반영된 속성이 정수 + 선택적 두 번째 정수를 받는 경우:
   1. current에 반영된 속성의 값을 저장(속성이 없거나 잘못된 값이면 초기값 사용).
   2. first에 current의 첫 번째 정수 저장.
   3. second에 current의 두 번째 정수(명시적으로 지정된 경우), 없으면 속성 정의의 암시적 값 저장.
   4. 이 SVGAnimatedInteger 객체가 첫 번째 정수를 반영하면 first를 value로, 아니면 second를 value로 설정.
   5. first를 new에 추가.
   6. second를 new에 추가.
4. 그 외, 단일 정수 값을 받는 속성인 경우 value를 new에 추가.
5. new의 각 정수를 구현별 CSS 문법 <숫자>로 파싱 시 해당 정수 값을 반환하는 문자열로 직렬화하여, 공백(U+0020)으로 연결한 문자열로 콘텐츠 속성에 설정.

4.6.4. SVGAnimatedNumber 인터페이스

SVGAnimatedNumber 객체는 숫자 값을 받는 애니메이션 가능한 속성을 반영하는 데 사용됩니다 (예: ‘pathLength’, ‘path’). 또한 숫자 + 선택적 두 번째 숫자를 받는 애니메이션 가능한 속성의 일부를 반영하는 데도 사용됩니다 (예: ‘kernelUnitLength’, ‘feDiffuseLighting’).

[Exposed=Window]
interface SVGAnimatedNumber {
           attribute float baseVal;
  readonly attribute float animVal;
};

단일 숫자 값을 받는 애니메이션 가능한 속성을 반영하는 SVGAnimatedNumber 객체에서, baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. 숫자 + 선택적 두 번째 숫자를 받는 속성의 일부를 반영하는 경우, 두 숫자 중 하나의 현재 값을 나타냅니다. baseVal 또는 animVal을 가져오면 다음 절차를 실행합니다:

1. value에 반영된 속성의 값을 설정(속성이 없거나 잘못된 값이면 초기값 사용).
2. 반영된 속성이 숫자 + 선택적 두 번째 숫자를 받는 경우:
   1. 이 SVGAnimatedNumber 객체가 첫 번째 숫자를 반영하면, value의 첫 번째 값을 반환.
   2. 그 외, 두 번째 숫자를 반영하면, value에 명시적으로 지정된 두 번째 값이 있으면 그 값을, 없으면 속성 정의에 따라 암시적 값을 반환.

      예: ‘kernelUnitLength’ 정의에 따르면, 두 번째 값이 없으면 첫 번째 값과 동일하게 간주.

3. 그 외, 단일 숫자 값을 받는 속성인 경우 value 반환.

baseVal을 설정하면, 다음 절차를 실행합니다:

1. baseVal에 할당할 값을 value로 설정.
2. new에 숫자 리스트를 저장.
3. 반영된 속성이 숫자 + 선택적 두 번째 숫자를 받는 경우:
   1. current에 반영된 속성의 값을 저장(속성이 없거나 잘못된 값이면 초기값 사용).
   2. first에 current의 첫 번째 숫자 저장.
   3. second에 current의 두 번째 숫자(명시적으로 지정된 경우), 없으면 속성 정의의 암시적 값 저장.
   4. 이 SVGAnimatedNumber 객체가 첫 번째 숫자를 반영하면 first를 value로, 아니면 second를 value로 설정.
   5. first를 new에 추가.
   6. second를 new에 추가.
4. 그 외, 단일 숫자 값을 받는 속성인 경우 value를 new에 추가.
5. new의 각 숫자를 구현별 CSS 문법 <숫자>로 파싱 시 해당 숫자에 가장 가까운 값을 반환하는 문자열로 직렬화하여, 공백(U+0020)으로 연결한 문자열로 콘텐츠 속성에 설정(구현의 실수 정밀도 반영).

4.6.5. SVGAnimatedLength 인터페이스

SVGAnimatedLength 객체는 (a) <길이>, <퍼센트> 또는 <숫자> 값을 받는 애니메이션 가능한 속성, 또는 (b) 이러한 값을 받는 CSS 프로퍼티 및 그에 대응되는 프레젠테이션 속성을 반영하는 데 사용됩니다.

[Exposed=Window]
interface SVGAnimatedLength {
  [SameObject] readonly attribute SVGLength baseVal;
  [SameObject] readonly attribute SVGLength animVal;
};

baseVal과 animVal IDL 속성은 반영된 콘텐츠 속성의 현재 값을 나타냅니다. baseVal 또는 animVal을 가져오면 반환되는 SVGLength 객체는:

• 반영된 속성의 base value를 반영하거나 프레젠테이션 속성을 반영함,
• 연관된 SVG 요소와 연결됨(해당 SVGAnimatedLength 타입 반영 IDL 속성을 얻은 객체의 요소),
• 특정 반영 속성에 따라 방향성을 가짐.

4.6.6. SVGAnimatedAngle 인터페이스

SVGAnimatedAngle 객체는 반영되어 ‘orient’ 속성의 애니메이션 <각도> 값을 ‘marker’ 요소에서 orientAngle IDL 속성을 통해 나타냅니다.

[Exposed=Window]
interface SVGAnimatedAngle {
  [SameObject] readonly attribute SVGAngle baseVal;
  [SameObject] readonly attribute SVGAngle animVal;
};

baseVal과 animVal IDL 속성은 반영된 ‘orient’ 속성의 현재(애니메이션되지 않은) <각도> 값을 나타냅니다. baseVal 또는 animVal을 가져오면 반환되는 SVGAngle 객체는:

• 반영된 ‘orient’ 속성의 base value를 반영하며,
• 연관된 SVG ‘marker’ 요소와 연결됨(해당 SVGAnimatedAngle 타입 반영 IDL 속성을 얻은 객체의 요소).

4.6.7. SVGAnimatedString 인터페이스

SVGAnimatedString 객체는 문자열 값을 받는 애니메이션 가능한 속성을 반영하는 데 사용됩니다. 필요에 따라 두 번째, 폐기된(deprecated) 속성을 추가로 반영하도록 정의될 수도 있습니다.

[Exposed=Window]
interface SVGAnimatedString {
           attribute DOMString baseVal;
  readonly attribute DOMString animVal;
};

baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. baseVal 또는 animVal을 가져오면 다음 절차를 실행합니다:

1. 반영된 속성이 없으면:
   1. SVGAnimatedString 객체가 두 번째, 폐기된 속성을 추가로 반영하도록 정의되어 있고, 그 속성이 존재하면 해당 값 반환.
   2. 그 외, 반영된 속성에 초기값이 있으면 그 값을 반환.
   3. 그 외에는 빈 문자열 반환.
2. 그 외, 반영된 속성이 존재하면 해당 값을 반환.

href 멤버가 SVGURIReference 인터페이스에 있을 때, ‘xlink:href’ 속성이 존재하고 ‘href’ 속성이 없으면 xlink:href 값이 반환되고, 그 외에는 href 속성 값이 반환됩니다.

baseVal을 설정하면, 다음 절차를 실행합니다:

1. 반영된 속성이 없고 SVGAnimatedString 객체가 두 번째, 폐기된 속성을 추가로 반영하도록 정의되어 있으며, 그 폐기된 속성이 존재하면 해당 폐기된 속성에 지정값을 설정.
2. 그 외에는 반영된 속성에 지정값을 설정.

href 멤버가 SVGURIReference 인터페이스에 있을 때, ‘xlink:href’ 속성이 존재하고 ‘href’ 속성이 없으면 xlink:href 속성에 값이 설정되고, 그 외에는 href 속성에 값이 설정됩니다.

4.6.8. SVGAnimatedRect 인터페이스

SVGAnimatedRect 객체는 반영되어 x, y, width, height로 지정된 사각형 값을 받는 애니메이션 가능한 속성을 나타냅니다.

본 명세에서 SVGAnimatedRect로 반영되는 유일한 속성은 ‘viewBox’입니다.

[Exposed=Window]
interface SVGAnimatedRect {
  [SameObject] readonly attribute DOMRect baseVal;
  [SameObject] readonly attribute DOMRectReadOnly animVal;
};

baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 사각형 값을 나타냅니다. baseVal 또는 animVal을 가져오면 DOMRect 객체가 반환됩니다.

baseVal 또는 animVal DOMRect 객체 생성 시, 이후 반영된 콘텐츠 속성이 추가/삭제/변경될 때마다 다음 절차를 실행합니다:

1. value에 반영된 속성의 값을 설정(속성이 없거나 잘못된 값이면 초기값 사용).
2. x, y, width, height에 value의 해당 구성요소 값 저장.
3. DOMRect 객체의 x 좌표, y 좌표, width, height에 각각 x, y, width, height 값 설정.

baseVal, animVal DOMRect 객체의 x 좌표, y 좌표, width, height 프로퍼티가 변경될 때마다(콘텐츠 속성 값을 DOMRect에 반영하는 이전 알고리즘의 일부가 아닌 경우), 반영된 콘텐츠 속성을 재직렬화해야 합니다.

4.6.9. SVGAnimatedNumberList 인터페이스

SVGAnimatedNumberList 객체는 반영되어 <숫자> 값 리스트를 받는 애니메이션 가능한 속성을 나타냅니다.

[Exposed=Window]
interface SVGAnimatedNumberList {
  [SameObject] readonly attribute SVGNumberList baseVal;
  [SameObject] readonly attribute SVGNumberList animVal;
};

baseVal과 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. baseVal 또는 animVal을 가져오면, 반영된 속성의 base value를 반영하는 SVGNumberList 객체가 반환됩니다.

4.6.10. SVGAnimatedLengthList 인터페이스

SVGAnimatedLengthList 객체는 반영되어 <길이>, <퍼센트> 또는 <숫자> 값 리스트를 받는 애니메이션 가능한 속성을 나타냅니다.

[Exposed=Window]
interface SVGAnimatedLengthList {
  [SameObject] readonly attribute SVGLengthList baseVal;
  [SameObject] readonly attribute SVGLengthList animVal;
};

baseVal 또는 animVal IDL 속성은 반영된 속성의 현재(애니메이션되지 않은) 값을 나타냅니다. baseVal 또는 animVal을 가져오면, 반영된 속성의 base value를 반영하는 SVGLengthList 객체가 반환됩니다.

4.7. 기타 DOM 인터페이스

4.7.1. SVGUnitTypes 인터페이스

SVGUnitTypes 인터페이스는 ‘gradientUnits’, ‘patternContentUnits’ 등과 유사한 속성을 반영할 때 자주 사용하는 상수 집합을 정의합니다.

[Exposed=Window]
interface SVGUnitTypes {
  // 단위 타입
  const unsigned short SVG_UNIT_TYPE_UNKNOWN = 0;
  const unsigned short SVG_UNIT_TYPE_USERSPACEONUSE = 1;
  const unsigned short SVG_UNIT_TYPE_OBJECTBOUNDINGBOX = 2;
};

SVGUnitTypes에 정의된 단위 타입 상수의 의미는 다음과 같습니다:

4.7.2. SVGTests 믹스인

SVGTests 인터페이스는 조건 처리 속성을 반영하는 데 사용되며, 이를 지원하는 요소의 다른 인터페이스에 믹스인됩니다.

interface mixin SVGTests {
  [SameObject] readonly attribute SVGStringList requiredExtensions;
  [SameObject] readonly attribute SVGStringList systemLanguage;
};

requiredExtensions IDL 속성은 반영되어 ‘requiredExtensions’ 콘텐츠 속성과 연결됩니다.

systemLanguage IDL 속성은 반영되어 ‘systemLanguage’ 콘텐츠 속성과 연결됩니다.

4.7.3. SVGFitToViewBox 믹스인

SVGFitToViewBox 인터페이스는 ‘viewBox’와 ‘preserveAspectRatio’ 속성을 반영하는 데 사용되며, 이 두 속성을 지원하는 요소의 다른 인터페이스에 믹스인됩니다.

interface mixin SVGFitToViewBox {
  [SameObject] readonly attribute SVGAnimatedRect viewBox;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};

viewBox IDL 속성은 반영되어 ‘viewBox’ 콘텐츠 속성과 연결됩니다.

preserveAspectRatio IDL 속성은 반영되어 ‘preserveAspectRatio’ 콘텐츠 속성과 연결됩니다.

4.7.4. SVGZoomAndPan 믹스인

SVGZoomAndPan 인터페이스는 ‘zoomAndPan’ 속성을 반영하는 데 사용되며, 이 속성을 지원하는 요소의 다른 인터페이스에 믹스인됩니다.

interface mixin SVGZoomAndPan {

  // 줌 및 팬 타입
  const unsigned short SVG_ZOOMANDPAN_UNKNOWN = 0;
  const unsigned short SVG_ZOOMANDPAN_DISABLE = 1;
  const unsigned short SVG_ZOOMANDPAN_MAGNIFY = 2;

  attribute unsigned short zoomAndPan;
};

SVGZoomAndPan에 정의된 줌 및 팬 타입 상수의 의미는 다음과 같습니다:

zoomAndPan IDL 속성은 ‘zoomAndPan’ 속성 값을 나타냅니다. zoomAndPan을 가져오면 다음 절차를 실행합니다:

1. value에 ‘zoomAndPan’ 속성의 현재 값 저장(속성이 없거나 잘못된 값이면 초기값 사용).
2. value에 대해 위 줌 및 팬 타입 상수 테이블의 해당 상수 반환.

zoomAndPan을 설정하면, 다음 절차를 실행합니다:

1. zoomAndPan에 할당할 값을 value로 설정.
2. value가 SVG_ZOOMANDPAN_UNKNOWN이거나 위 줌 및 팬 타입 상수 테이블에 해당하지 않으면 반환.
3. value에 해당하는 줌 및 팬 타입 상수 테이블의 키워드 값을 ‘zoomAndPan’ 속성에 설정.

4.7.5. SVGURIReference 믹스인

SVGURIReference 인터페이스는 ‘href’ 속성과 폐기된 ‘xlink:href’ 속성을 반영하는 데 사용됩니다.

interface mixin SVGURIReference {
  [SameObject] readonly attribute SVGAnimatedString href;
};

href IDL 속성은 ‘href’ 속성 값을 나타내며, 해당 요소가 지원하도록 정의된 경우 폐기된 ‘xlink:href’ 속성 값도 함께 나타냅니다. href를 가져오면 반환되는 SVGAnimatedString 객체는:

• ‘href’ 속성을 반영하며,
• 해당 요소가 폐기된 ‘xlink:href’ 속성을 지원하도록 정의된 경우 해당 속성도 추가로 반영합니다.

SVGAnimatedString 인터페이스는 baseVal, animVal 멤버를 통해 폐기된 ‘xlink:href’ 속성을 반영하고, 해당 속성이 존재하고 ‘href’ 속성이 없을 때만 그렇습니다. 그 외에는 항상 ‘href’ 속성을 반영합니다. 애니메이션 요소는 attributeName='xlink:href'을 ‘href’ 속성에 대한 별칭(alias)으로 처리합니다.