Тип содержимого

SVG использует ряд типов данных. В этой статье перечислены эти типы, а также их синтаксис и описание того, для чего они используются.

Угол

<angle>

Углы задаются одним из двух способов. При использовании в значении свойства таблицы стилей тип <angle> определяется следующим образом:

angle ::= number (~"deg" | ~"grad" | ~"rad")?

где deg обозначает градусы, grad — грады, а rad — радианы.

Для свойств, определённых в CSS2, необходимо указывать идентификатор единицы измерения угла. Для значений углов в свойствах, специфичных для SVG, и соответствующих им атрибутах представления идентификатор единицы измерения угла можно не указывать. Если он не указан, считается, что значение угла задано в градусах. В атрибутах представления для всех свойств, независимо от того, определены они в SVG1.1 или CSS2, идентификатор угла, если он указан, должен быть в нижнем регистре.

При использовании углов в атрибуте SVG тип <angle> определяется иначе:

angle ::= number ("deg" | "grad" | "rad")?

Идентификаторы единиц измерения в таких значениях <angle> должны быть в нижнем регистре.

В SVG DOM значения <angle> представлены объектами SVGAngle или SVGAnimatedAngle.

Любое значение

<anything>

Базовый тип <anything> — это последовательность из нуля или более символов. В частности:

anything ::= Char*

где Char — любой допустимый символ Unicode, не являющийся управляющим.

Значение времени

<clock-value>

Значения времени имеют тот же синтаксис, что и в спецификации SMIL Animation. Здесь повторяется грамматика значений времени:

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

Для значений Timecount суффикс единицы измерения по умолчанию — s (для секунд). Внутри значений времени не допускаются пробелы, однако начальные и конечные пробельные символы игнорируются.

Ниже приведены примеры допустимых значений времени:

• Полные значения времени:
  • 02:30:03 = 2 часа, 30 минут и 3 секунды
  • 50:00:10.25 = 50 часов, 10 секунд и 250 миллисекунд
• Неполные значения времени:
  • 02:33 = 2 минуты и 33 секунды
  • 00:10.5 = 10,5 секунды = 10 секунд и 500 миллисекунд
• Значения времени с единицами измерения:
  • 3.2h = 3,2 часа = 3 часа и 12 минут
  • 45min = 45 минут
  • 30s = 30 секунд
  • 5ms = 5 миллисекунд
  • 12.467 = 12 секунд и 467 миллисекунд
• Дробные значения — это просто определения секунд с плавающей точкой (в десятичной системе). Таким образом:
  • 00.5s = 500 миллисекунд
  • 00:00.005 = 5 миллисекунд

Цвет

<color>

Базовый тип <color> — это совместимое с CSS2 описание цвета в цветовом пространстве sRGB. Тип <color> используется в SVG для атрибута color и входит в определения атрибутов fill, stroke, stop-color, flood-color и lighting-color, которые также допускают дополнительные спецификации цвета на основе ICC.

Определение <color> в SVG в точности совпадает с определением CSS <color>.

Координата

<coordinate>

<coordinate> — это длина в пользовательской системе координат, обозначающая заданное расстояние от начала пользовательской системы координат вдоль соответствующей оси (оси x для координат X, оси y для координат Y). Синтаксис такой же, как у <length>.

В SVG DOM значение <coordinate> представлено объектом SVGLength или SVGAnimatedLength.

Частота

<frequency>

Значения частоты используются со звуковыми свойствами. Согласно определению в CSS2, значение частоты — это <number>, за которым сразу следует идентификатор единицы частоты. Идентификаторы единиц частоты:

• Hz: герцы
• kHz: килогерцы

Значения частоты не могут быть отрицательными.

Функциональный IRI

<FuncIRI>

Функциональная запись ссылки. Синтаксис этой ссылки совпадает с синтаксисом URI CSS.

Целое число

<integer>

<integer> задаётся необязательным символом знака (+ или -), за которым следуют одна или более цифр от 0 до 9:

integer ::= [+-]? [0-9]+

Если символ знака отсутствует, число неотрицательное.

Если для определённого атрибута или свойства не указано иное, диапазон <integer> охватывает как минимум значения от -2147483648 до 2147483647.

В SVG DOM значение <integer> представлено объектом number или SVGAnimatedInteger.

IRI

<IRI>

Интернационализированный идентификатор ресурса (Internationalized Resource Identifier).

В Интернете ресурсы идентифицируются с помощью IRI (интернационализированных идентификаторов ресурсов). Например, SVG-файл с именем someDrawing.svg, расположенный по адресу http://example.com, может иметь следующий IRI:

http://example.com/someDrawing.svg

IRI может также указывать на определённый элемент внутри XML-документа, если включить в него идентификатор фрагмента IRI. IRI с идентификатором фрагмента состоит из необязательного базового IRI, за которым следует символ #, а затем идентификатор фрагмента IRI. Например, следующий IRI можно использовать, чтобы указать элемент с идентификатором Lamppost в файле someDrawing.svg:

http://example.com/someDrawing.svg#Lamppost

IRI используются в атрибуте href. Некоторые атрибуты допускают в качестве содержимого как IRI, так и текстовые строки. Чтобы отличить текстовую строку от относительного IRI, используется функциональная запись <FuncIRI>. Это IRI, заключённый в функциональную запись. Примечание: по историческим причинам в качестве ограничителей используются url( и ), чтобы обеспечить совместимость со спецификациями CSS. Форма FuncIRI используется в атрибутах представления.

В SVG широко используются ссылки IRI — как абсолютные, так и относительные — на другие объекты. Например, чтобы залить прямоугольник линейным градиентом, сначала задайте элемент <linearGradient> и присвойте ему идентификатор, как показано ниже:

<linearGradient xml:id="MyGradient">...</linearGradient>

Затем укажите ссылку на линейный градиент в значении атрибута fill прямоугольника, как показано в следующем примере:

<rect fill="url(#MyGradient)" />

SVG поддерживает два типа ссылок IRI:

• локальные ссылки IRI, в которых ссылка IRI не содержит <absoluteIRI> или <relativeIRI>, а значит, содержит только идентификатор фрагмента (то есть #<elementID> или #xpointer(id<elementID>)).
• нелокальные ссылки IRI, в которых ссылка IRI содержит <absoluteIRI> или <relativeIRI>.

В SVG 2 понятие IRI считается устаревшим и заменено универсальным типом URL.

Длина

<length>

Длина — это мера расстояния, задаваемая числом вместе с единицей измерения. Спецификация SVG2 согласует синтаксис атрибутов и их значения с типами данных и единицами измерения CSS <length>. Идентификатор единицы измерения длины должен быть указан; регистр символов в таких идентификаторах не учитывается. Синтаксис соответствует синтаксису CSS <length>:

length ::= <number> (<absolute-length> | <relative-length>)?

Для свойств, специфичных для SVG и определённых в SVG1.1, и соответствующих им атрибутов представления идентификаторы единиц измерения в значениях можно не указывать. Если идентификатор не указан, значение длины обозначает расстояние в текущей пользовательской системе координат. При использовании в атрибутах представления идентификаторы длины должны быть в нижнем регистре для всех свойств, независимо от того, определены они в SVG или CSS. В SVG2 это требование к регистру ослаблено для согласования с CSS.

Обратите внимание: определение <length> вне свойств также допускает идентификатор единицы измерения в виде процента (%). Значение длины в процентах зависит от атрибута, для которого оно задано. Часто встречаются два случая:

• значение длины в процентах обозначает процент от ширины или высоты области просмотра;
• значение длины в процентах обозначает процент от ширины или высоты ограничивающей рамки заданного объекта.

В SVG DOM значения <length> представлены объектами SVGLength или SVGAnimatedLength.

Список-Ts

<list-of-Ts>

(Где T — некоторый тип.) Список состоит из последовательности значений, разделённых друг от друга. Если явно не указано иное, списки в XML-атрибутах SVG могут быть разделены запятыми (с необязательными пробельными символами до или после запятой) или пробельными символами.

Пробельными символами в списках считаются один или несколько следующих идущих подряд символов: «пробел» (U+0020), «табуляция» (U+0009), «перевод строки» (U+000A), «возврат каретки» (U+000D) и «перевод страницы» (U+000C).

Ниже приведён шаблон грамматики EBNF, описывающей синтаксис <list-of-Ts>:

list-of-Ts ::= T
                | T, list-of-Ts

В SVG DOM значения типа <list-of-Ts> представлены интерфейсом, специфичным для соответствующего типа T. Например, <list-of-lengths> представляется в SVG DOM объектом SVGLengthList или SVGAnimatedLengthList.

Имя

<name>

Имя — это строка, в которой запрещены некоторые символы, имеющие синтаксическое значение.

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

Число

<number>

Вещественные числа задаются одним из двух способов. При использовании в таблице стилей тип <number> определяется следующим образом:

number ::= integer
            | [+-]? [0-9]* "." [0-9]+

Этот синтаксис совпадает с определением в CSS (CSS2, раздел 4.3.1).

При использовании в атрибуте SVG тип <number> определяется иначе, чтобы числа большого порядка можно было задавать более кратко:

number ::= integer ([Ee] integer)?
            | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

В SVG DOM значение <number> представлено числом с плавающей точкой, объектом SVGNumber или SVGAnimatedNumber.

Число-необязательное-число

<number-optional-number>

Пара значений <number>, в которой второе значение <number> является необязательным.

number-optional-number ::= number
                            | number, number

В SVG DOM значение <number-optional-number> представлено парой объектов SVGAnimatedInteger или SVGAnimatedNumber.

Значение непрозрачности

<opacity-value>

Непрозрачность цвета или содержимого, которым залит текущий объект, задаётся значением <number>. Значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) ограничиваются этим диапазоном.

Заливка

<paint>

Значения свойств fill и stroke определяют тип заливки, используемый при заливке или обводке графического элемента. Доступные варианты и синтаксис <paint>:

paint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke

Значения context-fill и context-stroke позволяют наследовать значения в элементах marker и use.

Процент

<percentage>

Проценты задаются числом, за которым следует символ %:

percentage ::= number "%"

Обратите внимание: определение <number> зависит от того, задан ли процент в таблице стилей или в атрибуте, который не является атрибутом представления.

Процентные значения всегда относительны к другому значению (например, длине). Для каждого атрибута или свойства, допускающего проценты, также определяется расстояние, относительно которого вычисляется процент.

В SVG DOM значение <percentage> представлено объектом SVGNumber или SVGAnimatedNumber.

Время

<time>

Значение времени — это <number>, за которым сразу следует идентификатор единицы времени. Идентификаторы единиц времени:

• ms: миллисекунды
• s: секунды

Список преобразований

<transform-list>

<transform-list> используется для задания списка преобразований системы координат. Подробное описание возможных значений <transform-list> приведено в определении атрибута transform.

В SVG DOM значение <transform-list> представлено объектом SVGTransformList или SVGAnimatedTransformList.

URL

URL

Унифицированный указатель ресурса (Uniform Resource Locator).

URL — это последовательность символов Unicode, образующая адрес внутреннего или внешнего ресурса.

До SVG 2 вместо него использовался более ограниченный тип содержимого IRI, поскольку спецификация URL ещё не была стандартизирована.