13963

Использование языка SVG

Лабораторная работа

Информатика, кибернетика и программирование

Графические объекты могут быть сгруппированы, стилизованны, преобразованы и встроены в предварительно предоставленные объекты. Набор характеристик включает вложенные преобразования, отсечение контуров, альфа-маски, эффекты фильтра и объекты шаблона.

Русский

2014-11-30

1.02 MB

26 чел.

Лабораторная работа 4-07

Использование языка SVG 

1. Цель работы

Целью работы является приобретение навыков создания векторных изображений с использованием языка SVG.     

  

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, редактор Inkscape.

3. Краткие теоретические сведения

3.1. Основные сведения о языке SVG

Язык масштабируемой векторной графики – SVG (Scalable Vector Graphics) предназначен для описания двумерной графики в формате XML.

Первая спецификация SVG (SVG 1.0) была принята консорциумом W3 в сентябре 2001 года. Последняя (действующая) спецификация: SVG версии 1.1 принята в январе 2003 года.

3.1.1. Основные концепции SVG

В SVG определены три типа графических объектов:

  •  векторные графические фигуры (например, контуры, состоящие из прямых линий и кривых);
  •  изображения;
  •  текст.

Графические объекты могут быть сгруппированы, стилизованны, преобразованы и встроены в предварительно предоставленные объекты. Набор характеристик включает вложенные преобразования, отсечение контуров, альфа-маски, эффекты фильтра и объекты шаблона.

Масштабируемость означает плавное уменьшение или увеличение размера. В графике масштабируемость означает отсутствие привязки к одному, фиксированному в пикселях размеру. В Web масштабируемость означает, что определенная технология может использовать при растущем количестве файлов, большом количестве пользователей, и для разнообразных приложений. Являясь графической технологией для Web, SVG масштабируема в обоих смыслах этого слова.  

Векторная графика содержит геометрические объекты, такие как прямые и кривые линии. Это предоставляет большую гибкость по сравнению с растровыми форматами (такими, как PNG и JPEG), которые должны хранить информацию о каждом пикселе изображения. Обычно векторные форматы могут также интегрировать растровые изображения и могут объединять их с векторной информацией, какой как контуры обрезания изображения для создания законченной иллюстрации. Язык SVG в этом отношении не является исключением.

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

В настоящее время широко признаны преимущества таблиц стилей. Язык SVG расширяет это управление на область графики.

Комбинацию сценариев DOM и CSS часто называют динамическим HTML (Dynamic HTML). Он широко используется для анимации, интерактивности и обеспечения представления данных. SVG с помощью сценариев позволяет такое же манипулирование над деревом документов и таблицами стилей. Усложненные приложения SVG возможны при помощи дополнительного языка создания сценария, который обращается к объектной модели документа – SVG DOM (SVG Document Object Model), которая обеспечивает полный доступ ко всем элементам, признакам и свойствам. Для любого графического объекта SVG может быть назначен богатый набор обработчиков событий типа onmouseover и onclick. Вследствие совместимости и подгонки к другим  стандартам Web, такие черты, как сценарии, могут   использоваться для  элементов XHTML и SVG одновременно в пределах той же самой Web-страницы.  

Включенная в спецификацию SVG 1.1 модуляризация разбивает SVG на наборы абстрактных модулей, обеспечивающих определенные функциональные возможности. Эти модули могут объединяться друг с другом и с модулями других спецификаций, например, XHTML, для создания поднабора SVG.  

Каждый основной раздел спецификации SVG образует модуль с тем же именем, что и имя раздела, например, Text Module или Basic Structure Module. Модуль без префикса  Basic  предполагает, что этот модуль содержит полный набор элементов и атрибутов соответствующего раздела спецификации. Если необходимо создать поднабор полного модуля, то создается базовый модуль, имя которого содержит имя модуля с префиксом Basic, например, модуль  Basic Text Module является поднабором модуля Text Module.

3.1.2. Варианты использования SVG в Web-страницах

Можно использовать следующие основные варианты включения SVG в Web-страницу:

  •  автономная SVG-страница;
  •  внедрение с помощью ссылки;
  •  встроенное внедрение;
  •  внешняя ссылка с использованием элемента a;
  •  ссылка в свойстве CSS2 или XSL.  

При использовании первого варианта документ SVG (обычно файл с расширением .svg) с MIME-типом  "image/svg+xml", загружается непосредственно в пользовательском агенте типа Web-браузера.

Объявление типа документа для SVG версии 1.0 имеет следующий вид:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">,

а для версии 1.1:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">.

При использовании второго  варианта случае родительская Web-страница ссылается на отдельно хранящийся  документ SVG и определяет, что данный документ SVG должен быть внедрен как компонент родительской Web-страницы. Для HTML или XHTML возможны три варианта:

  •  с помощью элемента img;
  •  с помощью нескольких вложенных элементов (вложенные элементы вызываются, если их родительский элемент недоступен);
  •  с помощью элемента applet,  который может вызвать апплет Java, чтобы рассмотреть содержание SVG в данной Web-странице.

При использовании третьего варианта содержимое SVG встроено непосредственно в родительской Web-странице, например,  Web-страница XHTML с фрагментом SVG.

При использовании четвертого варианта можно использовать отдельный  SVG-браузер (обычно такой вариант используется для специальных форматов изображения).

Когда пользовательский агент поддерживает для документов XML средства CSS2 или   объекты форматирования XSL, можно использовать пятый вариант. В этом случае ссылки на документ SVG задаются в свойствах, например, background-image или list-style-image.   

3.1.3. Программные средства для SVG

Программные средства для SVG можно разбить на следующие категории:

  •  средства просмотра SVG;
  •  редакторы SVG;
  •  средства преобразования SVG;
  •  средства генерации SVG на сервере.

Наиболее известным средством просмотра SVG являются Adobe SVG Viewer. При инсталляции эта программа добавляется как plug-in в Internet Explorer, что позволяет выводить в этом Web-браузере как отдельные документы SVG, так и Web-страницы со ссылками на документы SVG.

Средства просмотра документов SVG встроены также в Web-браузеры Firefox, Opera и Safari.

Средства просмотра и графического редактирования документов SVG и Web-страниц, содержащих фрагменты SVG, является разработанный консорциумом W3 Web-браузер и редактор Amaya. Набор средств для создания и просмотра документов SVG содержит разработанный в рамках проекта Apache Batik SVG Toolkit.

Одним из наиболее мощных редакторов SVG является свободно распространяемый редактор Inkscape.

Некоторые графические редакторы позволяют читать (импортировать) документы SVG и выводит (экспортировать) документы в формате SVG. В частности, такими возможностями обладают такие распространенные векторные графические редакторы как Adobe Illustrator версии 10.0 и Corel Draw! Версии 10.0.

Средства преобразования SVG используются для преобразования документов SVG в другие, форматы графических данных, например, форматы GIF, JPEG, PNG или специализированные форматы, например, для AutoCad, MapInfo и т.п.

Средства генерации SVG на сервере обычно используются для преобразования полученных в результате запросов к базам данных графических данных в различных форматах в формат SVG, и встраивания их в документы XML и SVG с использованием одной из серверных технологий (Perl с CGI, ASP или PHP).

3.1.4. Базовые типы данных и базовые интерфейсы SVG    

Атрибуты элементов SVG делятся на две категории: свойства (атрибуты, позаимствованные из CSS2, например, font-family) и собственно атрибуты  SVG (например, fill).

В SVG определены следующие базовые типы данных:  

  •  целое (integer) –целое число, возможно со знаком  "+" или "-";
  •  число (number) – действительное число с целой и дробной частью (в атрибутах SVG можно использовать также экспоненциальную форму);
  •  длина (length) – данное типа число, в котором длина измеряется в тех же единицах, что и в CSS2: пикселях, точках, сантиметрах и т.д. (если единица измерения не задана, предполагается, что длина задана в пикселях);
  •  координата (coordinate) – данное типа длина, представляющая собой расстояние в пользовательской координатной системе от ее начала вдоль оси X или оси Y;
  •  список (list) – список данных одного типа, разделенных запятыми и/или пробелами (частным случаем списка является список данных типа число);
  •  угол (angle) – данное  типа число, за которым следует единица измерения: deg – градусы, grad – грады или rad – радианы (в атрибутах SVG единица измерения deg может быть опущена);  
  •  цвет (color) – цвет, задаваемый либо как наименование цвета (используются те же наименования цветов, что и в спецификации HTML 4.01), либо как шесть шестнадцатеричных значений с префиксом "#"(первая пара – интенсивность красного цвета, вторая – зеленого и третья – синего), либо как вызов функции rgb() с тремя десятичными параметрами для интенсивностей красного, зеленого и синего цветов;
  •  раскраска (paint) – тип раскраски, используемый для заполнения или контура изображения (эта величина может иметь значение либо "none" – отсутствие раскраски, либо "currentColor" – ссылка на цвет, задаваемый атрибутом color, либо быть данным типа цвет);
  •  процент (percentage) – данное типа число, за которым следует символ "%";
  •  список-преобразований (transform-list) – содержит список совершаемых над объектом преобразований (например, перемещения или растягивания);
  •  URI – адрес ресурса в Web;
  •  время (time) -  данное типа число, за которым следует единица измерения: s – секунда, ms – миллисекунда.

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

  •  интерфейсы, расширяющие соответствующие интерфейсы DOM;
  •  интерфейсы, связанные с обработкой данных;
  •  интерфейсы для списков данных;
  •  интерфейсы для работы с элементами и атрибутами.

Интерфейс SVGElement расширяет интерфейс элемент DOM. Его расширяют интерфейсы для отдельных элементов SVG, например интерфейс SVGPathElement для элемента path. Интерфейс содержит два атрибута: id и xmlbase, содержащие уникальный идентификатор элемента и значение атрибута xml:base для данного элемента. Два других атрибута (только для чтения) – ownerSVGElement и viewportElement определяет ближайшего предка данного элемента и элемент, устанавливающие текущее окно просмотра.

Интерфейс SVGUnitTypes определяет целое значение для каждого типа перечисленных выше базовых типов данных.

Интерфейсы SVGNumber, SVGLength, SVGAngle, SVGColor и  SVGICCColor определяют атрибуты для типов данных число, длина, угол и цвет  (для модели RGB и ICC). Интерфейс SVGRect определяет атрибуты типа число  x, y, width и height (координаты левого верхнего угла, ширину и высоту) для прямоугольника. Интерфейсы SVGURIReference и SVGCSSRule используются для работы со ссылками URI и правилами таблиц стилей.

Интерфейсы SVGNumberList, SVGStringList и SVGLengthList содержат атрибуты и методы для работы со списками данных (получение значения элемента списка, добавление, вставка и удаления элементов списка);

Интерфейсы SVGAnimatedBoolean, SVGAnimatedString,  SVGAnimatedEnumeration, SVGAnimatedInteger, SVGAnimatedNumber, SVGAnimatedNumberList, SVGAnimatedLength,  SVGAnimatedLengthList, SVGAnimatedAngle и  SVGAnimatedRect содержат атрибуты для тех типов данных и списков, которые могут быть анимированы.

Интерфейсы SVGStylable, SVGLocatable и SVGTransformable используются для получения характеристик таблиц стилей и преобразований, а интерфейс   SVGTests содержит атрибуты и метод для проверки, содержит ли данная реализация указанный элемент или атрибут.

Интерфейс SVGLangSpace предназначен для работы с атрибутами xml:lang и xml:space, интерфейс SVGExternalResourcesRequired – для работы с элементами, атрибуты которых содержат внешние ссылки, интерфейс  SVGFitToViewBox – для работы с элементами, имеющими атрибуты viewBox и preserveAspectRatio, интерфейс  SVGZoomAndPan определяет атрибут zoomAndPan и связанные с ним константы, интерфейс SVGViewSpec соответствует спецификации SVG View, а интерфейс SVGRenderingIntent определяет список перечисления для возможных значений атрибутов или дескрипторов rendering-intent.

3.1.5. Общие атрибуты элементов SVG

Как указывалось выше, элементы и атрибуты SVG разбиты на модули по функциональному признаку.

Для атрибутов SVG можно выделить следующие группы модулей:

  •  общие модули;
  •  модуль текста;
  •  графические модули;
  •  модули событий;
  •  модули доступа к внешним ресурсам.

Модуль представлений Presentation.attrib включает все определенные выше группы модули атрибутов.

3.1.5.1. Общие модули атрибутов

В группу общих модулей атрибутов SVG входят следующие модули:

  •  модуль атрибутов ядра Core.attrib (Core Attribute Module);
  •  модуль условной обработки Conditional.attrib (Conditional Processing Module);
  •  модуль стилей Style.attrib (Style Module);
  •  модуль контейнерных атрибутов Container.attrib (Container Attribute Module);
  •  модуль атрибутов области просмотра Viewport.attrib (Viewport Attribute Module).

Модуль атрибутов ядра Core.attrib содержит следующие атрибуты:

  •  idопределяет уникальный идентификатор элемента;
  •  xml:baseопределяет базовый URI для документа;
  •  xml:lang – определяет язык документа;
  •  xml:space – определяет обработку пробельных символов в документе.

Модуль условной обработки Conditional.attrib содержит три атрибута: requiredFeatures, requiredExtensions и systemLanguage. Если значение атрибута равно true, то элемент, в котором задан атрибут, обрабатывается пользовательским агентом, иначе элемент и все вложенные в него элементы пропускаются. По умолчанию, значение этих атрибутов равно true.

Значение атрибута содержит разделенный пробелами список характеристик реализации пользовательского агента. Элемент списка для SVG 1.1 имеет следующий вид:

http://www.w3.org/TR/SVG11/feature#наименование-характеристики 

где наименование-характеристики задает название модуля, атрибута, элемента или свойства, например:

http://www.w3.org/TR/SVG11/feature#Style

проверяет, реализует ли пользовательский агент стили SVG.

Для SVG 1.0 могут быть заданы следующие характеристики: "org.w3c.svg" (поддержка SVG), "org.w3c.svg.static" (поддержка статических элементов SVG), "org.w3c.svg.animation" (поддержка анимации), "org.w3c.svg.dynamic" или "org.w3c.dom.svg" (поддержка DOM),  "org.w3c.dom.svg.static" (поддержка статических элементов DOM SVG), "org.w3c.dom.svg.animation" (поддержка анимации) или  "org.w3c.dom.svg.dynamic" (поддержка динамического DOM SVG).

Если все указанные в списке характеристики поддерживаются пользовательским агентом, то атрибут устанавливается в "true", а если хотя бы одна характеристика в списке не реализована, то атрибут устанавливается в "false".

Атрибут requiredExtensions определяет список необходимых расширений языка. Элементами списка являются URI, идентифицирующие требуемые расширения, например:

"http://example.org/SVGExtensionXYZ/1.0".

Если элементы списка содержат пробелы, эти элементы должны быть заключены в одиночные апострофы. Если все указанные в списке расширения поддерживаются пользовательским агентом, то атрибут устанавливается в true, а если хотя бы одно из указанных в списке расширений  не реализовано, то атрибут устанавливается в "false".

Атрибут systemLanguage определяет разделенный запятыми список кодов языков, например, "ru" или "en-us". Атрибут устанавливается в "true", если один из языков, указанных в списке, совпадает с языком, указанным в предпочтениях пользователя, и устанавливается в "false" в противном случае.

Модуль стилей Style.attrib определяет два атрибута стилей: style и class. Эти атрибуты определяются также, как в HTML: атрибут style содержит список используемых для данного элемента свойств стилей CSS2, а атрибут class – список используемых в элементе классов стилей (классы стилей определяются в элементе style SVG).

Модуль контейнерных атрибутов Container.attrib включает атрибут enable-background, обеспечивающий доступ к фоновому изображению.   Этот атрибут может иметь одно из следующих значений:

  •  "new – включает возможность доступа к фоновому изображению потомков текущего элемента, а также установку нового холста для фонового изображения; для этого значения могут быть также заданы (через пробелы) координаты x, y, ширина и высота подобласти, в которой разрешен доступ к фоновому изображению;
  •  "accumulate" – все графические элементы в текущем элементе SVG выводятся на холсте фонового изображения родительского элемента (значение по умолчанию);
  •  "inherit" – значение атрибута наследуется из родительского элемента.

Модуль атрибутов области просмотра Viewport.attrib включает два позаимствованных из CSS2 свойства: clip для обрезания изображения и overflow для определения вывода изображения, если его размеры больше области просмотра.

3.1.5.2. Модуль текста

Модуль текста (Text Module) включает наборы Text.attrib, TextContent.attrib и Font.attrib. Набор Text.attrib содержит позаимствованный из XSL атрибут writing-mode, определяющий направление письма. Набор TextContent.attrib определяет TextContent.attrib позаимствованные из CSS2 и XSL атрибуты alignment-baseline, baseline-shift, direction, dominant-baseline, glyph-orientation-horizontal, glyph-orientation-vertical, kerning, letter-spacing, text-anchor, text-decoration, unicode-bidi и word-spacing. Набор определяет также позаимствованные из CSS2 и XSL атрибуты font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant и font-weight.

3.1.5.3. Графические модули

В SVG определены следующие графические модули атрибутов:

  •  модуль цвета и раскраски Paint.attrib (Paint Attribute Module);
  •  модуль атрибутов прозрачности Opacity.attrib (Opacity Attribute Module);
  •  модуль графических атрибутов Graphics.attrib (Graphics Attribute Module);
  •  модуль маркера Marker.attrib (Marker Module);
  •  модуль градиента Gradient.attrib (Gradient Module);
  •  модуль клипа Clip.attrib (Clip Module);
  •  модуль маски Mask.attrib (Mask Module);
  •  модуль фильтра Filter.attrib (Filter Module);
  •  модуль цветового фильтра FilterColor.attrib (Filter Color Module).

Модуль цвета и раскраски Paint.attrib включает атрибуты color, fill, fill-rule, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-dasharray, stroke-dashoffset, color-interpolation и color-rendering. Атрибут color определяет текущий цвет для атрибутов, значением которых являются данные типа раскраска (атрибут fill для заполнения фигуры и атрибут stroke для закраски контура фигуры). Атрибут fill-rule определяет алгоритм закраски фигуры и может иметь либо значение "nonzero", либо значение "evenodd".

Атрибут stroke-width, значением которого является данное типа длина, определяет ширину контура.

Атрибут stroke-linecap определяет форму фигуры на концах открытого контура и может иметь значения "butt" (значение по умолчанию), "round" или "square".

Атрибут stroke-linejoin определяет форму фигуры при соединении контуров и может иметь значения "miter" (значение по умолчанию), "round" или.

Атрибут stroke-miterlimit используется, когда два сегмента соединяются под острым углом и атрибут stroke-linejoin имеет значение "miter". Значение этого атрибута задает ограничение на отношение длины пересечения к ширине контура (по умолчанию это значение равно "4"). Если это ограничения превышено, то соединение преобразуется в соединение типа "bevel".

Атрибут stroke-dasharray задает шаблон длин штрихов и промежутков между штрихами при заполнении контура штрихами, например, значение "5px 2px" задает длину штриха 5 пикселей и промежутка между штрихами 2 пикселя. Значение атрибута "none" задает отсутствие штриховки контура (это значение по умолчанию).

Атрибут stroke-dashoffset определяет расстояние (данное типа длина), на котором выполняется штриховка (по умолчанию это значение равно "0").

Атрибут color-interpolation задает пространство цветов для градиентной интерполяции и цветовой анимации и может иметь одно из следующих значений: "sRGB" – выполнение цветовой интерполяции в цветовом пространстве  sRGB (значение по умолчанию), "linearRGB" – выполнение цветовой интерполяции в линейном цветовом пространстве  sRGB, "auto" – пользовательский агент сам выбирает пространство цветов для интерполяции.

Атрибут color-rendering задает, как будет выполняться цветовая интерполяция и может иметь одно из следующих значений: "optimizeSpeed" – оптимизация по скорости, "optimizeQuality" – оптимизация по качеству, "auto" – способ оптимизации выбирает пользовательский агент.

Модуль атрибутов прозрачности Opacity.attrib содержит три атрибута: opacity и fill-opacity. Атрибут opacity задает прозрачность объекта в виде числа в диапазоне от 0 (прозрачный) до 1 (непрозрачный) (значение по умолчанию равно "1.0"). Атрибуты stroke-opacity и fill-opacity задают ту же характеристику отдельно для контура объекта и содержимого объекта.

Модуль графических атрибутов Graphics.attrib задает графические атрибуты объекта: display, image-rendering, pointer-events, shape-rendering, text-rendering и visibility.

Атрибут image-rendering задает, как будет выводиться изображение и может иметь одно из следующих значений: "optimizeSpeed" – оптимизация по скорости, "optimizeQuality" – оптимизация по качеству, "auto" – способ оптимизации выбирает пользовательский агент.

Атрибут shape-rendering задает, как будет выводиться контур изображения и может иметь одно из следующих значений: "optimizeSpeed" – оптимизация по скорости, "crispEdges" – оптимизация по различимости контура по отношению к фону, "geometricPrecision" – оптимизация по геометрической точности отображения контура, "auto" – способ оптимизации выбирает пользовательский агент.

Атрибут shape-rendering задает, как будет выводиться текст и может иметь одно из следующих значений: "optimizeSpeed" – оптимизация по скорости, "optimizeLegibility" – оптимизация по четкости текста, "geometricPrecision" – оптимизация по геометрической точности отображения текста, "auto" – способ оптимизации выбирает пользовательский агент.

Атрибуты display и visibility позаимствованы из CSS2. Атрибут display задает тип выводимого элемента (по умолчанию "inline" – строковый тип), а атрибут visibility – видимость элемента (по умолчанию "visible" – видимый).

Атрибут pointer-events определяет, при каких условиях может быть мишенью для события указателя. Значения "visiblePainted" (значение по умолчанию), "visibleFill", "visibleStroke" и "visible" определяют, что элемент может быть мишенью события, когда значение свойства visibility равно "visible", и указатель находится соответственно над областью раскраски, областью заполнения, контуром или любой точкой элемента. Значения "painted", "fill", "stroke" и "all" определяют те же условия, но независимо от значения свойства visibility. Значение "none" задает, что элемент не может быть мишенью события.

Модуль маркера Marker.attrib содержит атрибуты marker-start, marker-mid и marker-end, определяющие положение маркера в элементе (в начале, в середине или в конце). Значением этих атрибутов может либо URI элемента маркера, либо "none" – маркер не выводится (это значение по умолчанию).

Модуль градиента Gradient.attrib содержит атрибуты stop-color и stop-opacity определяющие цвет и прозрачность при завершении градиента. Для атрибута stop-color может быть задано либо значения "currentColor", либо значение цвета (по умолчанию значение этого атрибута равно "black"), а для атрибута stop-opacity – значение прозрачности в диапазоне от 0 до 1 (по умолчанию  "1").

Модуль клипа Clip.attrib содержит атрибуты clip-path и clip-rule, определяющие  Значением атрибута clip-path может либо URI контура выреза, либо "none" – клипирование не выполняется (это значение по умолчанию). Атрибут clip-rule имеет те же значения, что и атрибут fill-rule в модуле Paint.attrib.

Модуль маски Mask.attrib содержит единственный атрибут mask. Значением этого атрибута может либо URI графического объекта, используемого в качестве маски, либо "none" – маскирование не выполняется (это значение по умолчанию).

Модуль фильтра Filter.attrib содержит атрибут filter.  Значением этого атрибута может либо URI элемента filter, используемого в качестве фильтра для данного элемента, либо "none" – фильтр не используется (это значение по умолчанию).

Модуль цветового фильтра FilterColor.attrib содержит атрибут color-interpolation-filters, определяющий пространство цветов для операций над изображениями, выполняемыми с помощью фильтров. Этот атрибут те же значения, что и атрибут в модуле Paint.attrib.

3.1.5.4. Модули событий

В состав модулей событий SVG входят модуль атрибутов событий документа DocumentEvents.attrib (Document Events Attribute Module) и модуль атрибутов событий для графических элементов GraphicalEvents.attrib (Graphical Element Events Attribute Module), а также модуль курсора Cursor.attrib (Cursor Module).

Модуль атрибутов событий документа DocumentEvents.attrib содержит атрибуты onunload, onabort, onerror, onresize, onscroll и onzoom., т.е. соответственно при загрузке, аварийном завершении, при ошибке, при изменении размера, при прокрутке и при увеличении или уменьшении.

Модуль атрибутов событий для графических элементов GraphicalEvents.attrib содержит атрибуты onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout и onload, определяющие соответственно события при приобретении или потере фокуса, активации элемента, щелчке мышью, нажатии или отпускании клавиши мыши, проведении указателем мыши над элементом, перемещении указателя мыши, выходе указателя мыши за пределы элемента и загрузке элемента. Значением этих атрибутов также является вызов функции JavaScript.

Модуль курсора Cursor.attrib содержит атрибут cursor, определяющий форму курсора (аналогичен свойству cursor в CSS2).

3.1.5.5. Модули доступа к внешним ресурсам

К модулям доступа к внешним ресурсам SVG относятся следующие модули: модуль атрибутов XLink XLinkEmbed.attrib (XLink Embedded Attribute Module) и модуль атрибутов необходимых внешних ресурсов  External.attrib (ExternalResourcesRequired Attribute Module).

Модуль атрибутов XLink XLinkEmbed.attrib содержит атрибуты xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show и xlink:actuate. Атрибут xlink:type определяет тип ссылки и может иметь в SVG только значение "simple" (простые ссылки). Атрибуты xlink:href ,  xlink:role и xlink:arcrole определяют URI объекта ссылки, описания (роли) ресурса и описания дуги. Атрибут xlink:title определяет строку, в котором содержится описание  ресурса. Атрибут показывает способ представления ссылки: значение "new" для нового окна и значение "replace" – для замещения окна (значение по умолчанию). Атрибут определяет режим актуализации ссылки и может иметь одно из двух значений: "onRequest" – по запросу (например, при щелчке мыши) (значение по умолчанию) и "onLoad" – при загрузке документа.

Модуль атрибутов необходимых внешних ресурсов  External.attrib содержит атрибут externalResourcesRequired., определяющий необходимость использования внешних ресурсов. Значение "true" определяет, что внешние ресурсы для текущего документа являются необходимыми, значение "false" – ресурсы не являются необходимыми (это значение по умолчанию).  

3.1.5.6. Атрибут transform

Для многих элементов SVG можно задавать атрибут transform. Значением этого атрибута является данное типа список-преобразований, содержащее определения преобразований, выполняемых над элементом, в порядке, определяемом списком. В SVG доступны следующие определения преобразований:

  •  matrix(a b c d e f) – определяет преобразование в форме матрицы преобразования из шести значений;
  •  translate(tx [ty]) – определяет перемещение на величину tx по оси x и ty по оси y (если ty не задано, оно предполагается равным 0);  
  •  scale(sx [sy]) – определяет операцию масштабирования на величину sx по оси x и величину sy по оси y (если sy не задано, оно предполагается равным sx);
  •  rotate(угол-вращения [cx cy]) – определяет вращение на угол-вращения вокруг заданной точки (если не заданы cx и cy, вращение выполняется относительно начала пользовательских координат);
  •  skewX(угол-наклона) – определяет  преобразование наклона вдоль оси x;
  •  skewY(угол-наклона) – определяет  преобразование наклона вдоль оси y.  

Все значения в преобразованиях являются данными типа число.

3.1.6. Элемент svg

Фрагмент документа SVG состоит из любого числа элементов SVG, содержавшихся внутри элемента svg.

Фрагмент документа SVG может использоваться как отдельный файл или ресурс, тогда он называется документом SVG, или может быть встроен в  родительский документ XML.

Элементы svg могут быть вложенными, т.е. один элемент svg может находиться внутри другого элемента svg (обычно это используется, чтобы изменить область вывода).

В элементе svg может быть определен элемент xmlns без указания префикса пространства имен. В этом случае в содержимом можно указывать элементы без префикса имен, например:

<svg xmlns="http://www.w3.org/2000/svg"...>

 <rect .../>

</svg>.

Если элемент svg задан с префиксом (обычно svg:), то все элементы содержимого должны иметь этот префикс, например:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"...>

 <svg:rect .../>

</svg:svg>.

Элемент svg имеет следующий синтаксис:

<svg 

 атрибуты модуля Presentation.attrib

 xmlns [:префикс] = "имя-ресурса"

 version = "1.0 | 1.1"

 baseProfile = имя-профиля

 x = "координата"

 y = "координата"

 width = "длина"

 height = "длина"

 preserveAspectRatio = "[defer] выравнивание [режим]"

 viewBox = "координата координата длина длина"

 zoomAndPan = "magnify | disable"

contentScriptType = "язык-сценариев"

contentStyleType = "язык-таблиц-стилей">

 <!-- Содержимое -->

</svg>.

Первый атрибут определяет пространство имен для SVG, как было показано выше, а второй определяет версию языка. Третий атрибут определяет минимальный профиль языка SVG, который необходим для корректного вывода содержимого (по умолчанию значение этого атрибута равно "none"). Атрибуты x и y задают координаты левого верхнего угла прямоугольной области (в самом внешнем элементе svg эти координаты не имеют смысла), в которую помещается содержимое элемента, а width и height задают ширину и высоту этой области.

Атрибут preserveAspectRatio (используется совместно с атрибутом viewBox) определяет режим масштабирования (с сохранением отношения ширины к высоте или без сохранения отношения). Если значение preserveAspectRatio для элемента image начинается с defer (отсрочить), то используется значение атрибута preserveAspectRatio того элемента, но который есть ссылка в данном элементе, иначе параметр defer игнорируется. Параметр выравнивание в атрибуте задает режим выравнивания по осям x и y и может иметь одно из следующих значений: "none", "xMinYMin", "xMidYMin", "xMaxYMin", "xMinYMid", "xMidYMid", "xMaxYMid", "xMinYMax", "xMidYMax" и "xMaxYMax". Первое значение задает масштабирование без сохранения отношения, остальные значение задают различные режимы сохранения отношения (если задано Min, Mid или Max, то берется соответственно самое маленькое, среднее или самое большое значение порта просмотра по координате x или y). Параметр режим в атрибуте может иметь следующие значения: "meet" (отношение сохраняется, весь элемент виден в порту просмотра) или "slice" (отношение сохраняется, но, возможно, не весь элемент будет виден в порту просмотра).

Атрибут viewBox определяет границы порта просмотра, установленные данным элементом с учетом значения атрибута preserveAspectRatio. Значениями этого атрибута являются координаты x и y левого верхнего угла, а также ширина и высота порта просмотра.

Атрибут zoomAndPan задает возможность увеличения пользователем фрагмента SVG (значение "magnify"), либо отключает возможность увеличение (значение "disable").  

Атрибут contentScriptType определяет язык сценариев по умолчанию для данного документа (значение по умолчанию для этого атрибута равно "text/ecmascript", т.е. язык сценариев, удовлетворяющий спецификации ECMA, в частности JavaScript).

Атрибут contentStyleType определяет язык таблиц стилей по умолчанию для данного документа (значение по умолчанию для этого атрибута равно "text/css").

Элементу svg соответствуют два элемента DOM SVG: SVGDocument и  SVGSVGElement. Первый интерфейс используется для самого внешнего элемента svg в отдельном файле SVG, а в остальных случаях используется второй интерфейс. В случае, если документ SVG вставлен в другой документ (например, документ XHTML) по ссылке, для получения содержимого документа SVG можно использовать метод getSVGDocument() интерфейса GetSVGDocument.

3.1.7. Базовые фигуры SVG

В SVG определены следующие базовые фигуры: прямоугольник (элемент rect), круг (элемент circle), эллипс (элемент ellipse), линия (элемент line), ломаная линия (элемент polyline) и многоугольник (элемент polygon). Для всех элементов можно использовать следующие модули атрибутов: Core.attrib, Conditional.attrib, Style.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib и External.attrib.

Для элементов базовых фигур определены интерфейсы SVGRectElement, SVGCircleElement, SVGEllipseElement, SVGLineElement,  SVGPolylineElement и SVGPolygonElement, атрибутами которых являются атрибуты соответствующих элементов. Интерфейс SVGAnimatedPoints используется при анимировании ломаных линий и многоугольников.

3.1.7.1. Элемент rect

Элемент rect для прямоугольника имеет следующий синтаксис:

<rect 

 общие модули атрибутов

 x = "координата"

 y = "координата"

 width = "длина"

 height = "длина"

 rx = "длина"

 ry = "длина"

 transform = "список-преобразований"/>.

Атрибуты x и y задают координаты левого верхнего угла прямоугольника, а width и height задают ширину и высоту фигуры. Для закругленных прямоугольников атрибуты rx и ry задают оси x и y эллипса на закруглениях сторон прямоугольника (если задано только rx, значение ry считается равным значению rx).

3.1.7.2. Элемент circle

Элемент circle для круга имеет следующий синтаксис:

<circle 

 общие модули атрибутов

 cx = "координата"

 cy = "координата"

 r = "длина"

 transform = "список-преобразований"/>.

Атрибуты cx и cy задают координаты центра круга, а r – радиус круга.

3.1.7.3. Элемент ellipse

Элемент ellipse для эллипса имеет следующий синтаксис:

<ellipse 

 общие модули атрибутов

 cx = "координата"

 cy = "координата"

 rx = "длина"

 ry = "длина"

 transform = "список-преобразований"/>.

Атрибуты cx и cy задают координаты центра эллипса, а rx и ry – радиусы эллипса по осям x и y.

3.1.7.4. Элемент line

Элемент line для линии имеет следующий синтаксис:

<line 

 общие модули атрибутов

 x1 = "координата"

 y1 = "координата"

 x2 = "длина"

 y2 = "длина"

 transform = "список-преобразований"/>.

Атрибуты x1 и y1 задают координаты начала линии, а x2 и y2 – координаты окончания линии.

3.1.7.5. Элемент polyline

Элемент polyline для ломаной линии имеет следующий синтаксис:

<polyline 

 общие модули атрибутов

 points = "список-координат"

 transform = "список-преобразований"/>.

Атрибут points задает разделенный пробелами список пар координат x и y точек, образующих ломаную линию (разделителем между координатами x и y является запятая). Если количество элементов в списке нечетное, фиксируется ошибка.  

3.1.7.6. Элемент polygon

Элемент polygon для многоугольника имеет следующий синтаксис:

<polygon 

 общие модули атрибутов

 points = "список-координат"

 transform = "список-преобразований"/>.

Атрибут points задается таким же образом, что и для ломаной линии, однако при выводе точки с первыми координатами в списке и последними координатами в списке соединяются между собой.  

3.1.8. Элементы структуры SVG

3.1.8.1. Элемент g

Элемент g используется для помещения связанных между собой элементов SVG в контейнер (обычно для повторного использования или анимации). Атрибутами этого элемента могут быть атрибуты модуля Presentation.attrib и описанный ранее атрибут преобразования transform.

Здесь оба прямоугольника, заданные в контейнере будут закрашены синим цветом.

Элементу g в DOM SVG соответствует интерфейс  SVGGElement.  

3.1.8.2. Элементы desc и title

Любой контейнерный или графический элемент SVG можно снабдить элементами  desc и/или title, содержащими текстовые описания. Для одиночного документа SVG должен быть обязательно задан элемент title (его содержимое, так же как содержимое дескриптора <title> в HTML обычно выводится в строке управления браузера).

3.1.8.3. Ссылки и элементы defs и use

В SVG широко используются ссылки URI на другие объекты. Язык SVG поддерживает два типа ссылок на другие объекты:

  •  локальные ссылки (на фрагмент того же документа), не содержащие абсолютные или относительные URI, в виде #идентификатор или #xpointer(идентификатор);
  •  нелокальные ссылки, содержащие абсолютное или относительное URI, а также, возможно, ссылку на фрагмент документа.   

Элементы, на которые имеются ссылки, рекомендуется заключать в элемент-контейнер defs.

Для элемента defs, так же как и для элемента g, определены атрибуты модуля Presentation.attrib и атрибут transform.

Элемент use ссылается на другой графический элемент и указывает, что графическое содержимое этого элемента вставляется в данное место документа.  Для элемента use определены атрибуты модуля Presentation.attrib, а также атрибуты transform, x, y, width и height.

Элементам defs и use в DOM SVG соответствуют интерфейсы SVGDefsElement и SVGUseElement. Кроме того, для каждого элемента, определенного внутри элемента use,  поддерживается интерфейс SVGElementInstance, а для всех элементов внутри use – коллекция  SVGElementInstanceList.

3.1.8.4. Элемент symbol

Элемент symbol применяется для графических объектов, которые неоднократно используются в документе. Ссылка на элемент symbol выполняется с помощью элемента use.

Для элемента symbol определены атрибуты модуля Presentation.attrib, а также атрибуты viewBox и PreserveAspectRatio.

Использование элемента symbol имеет следующие отличия от использования элемента g:

  •  элемент symbol сам не выводится, а выводится только при ссылке на него в элементе use;
  •  элемент имеет атрибуты viewBox и PreserveAspectRatio, задающие масштабирование внутри порта просмотра, заданного в атрибуте use.

Элементу symbol в DOM SVG соответствует интерфейс SVGSymbolElement.

3.1.8.5. Элемент image

Элемент image указывает, что в прямоугольную область будет вставлено содержимое внешнего файла. Для этого элемента определены атрибуты модулей    Core.attrib, Conditional.attrib, Style.attrib, Viewport.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, ColorProfile.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib, XLinkEmbed.attrib и External.attrib, а также атрибуты  transform, x, y, width, height и PreserveAspectRatio.

3.1.8.6. Условная обработка

Для условной обработки в SVG используется элемент switch и атрибуты рассмотренного ранее модуля Conditional.attrib: requiredFeatures, requiredExtensions и systemLanguage. Для элемента switch определены также атрибуты модуля Presentation.attrib, а также атрибут transform.

Элемент switch проверяет значения заданных атрибутов requiredFeatures, requiredExtensions и systemLanguage в своих дочерних элементах (если атрибут не задан, его значением по умолчанию является true). Затем элемент switch обрабатывает и выводит свой первый дочерний элемент, для которого все заданные  атрибуты равны true. Если дочерний элемент является контейнером, например, g, проверка выполняется для всего контейнера и все элементы контейнера либо обрабатываются, либо пропускаются. Все последующие элементы пропускаются.

Элементу switch в DOM SVG соответствует интерфейс SVGSwitchElement.

3.1.9. Стили SVG

Для описания характеристик выводимого документа в SVG часто используются свойства стилей. Многие свойства стилей SVG позаимствованы из CSS2 (кроме того, практически все эти свойства используются также в XSL). Часть свойств, связанных с текстом (например, свойства связанные с базовой линией), позаимствована из XSL. Рассмотренные выше графические свойства определены только для SVG.

Свойства стилей могут быть присвоены элементам SVG двумя способами:

  •  с помощью атрибутов модуля Presentation.attrib;
  •  с помощью таблиц стилей и свойств CSS.

Использование атрибутов модуля Presentation.attrib было рассмотрено выше.

Таблицы стилей и свойства CSS можно использовать в документах SVG тремя способами:

  •  с помощью внешних таблиц стилей;
  •  с помощью таблиц стилей, встроенных в документ SVG;
  •  с помощью стилей, встроенных в элемент SVG.

Поскольку документ SVG является одновременно и документом XML, в него можно вставить внешнюю таблицу стилей, используя рассмотренную ранее инструкцию по обработке xml-stylesheet.

Для встраивания таблицы стилей в документ SVG используется элемент style. Этот элемент имеет обязательный параметр type, задающий тип таблицы стилей, например "text/css". Кроме этого, могут быть заданы атрибуты модуля Core.attrib, а также атрибут media, задающий среду вывода (значение по умолчанию – "all", т.е. любая среда), а также атрибут title, определяющий наименование таблицы стилей. Содержимое элемента style задается как элемент CDATA.

Для задания встроенных стилей в элементе используются атрибуты class и style описанного ранее модуля Style.attrib. Эти атрибуты действуют аналогично атрибутам class и style в HTML.

Пример использования атрибута style:

<rect x="200" y="100" width="600" height="300"

 style="fill: red; stroke: blue; stroke-width: 3"/>.

Этот пример выводит тот же результат, что и предыдущий пример.

Атрибуту style соответствует элемент DOM SVG с именем SVGStyleElement с атрибутами, соответствующими атрибутам элемента style.

3.1.10. Контуры в SVG 

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

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

Контур определяется в SVG с использованием элемента path. Для этого элемента определены атрибуты наборов Core.attrib, Conditional.attrib, Style.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Marker.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib, External.attrib и атрибут transform.

Обязательный атрибут d задает данные для контура, а атрибут pathLength задает рассчитанную автором длину контура.

Элементу path в SVG DOM соответствует интерфейс SVGPathElement.

Данные для контура задаются как префиксы команд перемещения, линии и т.д., за которыми следуют координаты, используемые в данной команде. Элементы данных отделяются друг от друга пробелами. Если в данных задается две и более одинаковых следующих друг за другом команд, второй и последующий префиксы команд можно не указывать. При рисовании контура могут использоваться как абсолютные координаты (относительно родительского элемента svg), так и относительные координаты (относительно точки начала контура). Базовым интерфейсом для отдельной команды в атрибуте d является интерфейс SVGPathSeg. Все данные атрибута d определяются с помощью интерфейса SVGPathSegList, содержащего отдельные сегменты данных (каждый сегмент содержит префикс и параметры команды).

В SVG определены следующие команды перемещения (moveto): M – для  абсолютных координат и m – для абсолютных координат. Следующие за префиксом пара чисел задают координаты x и y точек перемещения. Если первой командой в атрибуте d является команда перемещения, то независимо от префикса, первая пара координат в этой команде считается абсолютными координатами, поскольку они задают точку начала контура. Для команд перемещения определены интерфейсы SVGPathSegMovetoAbs и SVGPathSegMovetoRel.

Для рисования линий (от текущей точки до заданной точки) в SVG определены следующие команды: L – рисование линии в абсолютных координатах, l – рисование линии в относительных координатах, H – рисование горизонтальной линии в абсолютных координатах, h – рисование горизонтальной линии в относительных координатах, V – рисование вертикальной линии в абсолютных координатах, v – рисование вертикальной линии в относительных координатах. За командами L и l следует пара чисел, задающие координаты x и y окончания линии, а за командами H (h) и V (v) задается одно число координата x или y окончания линии. Для команд рисования линий в SVG DOM определены интерфейсы SVGPathSegLinetoAbs, SVGPathSegLinetoRel, SVGPathSegLinetoHorizontalAbs, SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoVerticalAbs и SVGPathSegLinetoVerticalRel.

Команды Z или z (без параметров) закрывают контур с помощью рисования прямой линии от текущей точки к начальной точке контура. Для команд закрытия контура определен интерфейс SVGPathSegClosePath.

В SVG определено два типа команд для рисования кривых: команды для рисования кривых Безье третьего порядка и команды для рисования кривых Безье второго порядка.

Команды C (для абсолютных координат) и c (для относительных координат) рисуют кривые Безье третьего порядка от текущей точки, используя первую пару параметров как координаты точки управления в начале кривой, вторую пару – как координаты точки управления в конце кривой и третью пару – как координаты точки окончания кривой. Для рисования полиноминальной кривой Безье могут быть заданы несколько наборов координат.

Команды S (для абсолютных координат) и s (для относительных координат) рисуют сглаженные кривые Безье третьего порядка от текущей точки. Для таких кривых предполагается, что первая точка управления кривой является отражением последней контрольной точкой, и поэтому в команде задаются только координаты точки управления в конце кривой и координаты точки окончания кривой. Для рисования полиноминальной кривой Безье могут быть заданы несколько наборов координат. Если для команд S (s) не было предыдущей команды или предыдущая команда – не C (c) или S (s), то первая точка управления совпадает с текущей точки. Для рисования полиноминальной кривой Безье также могут быть заданы несколько наборов координат.

Для команд вывода кривых третьего порядка определены интерфейсы SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicRel, SVGPathSegCurvetoCubicSmoothAbs и SVGPathSegCurvetoCubicSmoothRel.

Команды Q (для абсолютных координат) и q (для относительных координат) рисуют кривые Безье второго порядка от текущей точки, используя первую пару параметров как координаты точки управления, а  вторую пару – как координаты точки окончания кривой.

Команды T (для абсолютных координат) и t (для относительных координат) рисуют сглаженные кривые Безье второго порядка от текущей точки. В команде задаются только координаты точки окончания кривой. Если для команд T (t) не было предыдущей команды или предыдущая команда – не Q (q) или T (t), то первая точка управления совпадает с текущей точки.

Для рисования полиноминальной кривой Безье в командах Q (q) и T (t)  также могут быть заданы несколько наборов координат.

Для команд вывода кривых второго порядка определены интерфейсы SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticRel, SVGPathSegCurvetoQuadraticSmoothAbs и SVGPathSegCurvetoQuadraticSmoothRel.  

Последнюю группу команд составляют команды рисования эллиптических кривых: A – для абсолютных координат и a – для относительных координат. Первая пара параметров команды определяет радиусы эллипса по осям x и y. Третий параметр задает  угол поворота дуги относительно текущих координат. Четвертый параметр – флажок-большой-дуги показывает, какая из возможных дуг будет нарисована: большая (значение "1") или меньшая (значение "0"). Пятый параметр – флажок-направления показывает, какая из возможных дуг будет нарисована: по направлению положительного угла (значение "1") или по направлению отрицательного угла (значение "0").

Выводимые дуги для разных значений флажков приведены на рисунке:

Для команд рисования эллиптических дуг определены интерфейсы SVGPathSegArcAbs и SVGPathSegArcRel.

3.1.11. Представление текста в SVG

В XML текстовое содержание определяется как последовательность символов, где каждый символ  определен своим кодом Unicode. С другой стороны, шрифты состоят из набора глифов (glyphs) и другой связанной информации, такой, как таблицы шрифтов.  Глиф является формой представления одного или более символов (или, в некоторых случаях, частей символов).  Каждый глиф состоит из идентификатора (строки или числа) и инструкций по рисованию данного глифа для его вывода в ту или иную среду (например, на экран компьютера  или на печать).

Для европейских языков обычно существует взаимно однозначное соответствие между символом и глифом. Однако в некоторых языках такого соответствия нет. Например, в арабском языке один и тот же символ может быть представлен разными глифами, в зависимости от того находится ли он в начале, в конце или в середине слова. Другим примером является вывод буквы ё как диакритического символа "¨" и символа "е", т.е. в данном случае один символ представлен двумя глифами.

Геометрические характеристики шрифта выражены в системе координат, основанной на окне em (высота буквы M шрифта).

К сожалению, при выводе текста кириллицы (как и других не западноевропейских языков) в Adobe Viewer необходимо задавать символы текста в виде сущностей, значениями которых являются коды Unicode данных символов, например, слово символ задается в документе SVG как &#x441;&#x438;&#x43C;&#x432;&#43E;&#43B;.

Основными элементами для вывода текста являются элементы text, tspan, tref и textPath. Для текстовых элементов определен родительский интерфейс SVGTextContentElement и дочерние элементы SVGTextElement, SVGTSpanElement, SVGTRefElement и SVGTextPathElement, соответствующие элементам text, tspan, tref и textPath.  

3.1.11.1. Элементы text и tspan

Элемент text задает графический элемент, содержащий текст. Символьные данные внутри элемента текст совместно с атрибутами и таблицами соответствия «символ-глиф» для шрифта определяют выводимые глифы. Для элемента text определены атрибуты модулей Core.attrib, Conditional.attrib, Style.attrib, Text.attrib, TextContent.attrib, Font.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib и External.attrib, а также атрибут преобразования transform.

Кроме этого, для элемента text определены атрибуты x, y, dx, dy, rotate, textLength и lengthAdjust.

В атрибутах x и y задаются координаты x и y первого символа текста. В этих атрибутах может быть задан список координат для каждого символа выводимого текста. По умолчанию значения атрибутов x и y равно "0".

Атрибуты dx и dy смещают позицию текущего текста по оси x или оси y на заданные величины (по умолчанию значения этих атрибутов также равны "0"), а атрибут rotate поворачивает текст на заданную величину.

Атрибут textLength задает вычисленную автором длину текста (если этот атрибут не задан, используется длина строки, вычисленная процессором SVG), а атрибут lengthAdjust задает тип подгонки текста для заданной автором длины текста. Значение "spacing" указывает на то, что подгонка текста выполняется только с помощью пробелов (это значение по умолчанию), а значение "spacingAndGlyphs" указывает, что подгонка выполняется и за счет пробелов и за счет сжатия или растяжения глифов.

Для изменения свойств текста и шрифтов в отдельных фрагментах символьной строки внутри элемента text используется элемент tspan. Этот элемент имеет те же атрибуты, что и элемент text, за исключением атрибутов модуля Text.attrib и атрибута transform.

3.1.11.2. Элемент tref

Содержимым элемента текст могут быть не только символьные данные, но и ссылка на другой элемент документа SVG, содержащего символьные данные. Такая ссылка выполняется с помощью элемента tref. Этот элемент имеет те же атрибуты, что и элемент tspan, а также атрибуты модуля XLink.attrib.  

3.1.11.3. Элемент textPath

Кроме вывода текста по прямой линии, в SVG можно выводить текст по контуру, заданному в элементе path. Это выполняется с помощью элемента textPath, включающего атрибут xlink:href со ссылкой на элемент path. Для элемента textPath определены атрибуты модулей Core.attrib, Conditional.attrib, Style.attrib, TextContent.attrib, Font.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib, XLink.attrib и External.attrib, а также атрибуты textLength, lengthAdjust, startOffset, method и spacing.

Атрибуты textLength и lengthAdjust имеют тот же смысл, что и для элемента text.

Атрибут startOffset задает смещение начала текста относительно начала контура (данное типа длина).

Атрибут method задает метод, по которому текст выводится вдоль контура. Значение "align" этого атрибута указывает, что текст выводится с использованием простого преобразования без сжатия или растягивания символов (это может привести к нежелательным эффектам, например, при выводе курсива). Более сложное преобразование выполняется, если указано значение "stretch". По умолчанию значение атрибута method равно "align".

Атрибут spacing указывает, как пользовательский агент должен определять расстояние между глифами. Значение "exact" определяет, что глифы должны выводиться в точном соответствии с правилами вывода глифов в SVG (это значение по умолчанию). Значение "auto" определяет, что агент должен использовать специальные алгоритмы при визуальном представлении текста.

3.1.12. Градиенты и шаблоны в SVG

3.1.12.1. Линейный градиент

Градиент – постепенный плавный переход вдоль заданного вектора от одного цвета к другому. Если градиент задан, то него можно ссылаться с использованием свойств fill или stroke в графическом элементе. Язык SVG обеспечивает два типа градиентов: линейный градиент или радиальный градиент.

Линейный градиент задается с помощью элемента linearGradient. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib, Gradient.attrib, XLink.attrib и External.attrib. Кроме этого, для элемента linearGradient могут быть заданы атрибуты x1, y1, x2,  y2,     gradientUnits, gradientTransform и spreadMethod.

Атрибуты x1, y1, x2 и y2 задают вектор градиента для линейного градиента (числа или проценты). Вектор градиента обеспечивает начальные и конечные точки, которым соответствует окончание градиента. По умолчанию значения координат равны "0%".

Атрибут gradientUnits определяет систему координат для атрибутов x1, y1, x2 и y2. Если значение этого атрибута равно "userSpaceOnUse", то координаты представляют значения в системе координат текущего пользователя во время ссылки на элемент linearGradient.  Если же значение атрибута gradientUnits равно "objectBoundingBox" (это значение по умолчанию), то пользовательская система координат устанавливается исходя из рамки элемента, к которому применяется градиент.  

Атрибут gradientTransform задает список дополнительных преобразований из координатной системы градиента в целевую координатную систему, определяемую атрибутом gradientUnits.

Атрибут spreadMethod указывает, что произойдет, если градиент начинается или заканчивается в пределах целевого прямоугольника. Атрибут может иметь одно из следующих значений: "pad" – концевые цвета градиента должны заполнить весь прямоугольник, "reflect" – повторять градиент шаблона от начала до конца, затем от конца до начала, затем снова  от начала до конца до тех пор, пока не заполнится весь прямоугольник и  "repeat" – повторять градиент шаблона от начала до конца до тех пор, пока не заполнится весь прямоугольник.

В элементе может быть также задан атрибут xlink:href для ссылки на другой элемент градиента.

Окончание вывода цветов, используемых в градиенте, определяется элементами stop, являющихся дочерними элементами элементов линейного или радиального градиентов. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib и Gradient.attrib. Кроме этого, для элемента stop должен быть задан атрибут offset, который указывает, где будет заканчиваться градиент. Значение этого атрибута может быть либо числом (обычно в диапазоне от 0 до 1) или в процентах (от 0% до 100%). Для линейного градиента значение этого атрибута указывает на положение вдоль вектора градиента.

Для элементов градиента определен базовый интерфейс SVGGradientElement. Дочерними интерфейсами этого интерфейса является интерфейс SVGLinearGradientElement для элемента linearGradient и интерфейс SVGStopElement для элемента stop.

3.1.12.2. Радиальный градиент

Радиальный градиент определяется с помощью элемента radialGradient. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib, Gradient.attrib, XLink.attrib и External.attrib, а также  определенные для элемента linearGradient атрибуты gradientUnits, gradientTransform и spreadMethod. Кроме этого, для элемента могут быть заданы атрибуты cx, cy, r,  fx и fy.

Атрибуты cx, cy и r определяют координаты x и y центра и радиус наибольшего круга для радиального градиента.

Атрибуты fx и fy определяют координаты x и y фокальной точки радиального градиента. Градиент выводится таким образом, что 0% окончания градиента соответствует фокальной точке. Если атрибуты не заданы, их значения совпадают соответственно со значениями cx и cy.

Для элемента radialGradient определен интерфейс SVGRadialGradientElement.

Элемент stop для радиального градиента определяет в атрибуте offset расстояние (в процентах) от фокальной точки до края самого большого круга.

Пример использования радиального градиента:

<defs>

    <radialGradient id="MyGradient"

gradientUnits="userSpaceOnUse"

         cx="400" cy="200" r="300" fx="400" fy="200">

        <stop offset="0%" stop-color="red" />

        <stop offset="50%" stop-color="blue" />

        <stop offset="100%" stop-color="red" />

    </radialGradient>

</defs>

<rect fill="url(#MyGradient)" stroke="black"

stroke-width="5" x="100" y="100"

width="600" height="200"/>.  

Выводимый прямоугольник будет иметь следующий вид:

3.1.12.3. Шаблоны

Шаблон используется для заполнения либо объекта, либо его контура с использованием заданного графического объекта, который может быть повторен через заданные интервалы по координатам x и y для покрытия окрашиваемой области.  На шаблон, так же как и на градиент, можно ссылаться с использованием свойств fill или stroke в графическом элементе.

Шаблон определяется с помощью элемента pattern. Для этого элемента можно задавать атрибуты модуля Presentation.attrib,  а также определенные ранее атрибуты viewBox и preserveAspectRatio. Кроме этого, для элемента pattern могут быть заданы атрибуты patternUnits, patternContentUnits и patternTransform.

Атрибуты x, y, width, height указывают, как будет размещаться шаблоны. Эти атрибуты представляют координаты и значения в пространстве координат, определенном комбинацией атрибутов patternUnits и patternTransform.

Атрибуты patternUnits и patternTransform действуют аналогично атрибутам gradientUnits и gradientTransform для элемента linearGradient.

Атрибут patternContentUnits определяет систему координат для содержимого элемента pattern. Он имеет те же значения и действует аналогично атрибуту gradientUnits для элемента linearGradient.

В качестве шаблона может быть использовано изображение. Для этого внутри элемента pattern помещается элемент image.

Для элемента pattern определен интерфейс SVGPatternElement.

3.1.13. Фильтры в SVG

Использование фильтров заключается в последовательном применении графических операций к исходному графическому объекту для получения результирующего графического объекта.

3.1.13.1. Элемент filter

Используемые фильтры определяются в элементе filter. Для применения фильтров в графическом или контейнерном элементе необходимо задать в свойстве или атрибуте filter этого элемента ссылку на элемент filter.

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

Для элемента filter можно задать атрибуты модуля Presentation.attrib, а также атрибуты x, y, width, height, filterRes, filterUnits  и primitiveUnits.

Атрибуты x, y, width и height задают прямоугольную область, для которой будут применяться фильтры. По умолчанию значения x и y равны "-10%", а значения width и height "120%".

Атрибут filterRes задает ширину и высоту промежуточных изображений в пикселях. По умолчанию, разрешение выбирает процессор SVG, исходя из размера изображения и разрешения экрана дисплея.

Атрибут filterUnits имеет те же значения и действует  аналогично атрибуту gradientUnits для элемента linearGradient. 

Атрибут primitiveUnits задает координатную систему для различных значений длины в примитивах фильтров и для атрибутов, определяющих область действия примитивов фильтров. Его значения и действия те же, что и для атрибута  gradientUnits для элемента linearGradient.

Для элемента filter в SVG DOM определен интерфейс SVGFilterElement.

Ниже приведен краткий обзор имеющихся в SVG фильтров-примитивов.

3.1.13.2. Фильтры для источников света

Для моделирования источников света в SVG определены следующие фильтры-примитивы: feDistantLight, fePointLight и feSpotLight.

Элемент feDistantLight моделирует удаленный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты azimuth и elevation, определяющие координаты источника соответственно в плоскости XY и YZ (по умолчанию значения этих атрибутов равны "0").

Элемент fePointLight моделирует точечный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты x, y и z, определяющие координаты источника в трехмерном пространстве (по умолчанию значения этих атрибутов равны "0").

Элемент feSpotLight моделирует точечный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent и limitingConeAngle.

Атрибуты x, y и z задают координаты источника в трехмерном пространстве (по умолчанию значения этих атрибутов равны "0").

Атрибуты pointsAtX, pointsAtY и pointsAtZ задают координаты точки, на которую направлен источник света (по умолчанию значения этих атрибутов равны "0").

Атрибут specularExponent задает числовое значение, управляющее фокусировкой источника света (по умолчанию значение этого атрибута равно "1").

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

Для элементов feDistantLight, fePointLight и feSpotLight в DOM SVG определены интерфейсы SVGFEDistantLightElement, SVGFEPointLightElement и SVGFESpotLightElement.

Элементы feDistantLight, fePointLight и feSpotLight не используются отдельно, а только как содержимое элементов feDiffuseLighting и feSpecularLighting.

Рассеивание (диффузия) источника света моделируется в SVG с помощью элемента feDiffuseLighting. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также атрибуты color-interpolation-filters, in, lighting-color, surfaceScale, diffuseConstant и kernelUnitLength.

Атрибут color-interpolation-filters задает выбор одной из двух разновидностей реализации модели RGB: модели sRGB (значение "sRGB") или модели линейного RGB (значение "linearRGB"). Атрибут может иметь также значение "auto", при котором пользовательский агент сам выбирает одну из двух моделей (это значение по умолчанию).

Атрибут может иметь одно из следующих значений: "SourceGraphic" – исходный графический элемент, "SourceAlpha" – исходный  графический элемент (только альфа-канал), "BackgroundImage" – фоновое изображение, "BackgroundAlpha" – фоновое изображение (только альфа-канал),  "FillPaint" – значение свойства fill элемента, для которого используется фильтр,  "StrokePaint" – значение свойства stroke элемента, для которого используется фильтр. Кроме того, может быть задана ссылка на один из предыдущих фильтров-примитивов. По умолчанию, значением атрибута in является значение этого же атрибута для предыдущего фильтра-примитива.

Атрибут lighting-color задает цвет источника света. Значением этого атрибута может быть либо цвет источника, либо "currentColor" – для источника, использующего текущий цвет. По умолчанию значение этого атрибута равно "white".

Атрибут surfaceScale задает высоту поверхности (по умолчанию значение этого атрибута равно "1").

Атрибут diffuseConstant задает константу диффузии (по умолчанию – "1").

Атрибут kernelUnitLength задает приращения dx и dy для вычисления поверхности источника (если dy не задано, оно предполагается равным dx). По умолчанию величины dx и dy предполагаются равными "1px".

Фильтр-примитив, моделирующий отражение света, реализован в SVG с помощью  элемента feSpecularLighting. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также атрибуты color-interpolation-filters, in, lighting-color, surfaceScale, specularConstant , specularExponent и kernelUnitLength.

Атрибуты color-interpolation-filters, in, lighting-color, surfaceScale и kernelUnitLength действуют аналогично соответствующим атрибутам элемента feDiffuseLighting.

Атрибут specularConstant задает константу отражения (по умолчанию – "1"), а атрибут specularExponent – экспоненту отражения (число в диапазоне от 1.0 до 128.0 – чем больше число, тем больше «сияет» изображение). По умолчанию значения обоих атрибутов равны "1".

Для элементов feDiffuseLighting и feSpecularLighting в SVG DOM определены интерфейсы SVGFEDiffuseLightingElement и SVGFESpecularLightingElement.

3.1.13.3. Фильтры смешивания изображений

Элемент feBlend реализует фильтр-примитив, объединяющий два изображения (на уровне пикселей) с использованием различных режимов смешивания. Помимо атрибутов модуля Core.attrib, для этого элемента можно задавать атрибуты x, y, width, height, mode, color-interpolation-filters, result, in и in2.

Атрибуты x, y, width и height задают прямоугольную область действия фильтра (по умолчанию значения атрибутов – "0%", а атрибутов – "100%").

Атрибут mode задает режим смешивания и может иметь одно из следующих значений: "normal" – нормальный режим (это значение по умолчанию), "multiply" – режим умножения, "screen" – режим экрана,  "darken" – режим затемнения и "lighten" –режим осветления.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting.  

Атрибуты in и in2 задают первое и второе смешиваемые изображения. Они действуют аналогично атрибуту in элемента feDiffuseLighting.

Атрибут result присваивает имя данному фильтру-примитиву. Если этот атрибут задан, то имя можно указать в атрибуте in в одном из следующих фильтров-примитивов в данном элементе filter. В противном случае, вывод данного фильтра может быть использован только в качестве ввода для следующего фильтра-примитива в данном элементе filter. 

Элемент feComposite реализует фильтр, выполняющий смешивание (по пикселям) двух входных изображений с использованием операций композиции или арифметических операций. Для этого элемента можно задавать атрибуты модуля Core.attrib,  а также атрибуты color-interpolation-filters, x, y, width, height, in, in2, result, operator, k1, k2, k3 и k4.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting, а атрибуты  x, y, width, height, in, in2 и result – тот же смысл, что и одноименные атрибуты элемента feBlend.

Атрибут operator задает операцию композиции над входными элементами и может иметь одно из следующих значений: "over" – операция «над» (значение по умолчанию),  "in" – операция «в»,  "out" – операция «вне»,  "atop" – операция «вершина», "xor" – операция «исключающее или» и "arithmetic" – арифметическая операция.

Если значение атрибута operator равно "arithmetic", то каждый пиксель  выходного изображения вычисляется по следующей формуле:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4,

где i1 и i2 – пиксели первого и второго входного изображения, а коэффициенты задаются в атрибутах k1, k2, k3 и k4. По умолчанию значения этих атрибутов равны "0".

Элемент feMerge реализует послойный вывод изображения. Слои задаются в дочерних элементах feMergeNode элемента feMerge.

Для элемента feMerge определены атрибуты модуля Core.attrib, а также описанные ранее атрибуты color-interpolation-filters, x, y, width, height, in и result. Для элемента также определены  атрибуты модуля Core.attrib и атрибут in, описывающий входное изображение для данного слоя. Первый элемент feMergeNode в элементе описывает самый нижний слой, а последний – самый верхний слой.

Для элементов feBlend, feComposite,  feMerge и feMergeNode в DOM SVG определены интерфейсы SVGFEBlendElement, SVGFECompositeElement, SVGFEMergeElement и SVGFEMergeNodeElement.

3.1.13.4. Фильтры задания и преобразования цветов

Преобразование цветов выполняется в SVG с помощью элемента feColorMatrix. Этот элемент выполняет следующее матричное преобразование: 

| R' |     | a00 a01 a02 a03 a04 |   | R |

| G' |     | a10 a11 a12 a13 a14 |   | G |

| B' |  =  | a20 a21 a22 a23 a24 | * | B |

| A' |     | a30 a31 a32 a33 a34 |   | A |

| 1  |     |  0   0   0   0   1  |   | 1 |

над значениями цветовых каналов и альфа-канала для каждого пикселя входного графического объекта для получения результирующего объекта.

Для элемента feColorMatrix можно задавать атрибуты модуля Core.attrib,  а также атрибуты color-interpolation-filters, x, y, width, height, in, result, type и values.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting, а атрибуты  x, y, width, height, in и result – тот же смысл, что и одноименные атрибуты элемента feBlend.

Атрибут type задает тип преобразования и может иметь одно из следующих значений (для цветовой модели HSL): "matrix" – должна задаваться полная матрица преобразований (все 20 значений),  "saturate" – должна задаваться насыщенность – S (одно число), "hueRotate" – должен  задаваться угол оттенка – H (одно число) и "luminanceToAlpha" – должна задаваться светимость L (числа не задаются). По умолчанию значение атрибута равно "matrix".

Атрибут values задает значение или значения для заданного в атрибуте type типа преобразования.

Фильтр, реализуемый элементом feComponentTransfer, преобразует каналы для графического объекта следующим образом:

R' = feFuncR(R)

G' = feFuncG(G)

B' = feFuncB(B)

A' = feFuncA(A)

для каждого пикселя исходного изображения. Такое преобразование позволяет отрегулировать яркость, контрастность и цветовой баланс изображения.

Для элемента можно задавать атрибуты модуля Core.attrib,  а также описанные ранее атрибуты color-interpolation-filters, x, y, width, height, in и result.

Содержимым элемента feComponentTransfer являются элементы feFuncR, feFuncG, feFuncB, и feFuncA, описывающие преобразования по цветовым каналам R, G, B и альфа-каналу. Помимо атрибутов модуля Core.attrib, для этих элементов задается обязательный атрибут type и необязательные атрибуты tableValues, slope, intercept, amplitude, exponent и offset.

Атрибут type определяет тип функции преобразования компонента и может иметь одно из следующих значений: "identity" – идентичное преобразование, "table" – табличное преобразование (список из n+1 значений для задания n диапазонов интерполяции), "discrete" – пошаговая функция (список шагов из n значений), "linear" – линейная интерполяция по формуле

C' = slope * C + intercept,

и "gamma" – интерполяция по формуле:

C' = amplitude * pow(C, exponent) + offset.

Значения, необходимые для выполнения преобразований, задаются в атрибуте (type="table" или type="discrete"), атрибутах slope и intercept (type="linear") или атрибутах amplitude, exponent и offset (type="gamma").

Эффект свертывания матрицы (комбинирования пикселей изображения с соседними пикселями) достигается в SVG с помощью элемента feConvolveMatrix. С помощью этого элемента достигаются такие графические эффекты как размытие (blurring) изображения, увеличение резкости (sharpening) изображения, а также фаска (embossing) и рельеф (beveling).

Свертывание матрицы основано на матрице nm, называемой ядром свертывания, которая описывает, как значение данного пикселя во входном изображении комбинируется с его соседними пикселями для получения значения пикселя выходного изображения.

Помимо атрибутов модуля Core.attrib, для элемента feConvolveMatrix задаются описанные выше атрибуты color-interpolation-filters, x, y, width, height, in, result и kernelUnitLength, а также обязательные атрибут order и kernelMatrix, и необязательные атрибуты divisor, bias, targetX, targetY, edgeMode и preserveAlpha.

Атрибут order задает порядок матрицы свертывания в виде двух чисел: количества столбцов n и количества строк m (если количество строк не задано, оно предполагается равным количеству столбцов), а атрибут kernelMatrix задает nm значений элементов матрицы (значения должны быть отделены друг от друга пробелом и/или запятой).

После применения матрицы свертывания к изображению, полученное число может быть разделено на значение, заданное в атрибуте divisor (по умолчанию значение этого атрибута равно "1"). После этого к полученному числу может быть прибавлено значение, заданное в атрибуте bias (по умолчанию значение этого атрибута равно "0").

Атрибуты targetX и targetY определяют положение матрицы свертывания на осях x и y по отношению к заданному пикселю во входном изображении. По умолчанию матрица свертывания располагается по центру над каждым пикселем входного изображения.

Атрибут edgeMode определяет, как расширять входное изображение, если необходимо, когда ядро находится на краю или около края изображения и может иметь одно из следующих значений: "duplicate" – расширение с помощью дублирования цветов на краю входного изображения (значение по умолчанию), "wrap" - расширение с помощью дублирования цветов на другом краю входного изображения и "none" – расширение с нулевыми значениями пикселей.

Атрибут preserveAlpha определяет, будет ли применяться свертка к альфа-каналу (значение "false") или нет (значение "true").

Элемент feFlood создает прямоугольную область, заполненную заданным цветом с заданной прозрачностью. Для этого элемента определены атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result. Помимо этого, атрибуты flood-color и flood-opacity задают цвет и прозрачность области. Для атрибута flood-color может быть задано либо значение "currentColor", либо значение цвета (по умолчанию значение этого атрибута равно "black"). Значение атрибута может меняться в диапазоне от 0 до 1 (по   умолчанию значение этого атрибута равно "1").

Для элементов feColorMatrix, feComponentTransfer, feConvolveMatrix и feFlood в SVG DOM определены интерфейсы SVGFEColorMatrixElement, SVGFEComponentTransferElement, SVGComponentTransferFunctionElement, SVGFEFuncRElement, SVGFEFuncGElement, SVGFEFuncBElement, SVGFEFuncAElement, SVGFEConvolveMatrixElement и SVGFEFloodElement.

3.1.13.5. Фильтры преобразования изображений

Элемент feGaussianBlur осуществляет размытие изображения в соответствии с распределением Гаусса (нормальным распределением). Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибут stdDeviation.

В атрибуте stdDeviation задаются два числа, определяющие стандартное отклонение для нормального закона по осям x и y. Если задано одно значение, то считается, что стандартное отклонение для обеих осей одинаково. По умолчанию значение атрибута равно "0".

Результатом работы элемента feImage является загрузка внутреннего или внешнего изображения. Для этого элемента определены атрибуты модуля Presentation.attrib, а также рассмотренный ранее атрибут preserveAspectRatio.

Элемент feDisplacementMap использует значения пикселей из второго входного изображения для замены пространственной замены в первом входном изображении. Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in, in2 и  result, а также атрибуты scale, xChannelSelector и yChannelSelector.

Атрибут scale задает масштаб смещения. По умолчанию его значение равно "0", т.е. смещение не выполняется.

Атрибуты xChannelSelector и yChannelSelector указывают, какой канал второго изображения используется для смещения изображения по осям x и y. Эти атрибуты могут иметь значения "R", "G", "B" или "A" соответственно для каналов R, G, B или альфа-канала. По умолчанию значение атрибута равно "A".

Элемент feMorphology утолщает графический объект или делает его тоньше. Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибуты operator и radius.

Атрибут operator задает режим действия элемента: "dilate" – утолщение  или "erode" – сделать объект более тонким (это значение по умолчанию).

В атрибуте radius задаются два числа, определяющие радиус действия операции по осям x и y. Если задано только одно значение, то значение второго радиуса считается равным значению первого радиуса. По умолчанию оба значения равны 0.

Элемент feOffset смещает входное изображение с его текущей позиции на заданный вектор (обычно это используется для создания теней). Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибуты dx и dy.

Атрибуты dx и dy задают смещение входного изображения по осям x и y. По умолчанию значение этих элементов равно "0".

Элемент feTile заполняет заданный прямоугольник повторяющимися копиями входного изображения (как черепица заполняет крышу). Для этого элемента определены атрибуты модуля Core.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result,

Элемент feTurbulence позволяет создавать изображения с использованием функции турбулентности Перлина, что дает возможность синтезировать искусственные текстуры типа облака или мрамора. Для этого элемента определены атрибуты модуля Core.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result. Кроме этого, могут быть заданы элементы type, baseFrequency, numOctaves, stitchTiles и seed.

Атрибут type задает тип используемой функции: "fractalNoise" – фрактальный шум или "turbulence" – турбулентность (это значение по умолчанию).

Атрибут baseFrequency задает два числа – базовые частоты для функции шума по осям x и y. Если задано одно число, то базовые частоты по осям x и y считаются одинаковыми. По умолчанию значение этого атрибута равно "0".

Атрибут numOctaves задает количество октав для функции шума. По умолчанию значение этого атрибута равно "1".

Атрибут stitchTiles может иметь одно из следующих значений: "stitch" – пользовательский агент автоматически подстраивает значения базовых частот для функции шума по осям x и y таким образом, что ширина и высота узла турбулентности содержала бы целое число подобластей для первой октавы, т.е. на границах подобластей будет производиться плавный переход из одной подобласти в другую; "noStitch" – подстройка значений базовых частот не производится (это значение по умолчанию).

Атрибут seed задает начальное значение для генератора псевдослучайных чисел. По умолчанию значение этого атрибута равно "0".

Для элементов feGaussianBlur, feImage, feDisplacementMap, feMorphology, feOffset, feTile и feTurbulence в SVG DOM определены интерфейсы SVGFEGaussianBlurElement, SVGFEImageElement, SVGFEDisplacementMapElement, SVGFEMorphologyElement, SVGFEOffsetElement, SVGFETileElement и SVGFETurbulenceElement.

3.1.14. Интерактивность в SVG

Содержимое SVG может быть интерактивным, т.е. реагировать на события, инициированные пользователем, с помощью следующих свойств языка SVG:

  •  возможность задания реакции на события с использованием встроенных в SVG-страницу сценариев;
  •  инициализация гиперссылок к другим фрагментам SVG-страницы и другим SVG- и Web-страницам
  •  изменение формы курсора при перемещении указателя мыши в SVG-странице;
  •  возможность задания анимации элементов SVG-страницы.

3.1.14.1. Использование сценариев

Сценарий определяется внутри элемента script как содержимое CDATA. Для элемента script определены атрибуты модулей Core.attrib, XLink.attrib и External.attrib, а также обязательный атрибут type.

Атрибут type задает используемый язык сценариев (например, для языка JavaScript необходимо задавать значение "text/ecmascript").

Пример задания сценария в SVG-документе:

<script type="text/ecmascript"> <![CDATA[

   function circle_click(evt) {

      var circle = evt.target;

      var currentRadius = circle.getAttribute("r");

      if (currentRadius == 100)

         circle.setAttribute("r", currentRadius*2);

      else

         circle.setAttribute("r", currentRadius*0.5);

   }

 ]]> </script>

<circle onclick="circle_click(evt)"

cx="300" cy="225" r="100" fill="red"/>.

 При щелчке по красному кругу размер круга будет увеличиваться, при втором щелчке будет уменьшаться до первоначального размера, при третьем опять увеличиваться и т.д.

Для элемента script в SVG DOM определен интерфейс SVGScriptElement.

3.1.14.2. Ссылки

Для вставки ссылок в документ используется элемент a. Для этого элемента определены атрибуты модуля Presentation.attrib (в том числе и атрибуты модуля XLink.attrib, задающие местонахождение ссылки). Кроме этого, для элемента a можно задать описанный ранее атрибут transform, а также атрибут target.

Атрибут target, также как в HTML, задает имя окна, в которое будет выводиться документ, определенный в атрибуте xlink:href.

Для элемента a в SVG DOM определен интерфейс SVGAElement.

3.1.14.3. Курсор

Элемент cursor используется для определения независимого от платформы пользовательского курсора. Для этого элемента определены атрибуты модулей Core.attrib, Conditional, XLink.attrib (с обязательным атрибутом), External.attrib, а также атрибуты x и y, задающие координаты курсора (по умолчанию значения координат равны "0").

В качестве курсора можно использовать любое изображение (желательно в формате PNG, поскольку этот формат поддерживает канал прозрачности). Ссылка на изображение задается в атрибуте xlink:href.

Для элемента cursor в SVG DOM определен интерфейс SVGCursorElement.    

3.2. Работа с документами SVG в редакторе Inkscape

Редактор Inkscape версии 0.46 (в дальнейшем просто Inkscape) предоставляет удобные графические средства для создания и редактирования элементов векторной графики в документах SVG. Кроме того, используя панель исходного текста, можно работать непосредственно с документом SVG.

3.2.1. Установка редактора Inscape

Для установки редактора Inkscape необходимо запустить файл инсталляционный файл Inkscape-0.47-3.exe. В диалоговом окне Installer Language можно выбрать язык установки редактора (Russian или English).

После установки редактор помещается (по умолчанию) в папку

C:\Program Files\Inkscape.

Запуск редактора выполняется с помощью файла inkscape.exe (значок ) в папке Inscape.

3.2.2. Окно редактора Inkscape

Окно редактора Inkscape имеет вид, представленный на рис. 4.7.1.

Рис. 4.7.1. Окно редактора Inkscape

В верхней части окна располагается строка меню и строка команд. Строка команд содержит как общие команды, например, Открыть, Сохранить или Копировать, так и специфические для редактора команды, например, Продублировать выделенные объекты. Расположенная ниже строка привязки объектов содержит инструменты, управляющие привязкой одного объекта рисования к  другому. Строка управления инструментом зависит от активной фигуры и выполняемой команды.  

Слева находится панель инструментов для задания различных фигур рисования.

Холст – это область, в которой выполняется рисование, а страница – это часть холста, соответствующая области печати или другой предопределенной области.    Линейки показывают координаты x и y местоположения курсора на холсте.

Цветовая палитра используется для заполнения (fill) выделенного объекта заданным цветом с помощью перетаскивания цвета на объект. Если перетаскивание  выполняется при нажатой клавише Shift, то таким образом задается цвет контура (stroke)  для выделенного объекта.

В строке состояния находятся несколько областей для вывода текущих характеристик холста и выделенного объекта и выполнения над ними некоторых действий.

В области Индикатор стиля выводятся текущие цвета заполнения и контура выделенного объекта, а также текущую толщину контура. Индикатор H этой области позволяет задать прозрачность цвета заполнения для выделенного объекта (100 – полностью непрозрачный, 0 – полностью прозрачный).

В области Информация о слое справа в раскрывающемся списке выводится текущий слой холста (с помощью этого списка можно также задать другой слой холста как текущий). Первая кнопка слева позволяет сделать текущий слой холста видимым или невидимым, а вторая кнопка – заблокировать или разблокировать текущий слой.

В области Сообщения выводятся сообщения, связанные с текущей выполняемой командой.

В области Позиция указателя выводятся текущие значения координат x и y местоположения курсора на холсте.

Индикатор Z области Увеличение показывает текущее значение масштаба для холста, а также позволяет увеличить или уменьшить это значение.   

3.2.3. Работа с редактором Inkscape

3.2.3.1. Открытие и сохранение документа SVG

Новый документ SVG создается с помощью команды Создать  в меню Файл. В меню этой команды можно задать шаблон создаваемого документа. Документ с шаблоном по умолчанию   создаётся также либо с помощью клавиш Ctrl+N, либо с помощью кнопки строки команд.

Задать основные свойства нового документа можно с помощью вкладки Страница диалогового окна Свойства документа (рис. 4.7.2).  Это окно выводится на экран либо с помощью команды  Свойства документа в меню Файл, либо с помощью кнопки строки команд, либо с помощью клавиш Shift+Ctrl+D.

Рис. 4.7.2. Окно Свойства документа

Существующий документ SVG открывается либо с помощью команды Открыть  в меню Файл, либо с помощью клавиш Ctrl+O, либо с помощью кнопки строки команд. Один из последних документов, с которыми работали в редакторе, можно открыть с помощью команды Открыть  недавние в меню Файл.

Сохранить документ с существующим именем можно либо с помощью команды Сохранить  в меню Файл, либо с помощью клавиш Ctrl+S, либо с помощью кнопки строки команд. Сохранить новый документ или существующий документ с другим именем можно либо с помощью команды Сохранить как  в меню Файл, либо с помощью клавиш Shift+Ctrl+S. Сохранить копию документа c другим именем можно либо с помощью команды Сохранить копию  в меню Файл, либо с помощью клавиш Shift+Ctrl+Alt+S (в отличие от команды Сохранить как дальнейшее редактирование выполняется не с новым файлом, а с существующим документом).

Команда Восстановить  в меню Файл позволяет отменить все изменения, сделанные в документе, во время текущего сеанса редактирования.

3.2.3.2. Создание графических объектов

В редакторе Inkscape, используя панель инструментов (рис. 4.7.1), можно задавать следующие графические объекты:

  •  прямоугольник и прямоугольник с закруглениями;
  •  трехмерный параллелепипед;
  •  эллипс, круг и дуга;
  •  правильный многоугольник и звезда;
  •  спираль;
  •  контур;
  •  кривые Безье и прямые линии.

3.2.3.2.1. Создание прямоугольника и прямоугольника с закруглениями

Прямоугольник и прямоугольник с закруглениями создаются с помощью кнопки на панели инструментов.

После нажатия кнопки прямоугольник рисуется в окне редактора перетаскиванием мыши от левого верхнего угла к правому нижнему углу (или наоборот). При нажатой клавише Shift будет нарисован квадрат. В углах прямоугольника выводятся два квадратика и кружок – в редакторе Inkscape они называются рычагами (handles). Перетаскивая квадратики в левом верхнем и нижнем правом углах прямоугольника (рис. 4.7.3а), можно изменить его размер, а перетаскивая вниз или влево кружок в правом верхнем углу прямоугольника, можно определить закругления для прямоугольника с заданным вертикальным и горизонтальным   радиусом (рис. 4.7.3б).

Инструменты строки управления для прямоугольника (рис. 4.7.3в) позволяют изменить ширину и высоту прямоугольника (поля Ш и Г), а также (для прямоугольника с закруглениями) значения горизонтального и вертикального радиуса (поля Гор.радиус и Верт.радиус). В раскрывающемся списке можно задать единицу измерения для размеров прямоугольника, а кнопка преобразует прямоугольник с закруглениями в обычный прямоугольник.

 

Рис. 4.7.3. Создание прямоугольника: а) обычный прямоугольник; б) прямоугольник с закруглениями; в) инструменты строки управления для прямоугольника

3.2.3.2.2. Создание трехмерного параллелепипеда

Трехмерный параллелепипед задается с помощью кнопки на панели инструментов. Изменение параметров созданного параллелепипеда выполняется с помощью рычагов 1-10 (рис. 4.7.4а). Управление точками перспективы по осям x, y и z выполняется в строке управления для трехмерного параллелепипеда (рис. 4.7.4б) в полях Угол X, Угол Y и, Угол Z. Переключатели устанавливают для конечных точек по соответствующим осям либо конечное, либо бесконечное (параллельное) значение.

Рис. 4.7.4. Создание трехмерного параллелепипеда: а) рычаги управления: 1 – левая конечная точка схода; 2, 3, 6, 7 – изменение размера фигуры по осям x и yShift – по оси z, с Ctrl – с ограничением в направлениях края или диагонали); 4, 5, 8, 9 – изменение размера фигуры по оси zShift – по осям x и y, с Ctrl – с ограничением в направлениях края или диагонали);  10 – правая конечная точка схода; б) инструменты строки управления для трехмерного параллелепипеда

3.2.3.2.3. Создание эллипса, круга и дуги

Эллипс, круг и дуга задаются с помощью кнопки на панели инструментов. Эллипс рисуется так же, как прямоугольник (рис. 4.7.5а), а круг – при нажатой клавише Shift. Перетаскивая квадратики слева и вверху эллипса (рис. 4.7.5а), можно изменить его размер, а перетаскивая вверх и влево или вниз и влево кружок справа, можно задать либо закрытый эллипс с двумя радиусами – дугу (рис. 4.7.5б), либо открытый эллипс – прямоугольным сегментом (рис. 4.7.5в). Начальный и конечный углы закрытого и открытого эллипса можно изменить в полях Начало и Конец строки управления для эллипса (рис. 4.7.3г). Закрытый эллипс создается при нажатии кнопки , а открытый – при нажатии кнопки . Восстановление обычного эллипса из закрытого или открытого эллипса выполняется с помощью кнопки .

Рис. 4.7.5. Создание эллипса: а) обычный эллипс; б) закрытый эллипс (дуга); б) открытый эллипс (с сегментом); г) инструменты строки управления для эллипса

3.2.3.2.4. Создание правильного многоугольника и звезды

Правильный многоугольник и звезда задаются с помощью кнопки на панели инструментов. В строке управления для этих фигур (рис. 4.7.6а) вид фигуры задается с помощью кнопок и , а количество углов многоугольника или точек звезды задается в поле Углы.

Для многоугольника задается один квадратик – угловой рычаг (рис. 4.7.6б), управляющий размером многоугольника. При нажатой клавише Shift этот рычаг закругляет углы многоугольника, а при нажатой клавише Alt – искажает многоугольник. Величины закругления и искажения могут быть заданы напрямую в полях Закругление и Искажение в строке инструментов. Для звезды задаются два рычага: рычаг точки и базовый рычаг (рис. 4.7.6в). Рычаг точки выполняет те же операции, что и угловой рычаг многоугольника, а базовый рычаг изменяет положение внутренних точек звезды (при нажатой клавише Ctrl это изменение делается одинаково для всех внутренних точек). Изменение базового рычага можно задать и в поле Отношение радиусов в строке инструментов (рис. 4.7.6а). Кнопка этой строки восстанавливает параметры фигуры со значениями полей по умолчанию.

Рис. 4.7.6. Создание правильного многоугольника и звезды: а) строка управления для правильного многоугольника и звезды; б) многоугольник;

в) звезда: 1 – базовый рычаг; 2 – рычаг точки

3.2.3.2.5. Создание спирали

Спираль задается с помощью кнопки на панели инструментов. Для спирали (рис. 4.7.7а) задаются два рычага: внешний рычаг и внутренний рычаг.

Внешний рычаг позволяет удлинить или укоротить спираль снаружи. При нажатой клавише Ctrl такое изменение делается на фиксированный угол (15°), а при нажатой клавише Shift вся спираль будет увеличиваться или уменьшаться.

Внутренний рычаг позволяет удлинить или укоротить спираль изнутри (клавиша Ctrl при этом действует так же, как для внешнего рычага).

При изменении длины спирали меняется и значение поля Витков в строке управления для спирали (рис. 4.7.7б). Значение этого поля можно менять также  напрямую. При изменении длины спирали меняется и значение поля Внутренний радиус строки инструментов (его также можно изменить напрямую).

Перемещение внутреннего рычага при нажатой клавише Alt увеличивает или уменьшает расстояние между витками спирали (это изменение может быть также напрямую задано в поле Нелинейность строки инструментов для спирали). Кнопка этой строки восстанавливает параметры спирали со значениями полей по умолчанию.

Рис. 4.7.7. Создание спирали: а) спираль: 1 – внешний рычаг; 2 – внутренний рычаг;

б) строка управления для спирали

3.2.3.2.6. Создание контура

Контур создается с помощью кнопки на панели инструментов. Рисование контура выполняется простым перемещением курсора при нажатой кнопке мыши. Рисование заканчивается при отпускании кнопки мыши. Полученный контур может быть как незамкнутым (рис. 4.7.8а), так и замкнутым (рис. 4.7.8б) (в последнем случае кнопка мыши отпускается в точке начала рисования контура). В незамкнутом контуре рисование можно продолжить в квадратиках, обозначающих точки начала и окончания контура. Нарисованный сегмент будет добавлен к контуру, а квадратик переместится в точку окончания дорисованного сегмента.

В области Режим строки управления для контура можно задать режим рисования контура: как последовательность кривых Безье (кнопка )  или как последовательность кривых Спиро, более гладких, чем кривые Безье (кнопка ). С помощью бегунка Сглаживание строки управления можно задать степень сглаживания рисуемой кривой, а в раскрывающемся списке Форма можно задать форму рисуемого контура:

  •  Нет – контур одинаковой толщины;
  •  Угасание – постепенное уменьшение толщины контура от начальной точки до конечной;
  •  Нарастание – постепенное увеличение толщины контура от начальной точки до конечной;
  •  Эллипс – постепенное увеличение, а затем уменьшение  толщины контура от начальной точки до конечной (рис. 4.7.8а);
  •  Из буфера обмена – форма контура берётся из буфера обмена.

Кнопка   строки инструментов восстанавливает параметры контура со значениями полей по умолчанию.

 

Рис. 4.7.8. Создание контура: а) незамкнутый контур с формой контура Эллипс;

б) замкнутый контур; б) строка управления для контура

3.2.3.2.7. Создание кривых Безье и прямых линий

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

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

Рис. 4.7.9. Рисование кривых Безье и прямых линий: а) рисование первого рычага кривой; б) рисование кривой; в) рисование второго рычага кривой; г) окончательный вид кривой;

д) добавление второго сегмента к кривой; е) окончательный вид кривой из двух сегментов; ж) рисование ломаной линии; и) окончательный вид ломаной линии;

к) строка управления для кривых Безье и прямых линий

Ломаные линии можно рисовать также с использованием кнопок и строки управления для кривых Безье и прямых линий (рис. 4.7.9к). Первая кнопка позволяет рисовать произвольные ломаные линии, вторая – ломаные линии, сегменты которых параллельны оси x или оси y. Кнопки и , а также раскрывающийся список Форма   в строке управления для кривых Безье и прямых линий действуют аналогично соответствующим инструментом строки управления для контура.

3.2.3.3. Выделение графических объектов

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

Для выделения одного объекта необходимо щелкнуть по нему мышью (рис. 4.7.10а). Если необходимо выделить несколько объектов, то либо необходимо обвести их контуром (рис. 4.7.10б), либо щелкнуть мышью по второму объекту и следующим объектам при нажатой клавише Shift. Результат выделения двух объектов приведен на рис. 4.7.10в.

Рис. 4.7.10. Выделение объекта: а) выделение одного объекта; б) обводка контуром выделяемых объектов; в) выделение двух объектов; г) строка управления для выделения

Поля X и Y в строке управления для выделения (рис. 4.7.10г) выводят координаты x и y левого верхнего угла выделенной области, а поля Ш и В выводят ширину и высоту выделенной области (значения этих полей можно модифицировать). Раскрывающийся список после поля В позволяет задать единицы измерения для координат и размеров области.  

Выделить все объекты документа можно с помощью кнопки в строке управления для выделения (рис. 4.7.10г). При трансформации документа операции могут по-разному выполнять для запертых (блокированный) и незапертых (незаблокированных) объектов. Чтобы заблокировать объект надо нажать кнопку-переключатель в строке управления для выделения (при этом кнопка будет иметь следующий вид – ). для отмены блокирования объекта надо нажать кнопку .

Выделить все объекты в незапертых и видимых слоях документа можно с помощью кнопки в строке управления для выделения (рис. 4.7.10г).

Для отмены выделения объекта или объектов надо либо нажать кнопку в строке управления для выделения, либо щелкнуть мышью за пределами области выделения объекта или объектов.

3.2.3.4. Трансформация графических объектов

Над выделенными графическими объектами можно выполнить следующие операции:

  •  перемещение;
  •  изменение размеров (масштабирование);
  •  поворот;
  •  наклон;
  •  отображение;
  •  перемещение объектов по оси z.

3.2.3.4.1. Перемещение объектов

Для перемещения выделенных объектов надо навести курсор на выделенный объект или объекты (при этом курсор примет форму ), как это показано на рис. 4.7.10а, а затем перетащить курсор на новое место  (рис. 4.7.11а). Переместить область выделения можно также, задав новые координаты левого верхнего угла области выделения в полях X и Y строки управления для выделения (рис. 4.7.10г).

Изменение размеров (масштабирование) выделенных объектов  выполняется с помощью перетаскивания стрелок , , и  по краям области выделения (рис. 4.7.10в). Изменить размеры область выделения можно также, задав новые ширину и высоту области выделения в полях Ш и В строки управления для выделения (рис. 4.7.10г). Пример уменьшения высоты и увеличения ширины выделенной области приведен на рис. 4.7.11б. Для пропорционального изменения толщины обводки области при изменении размеров области выделения надо нажать кнопку строки управления для выделения, а для пропорционального изменения радиусов закругления – кнопку этой строки.

Рис. 4.7.11. Перемещение и масштабирование объектов: а) перемещение выделенного объекта; б) масштабирование области выделения

3.2.3.4.2. Поворот объектов

Для поворота выделенных объектов надо щелкнуть по области выделения мышью. При этом форма стрелок по краям объекта изменится (рис. 4.7.12а) (для восстановления предыдущих стрелок надо еще раз щелкнуть по области выделения мышью). Для поворота области выделения надо перетащить одну из стрелок , ,  или  на заданный угол (при нажатой клавише Ctrl перемещение происходит на фиксированные углы, кратные 15°). Пример поворота области выделения приведен на рис. 4.7.12б. Ось поворота обозначается крестиком (по умолчанию ось поворота позиционируется в центре выделенной области). Для изменения позиции оси поворота крестик надо перетащить в нужную точку. Повернуть область выделения на 90° влево или вправо можно с помощью кнопок и строки управления для выделения (рис. 4.7.10г).

3.2.3.4.3. Наклон объектов

Наклон выделенных объектов выполняется с помощью кнопок и  (рис. 4.7.12а). Кнопки  наклоняют область выделения по вертикали (рис. 4.7.12в), а кнопки –по горизонтали (рис. 4.7.12г).

Рис. 4.7.12. Поворот и наклон объектов: а) вид области выделения для поворота и наклона; б) поворот области  выделения на заданный угол; в) наклон области выделения по вертикали; г) наклон области выделения по горизонтали

3.2.3.4.4. Отображение объектов

Отобразить выделенные объекты  по горизонтали или по вертикали можно с помощью кнопок и строки управления для выделения (рис. 4.7.10г). Результат горизонтального отображения выделенной области на рис. 4.7.10в приведен на рис. 4.7.13а, а результат вертикального отображения – на рис. 4.7.13б.

3.2.3.4.5. Перемещение объектов по оси z

Для перемещения выделенных объектов по оси z используются следующие кнопки строки управления для выделения (рис. 4.7.10г);

  •   – для перемещения области выделения ниже всех других объектов документа;
  •   – для перемещения области выделения ниже на один уровень;
  •   – для перемещения области выделения выше на один уровень;
  •   – для перемещения области выделения выше всех других объектов документа.

Результат перемещения области выделения на рис. 4.7.10а на один уровень вверх приведен на рис. 4.7.13в.

Рис. 4.7.13. Отображение объектов и перемещение объектов по оси z: а) горизонтальное отображение; б) вертикальное отображение; в) перемещения области выделения на один уровень вверх

3.2.3.5. Редактирование графических объектов

Масштабирование выделенных объектов выполняется с помощью кнопки . После нажатия этой кнопки размеры объектов по вертикали, горизонтали или диагонали можно изменить, перетащив мышью один из синих квадратиков, ограничивающих выделенные объекты, на новое место.

Поворот выделенных объектов выполняется с помощью кнопки . После нажатия этой кнопки выделенную область можно повернуть на любой угол, перетащив мышью один из синих квадратиков в углах области на новое место. Поворот на угол, кратный 45, выполняется при нажатой клавише Shift.

Наклон выделенных объектов по вертикали или горизонтали выполняется с помощью кнопки . После нажатия этой кнопки выделенную область можно наклонить по вертикали или горизонтали повернуть, перетащив мышью один из синих квадратиков в серединах сторон области на новое место.

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

Коррекция контура выполняется с помощью кнопок

.

После выделения объекта при нажатии одной из этих трех кнопок объект приобретает следующий вид (рис. 4.7.4а).

Рис. 4.7.4. Операции над контуром

При нажатии первой кнопки можно точку объекта, по которой щелкнули мышью, перетащить и/или изменить кривизну контура с помощью индикаторов наклона (рис. 4.7.4б).

При нажатии второй кнопки можно добавить точку к объекту в том месте контура, по которому щелкнули мышью (рис. 4.7.4в).

При нажатии третьей кнопки можно удалить точку, по которой щелкнули мышью (рис. 4.7.4в).

Вырезание, копирование и вставка выделенных объектов выполняется с помощью команд Cut, Copy и Paste меню Edit.

Удаление выделенных объектов выполняется либо с помощью команды Delete меню Edit,  либо при нажатии клавиши Delete (Del).

Отмена последних действий и повторное выполнение отмененных действий выполняется с помощью команд Undo и Redo меню Edit.

3.2.3.6. Задание свойств графических объектов

Свойства графических объектов задаются в панели свойств (Properties). Эта панель содержит следующие вкладки: Geom, Stroke, Fill, Filter и Marker.

Во вкладке Geom выводятся атрибуты и свойства графического объекта. Для каждого вида объекта эта вкладка имеет разный вид (рис. 4.7.5).

Рис. 4.7.5. Вид вкладки Geom панели Properties для разных графических объектов

Во всех вкладках есть поле id, в которое можно ввести уникальный идентификатор этого элемента, а также поля display и visibility, в которых можно изменить значения одноименных свойств элемента.

Для прямоугольника (рис. 4.7.5а) выводятся координаты его левого верхнего угла (x и y), ширина и высота (w и h) и радиусы закруглений (rx и ry).

Для эллипса (рис. 4.7.5б) выводятся координаты его центра (cx и cy), а также  радиусы по осям x и y (rx и ry).

Для линии (рис. 4.7.5в) выводятся координаты ее начальной и конечной  (x1 и y1) и конечной  (x2 и y2) точек.

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

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

Во вкладке Stroke выводятся параметры контура графического объекта (рис. 4.7.6).  

Рис. 4.7.6. Вкладка Stroke панели Properties

В области Paint можно задать цвет контура, щелкнув по кнопке color и выбрав значение цвета в окне Choose Color. Цвет контура можно задать также, если после нажатия кнопки перенести пипетку в ту точку изображения, где необходимо скопировать цвет,  и щелкнуть мышью в этой точке, а затем в окне Dropper нажать кнопку OK. В поле URI можно задать идентификатор ресурса – градиента (ресурсы описываются в следующем разделе). В области Properties можно в поле width задать ширину контура, а также другие свойства (см. 3.1.5.3)

 Во вкладке Fill выводятся параметры заполнения графического объекта (рис. 4.7.7).

Рис. 4.7.7. Вкладка Fill панели Properties

Цвет в области Paint вкладки Fill задается так же, как во вкладке Stroke. В области Properties можно в поле rule задать правило заполнения объекта, а также прозрачность (см. 3.1.5.3)

Во вкладке Filter выводится идентификатор ресурса фильтра для графического объекта (рис. 4.7.8).

Рис. 4.7.8. Вкладка Filter панели Properties

В поле URI можно задать идентификатор ресурса – фильтра (ресурсы описываются в следующем разделе).

3.2.3.7. Задание ресурсов для графических объектов

Задание ресурсов для изображений (элементов defs в документе SVG) выполняется с помощью панели определений (Defs Editor), пример вывода которой приведен на рис. 4.7.9.

Рис. 4.7.9. Вывод панели определений

В колонке type выводится тип ресурса: filter (фильтр), linearGradient (линейный градиент) или radialGradient (радиальный градиент), а в колонке id – значение атрибута id для ресурса.

Для добавления ресурса необходимо нажать кнопку и выбрать тип ресурса в меню (рис. 4.7.10).

Рис. 4.7.10. Выбор типа ресурса

После выбора типа ресурса открывается соответствующее окно для задания атрибутов и свойств ресурса.

Для линейного градиента открывается окно Linear Gradient (рис. 4.7.11).

 

Рис. 4.7.11. Окно Linear Gradient

В верхних полях окна задается значение атрибута id (которое затем можно задать в поле URL вкладок панели Properties), а также другие атрибуты и свойства линейного градиента (см. 3.1.12.1).

Для добавления нового цвета в градиент надо нажать кнопку (цвет добавляется после существующих цветов). После этого после двойного щелчка мышью в полях offset и opacity надо указать смещение и прозрачность для цвета, а для поля color в окне Pick a Color задать цвет компонента.  Удаление цвета выполняется после его выделения с помощью кнопки .

В нижней области выводится предварительный вид градиента. Кнопка Apply позволяет применить изменения в градиенте в графическом объекте, для которого этот градиент является ресурсом.

Для радиального градиента открывается окно Radial Gradient (рис. 4.7.12).

 

Рис. 4.7.12. Окно Radial Gradient

Задание параметров в окне Radial Gradient выполнятся так же, как в окне Linear Gradient.

Функция использования фильтров в данной версии Sketsa не реализована или заблокирована, поэтому в лабораторной работе она использоваться не будет.

3.2.3.8. Ввод и редактирование текста

Для ввода текста надо нажать кнопку в панели набора инструментов и щелкнуть мышью в том месте изображения, где предполагается надпись. В этом месте появляется надпись here is the text. Необходимые стили для этой надписи устанавливаются во вкладках Font (рис. 4.7.13а) и Text (рис. 4.7.13б) панели Text Style.

Для изменения надписи надо удалить ее с помощью клавиши Backspace () и набрать собственную надпись, предварительно выбрав язык надписи. Для надписи можно также установить параметры контура и заполнения во вкладках Stroke и Fill панели Properties.

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

Операции на надписью как графическим объектом (например, поворот) выполняются так же, как для других графических объектов (см. 3.2.3.3).

Рис. 4.7.13. Вкладки панели Text Style

3.2.3.9. Вставка изображения в документ

Для вставки изображения в документ либо выполнить команду Insert Image в меню Insert, либо нажать кнопку в панели набора инструментов и щелкнуть мышью в том месте изображения, где предполагается вставить растровое изображение. После этого в окне Insert Image с помощью кнопки Browse в окне Open выбирается изображение (только формата .jpg или .png) и нажимается кнопка OK. При необходимости изменить атрибуты элемента image SVG надо нажать кнопку Options и в изменившемся окне (рис. 4.7.14б)  задать или изменить необходимые атрибуты.

Рис. 4.7.14. Окно для вставки изображения Insert Image

3.2.3.10. Дополнительные операции

Преобразование выделенных графических объектов можно выполнить с помощью команд подменю команды Transform в меню Modify. Команды Flip Horizontal и Flip Vertical поворачивает объекты по вертикали или по горизонтали, а команда Transform Dialog позволяет выбрать один из инструментов преобразования.

Перемещение выделенных графических объектов по вертикали можно выполнить с помощью команд подменю команды Arrange в меню Modify. Команды Move Top и Move Bottom перемещают объекты на самый верх или на самый низ, а команды Move Up и Move Down перемещают объекты на один уровень вверх или на один уровень вниз.

Сгруппировать или расгруппировать выделенные графические объекты можно с помощью команд Group и UnGroup меню Modify.

Преобразовать базовый графический объект в контур можно с помощью команды Object To Path меню Modify.

Преобразовать контур базового графического объекта в обычный контур можно с помощью команды Stroke To Path меню Modify.

Под базовыми графическими объектами в двух предыдущих командах подразумеваются такие объекты как прямоугольник, эллипс, линия, ломаная линия, многоугольник или текст.

Объединить несколько объектов в один объект можно с помощью команды Combine меню Modify.

Разбить контур на несколько независимых контуров можно с помощью команды Break Apart меню Modify.

Выполнить операцию объединения для нескольких объектов в один редактируемый объект можно с помощью команды Union меню Modify.

Выполнить операцию вычитания для нескольких объектов в один редактируемый объект можно с помощью команды Subtract меню Modify.

Выполнить операцию пересечения для нескольких объектов в один редактируемый объект можно с помощью команды Intersect меню Modify.

Выполнить операцию исключающее ИЛИ для нескольких объектов в один редактируемый объект можно с помощью команды Exclusive Or меню Modify.

Преобразовать созданный документ SVG в формат PDF или изображение формата JPEG или PNG можно с помощью команды Export меню File.

Включить/выключить вывод в окне редактора сетки, линеек и выравнивания объектов по сетке можно с помощью команд Show Grid, Show Ruler и  Snap To Grid меню Modify.

4. Порядок выполнения работы

Создайте, используя  редактор Sketsa, документ SVG, содержащий следующие графические объекты:

  •  объект  Фоновое изображение;
  •  объект Стрелка «Вперед»;
  •  объект Оглавление;
  •  объект Стрелка «Назад».

Взаимное расположение этих объектов приведено на рис. 4.7.15 (граница всего изображения обозначена красной линией, которая в документе SVG не выводится). Элемент  Оглавление содержит надпись "Оглавление". Элемент Стрелка «Назад» является зеркальным отражением элемента Стрелка «Вперед». Форма и стиль каждого объекта, а также стиль надписи задаются в соответствии со своим вариантом. Варианты работ приведены в табл. 4.7.1. Контуры объектов задаются с помощью инструментов или .

Стиль элементов обозначается номером таблицы (4.7.2-4.7.5) и вариантом стиля в этой таблице (1-10).

 

Рис. 4.7.15. Изображения для выполнения работы

Таблица 4.7.1. Варианты выполнения лабораторной работы

Вари-

ант

Фоновое изображение

Стрелка «Вперед»

Оглавление

Стиль надписи

Форма

Стиль

Форма

Стиль

Форма

Стиль

1.

4.7.2-1

4.7.3-8

4.7.4-2

4.7.5-9

2.

4.7.2-2

4.7.3-10

4.7.4-8

4.7.5-5

3.

4.7.2-3

4.7.3-7

4.7.4-5

4.7.5-4

4.

4.7.2-4

4.7.3-9

4.7.4-3

4.7.5-7

5.

4.7.2-5

4.7.3-6

4.7.4-10

4.7.5-1

6.

4.7.2-6

4.7.3-4

4.7.4-6

4.7.5-6

7.

4.7.2-7

4.7.3-2

4.7.4-9

4.7.5-8

8.

4.7.2-8

4.7.3-3

4.7.4-4

4.7.5-10

9.

4.7.2-9

4.7.3-1

4.7.4-1

4.7.5-9

10.

4.7.2-10

4.7.3-5

4.7.4-7

4.7.5-3

11.

4.7.3-10

4.7.4-6

4.7.2-8

4.7.5-2

12.

4.7.3-9

4.7.4-4

4.7.2-7

4.7.5-7

13.

4.7.3-8

4.7.4-8

4.7.2-6

4.7.5-10

14.

4.7.3-7

4.7.4-10

4.7.2-4

4.7.5-6

15.

4.7.3-6

4.7.4-5

4.7.2-10

4.7.5-8

16.

4.7.3-5

4.7.4-1

4.7.2-5

4.7.5-1

17.

4.7.3-4

4.7.4-3

4.7.2-3

4.7.5-3

18.

4.7.3-3

4.7.4-9

4.7.2-1

4.7.5-5

19.

4.7.3-2

4.7.4-7

4.7.2-9

4.7.5-4

20.

4.7.3-1

4.7.4-2

4.7.2-2

4.7.5-9

21.

4.7.4-3

4.7.2-7

4.7.3-5

4.7.5-1

22.

4.7.4-8

4.7.2-4

4.7.3-7

4.7.5-3

23.

4.7.4-5

4.7.2-9

4.7.3-1

4.7.5-5

24.

4.7.4-7

4.7.2-10

4.7.3-9

4.7.5-7

25.

4.7.2-8

4.7.3-3

4.7.4-4

4.7.5-10

26.

4.7.4-1

4.7.2-3

4.7.3-6

4.7.5-2

27.

4.7.4-10

4.7.2-1

4.7.3-4

4.7.5-6

28.

4.7.4-2

4.7.2-5

4.7.3-8

4.7.5-4

29.

4.7.4-4

4.7.2-6

4.7.3-10

4.7.5-8

30.

4.7.4-6

4.7.2-8

4.7.3-2

4.7.5-10

Для градиента заполнения графического объекта в табл. 4.7.2 приведено его наименование и внешний вид. Для создания градиента используются окна Linear Gradient (для вариантов 2,4,6,8,10) и Radial Gradient (для вариантов 1,3,5,7,9).

Кроме того,  в табл. 4.7.2 указана ширина контура для заданного варианта объекта, заполненного градиентом и цвет контура.  

Таблица 4.7.2. Варианты градиента

Вариант

Харак-

теристики

1

2

3

4

5

6

7

8

9

10

Наименование

Orange, Yellow

Green, Yellow

Brown, Tan, Beige

Light Cyan

Steel

Blue

Light Purple

Magenta

Soft Stripes

Brass

Yellow,

Green, Blue

Вид

Ширина контура

3

3

4

3

4

3

4

3

4

3

Цвет контура

RGB(255, 0, 0)

RGB(0, 255, 0)

RGB(174, 124, 5)

RGB(255, 255, 0)

RGB(4, 21, 121)

RGB(141, 115, 245)

RGB(255, 0, 255)

RGB(125, 112, 42)

RGB(244, 132, 112)

RGB(255, 7, 240)

Узоры для заполнения графического объекта задаются с помощью следующих предложений:

<defs>

    <pattern x="0" y="0" width="500" height="500"

 patternUnits="userSpaceOnUse" id="Pattern1" >

    <image x="0" y="0" width="500" height="500"

xlink:href="imagesLab7/BrickWall.png"/>

   </pattern>

</defs>

<path fill="url(#Pattern1)" stroke-width="4"

d="M 142.5 64.627754 C 114.12045 64.627754 88.42216

70.177376 50.0 50.0 C 60.470726 83.65732 52.911636 89.02403

47.68039 94.98869 C 42.4128

100.99483 39.5 107.61571 39.5 114.56387 C 39.5 121.51204

42.4128 128.13292 47.68039

134.13905 C 52.911636 140.10371 60.470726 145.47043 51.0

187.0 C 88.42216 158.95038

114.12045 164.5 142.5 164.5 C 170.87955 164.5 196.57785

158.95038 250.0 185.0 C 224.52927

145.47043 232.08838 140.10371 237.31961 134.13904

C 242.58722 128.13292 245.5 121.51204 245.5 114.56387

C 245.5 107.61571 242.58722 100.99483 237.31961 94.98869

C 232.08838 89.02403 224.52927 83.65732 252.0

53.02643 C 196.57785 70.177376 170.87955 64.627754 142.5

64.627754 z" stroke="#b921f4"/>

Вывод графического объекта приведен на рис. 4.7.16.

Рис. 4.7.16. Пример вывода графического объекта

с заполнением шаблоном-изображением

Элемент pattern в элементе defs задается вручную либо с помощью встроенного текстового редактора Sketza, либо с помощью любого текстового редактора, например, Bred3. Для элемента pattern должен быть задан атрибут id, значением которого будет являться идентификатор шаблона. В атрибуте xlink:href задается ссылка на изображение, которое будет использоваться в качестве шаблона.

Затем в атрибуте fill  графического объекта вручную вместо значения "none" задается значение ссылки на шаблон в виде "url(#идентификатор-шаблона)".

В табл.  4.7.3 и 4.7.4 приведены наименования узоров, а также ширина контура для заданного варианта объекта, заполненного узором и цвет контура.

Изображения узоров находятся в папке imagesLab7 (имена файлов с узорами составляются из наименований узоров с удаленными пробелами между словами).

Таблица 4.7.3. Варианты узора 1

Вариант

Харак-

теристики

1

2

3

4

5

6

7

8

9

10

Наименование

Woven Wide

Nebula

Oak

Brick Wall

Old Wood 

Ancient Stone

Satin Sheets

Zebra

White Wood

Black Veins

Вид

Ширина контура

3

3

4

3

4

3

4

3

4

3

Цвет контура

RGB

(255, 0, 0)

RGB

(0, 255, 0)

RGB(174, 124, 5)

RGB(255, 255, 0)

RGB(4, 21, 121)

RGB

(41, 15, 245)

RGB(255, 0, 255)

RGB(125, 112, 42)

RGB(244, 132, 112)

RGB(255, 7, 240)

Таблица 4.7.4. Варианты узора 2

Вариант

Харак-

теристики

1

2

3

4

5

6

7

8

9

10

Наименование

Bubbles

Optical Checker

Wood

Purples

Waffle

Tie Dye

Water

Woffen Flat

Rusted

Metal

Optical Squares

Вид

Ширина контура

3

4

4

3

4

3

4

3

4

3

Цвет контура

RGB

(255, 0, 0)

RGB

(0, 255, 0)

RGB(174, 124, 5)

RGB(255, 255, 0)

RGB(4, 21, 121)

RGB

(41, 15, 245)

RGB(255, 0, 255)

RGB(125, 112, 42)

RGB(244, 132, 112)

RGB(255, 7, 240)

Варианты цветов и толщина контура  для букв надписи задаются в соответствии с вариантами в табл. 4.7.5. Размер шрифта подбирается по ширине графического объекта Оглавление.

Таблица 4.7.5. Варианты цветов для надписи 

Вариант

Харак-

теристики

1

2

3

4

5

6

7

8

9

10

Наимено-вание

Aqua-marine

Sienna

Limegreen

Deeppink

Deepsky-blue 

Moccasin

Aliceblue

Coral

Darkgray

Khaki

Вид

Цвет букв

RGB(127, 255, 212)

RGB(160, 82, 45)

RGB(50, 205, 50)

RGB(255, 20, 147)

RGB(0, 191, 255)

RGB(255, 228, 181)

RGB(240, 248, 255)

RGB(255, 127, 80)

RGB(169, 169, 169)

RGB(240, 230, 140)

Ширина контура

1

2

1

2

2

1

2

1

2

3

Цвет контура

RGB

(255, 0, 0)

RGB

(255, 225, 0)

RGB(255, 0, 255)

RGB(98, 3, 3)

RGB(255, 0, 216)

RGB

(4, 103, 13)

RGB(113, 85, 8)

RGB(89, 66, 3)

RGB(0, 255, 255)

RGB(121, 0, 0)

Шрифт

Verdana

Arial

Times New Roman

Verdana

Courier New

Times New Roman

Arial

Courier New

Verdana

Times New Roman

5. Содержание отчета

В отчете должен быть представлен текст исходного документа SVG и скриншот вывода этого документа в одном из Web-браузеров.           

6. Вопросы для самоконтроля

Каковы основные концепции языка SVG?

Каковы варианты использования SVG в Web-страницах? Дайте краткое описание каждого варианта.

Какие категории программных средств используются в SVG? Дайте краткое описание каждой категории.

Какие базовые типы данных определены в SVG? Дайте краткое описание каждого типа.

Какие базовые категории интерфейсов определены в SVG? Дайте краткое описание каждой категории.

Какие группы модулей атрибутов определены в SVG? Дайте краткое описание каждой группы.

Какие атрибуты входят в состав модуля ядра и модуля условной обработки в SVG? Дайте краткое описание каждого атрибута.

Какие атрибуты входят в состав модуля стилей, модуля контейнерных атрибутов и модуля атрибутов области просмотра в SVG? Дайте краткое описание каждого атрибута.

Какие наборы атрибутов входят в состав модуля текста в SVG? Дайте краткую характеристику каждого атрибута.

Какие атрибуты включает модуль Paint.attrib в SVG? Дайте краткую характеристику каждого атрибута.

Какие атрибуты включают модули Opacity.attrib и Graphics.attrib в SVG? Дайте краткую характеристику каждого атрибута.

Какие атрибуты включают модули Marker.attrib, Gradient.attrib, Clip.attrib, Mask.attrib, Filter.attrib и FilterColor.attrib в SVG? Дайте краткую характеристику каждого атрибута.

Какие модули атрибутов событий определены в SVG? Дайте краткую характеристику каждого модуля и атрибута.

Какие модули атрибутов для доступа к внешним ресурсам определены в SVG? Дайте краткую характеристику каждого модуля и атрибута.

Какие преобразования для графического элемента можно выполнить с помощью атрибута transform в SVG?

Как задается и как используется элемент svg в SVG? Дайте краткую характеристику атрибутов этого элемента.

Как можно вывести прямоугольник в SVG? Дайте краткую характеристику атрибутов элемента, задающего эту фигуру.

Как можно вывести круги и эллипсы в SVG? Дайте краткую характеристику атрибутов элементов, задающих эти фигуры.

Как можно вывести линии, ломаные линии и многоугольники в SVG? Дайте краткую характеристику атрибутов элементов, задающих эти фигуры.

Как в SVG задаются и используются элементы g, desc и title? Дайте краткую характеристику атрибутов этих элементов.

Как в SVG описываются и реализуются ссылки URI на другие объекты?

Как в SVG задаются и используются элементы symbol и image? Дайте краткую характеристику атрибутов этих элементов.

Как в SVG выполняется условная обработка?

Как в SVG можно задать элементам свойства стилей?

Как определяется элемент path в SVG?

Как в SVG задаются контуры с помощью команд перемещения, рисования линий и закрытия контура?

Как в SVG задаются контуры с помощью команд рисования кривых Безье третьего порядка?

Как в SVG задаются контуры с помощью команд рисования кривых Безье четвертого порядка?

Как в SVG задаются контуры с помощью команд рисования эллиптических кривых?

Как определяется символ и глиф в SVG?

Как в SVG выводится текст с помощью элементов text и tspan?

Как в SVG выводится текст с помощью элементов tref и textPath?

Как задается и как используется линейный градиент в SVG? Дайте краткое описание атрибутов элемента линейного градиента.

Как задается и как используется радиальный градиент в SVG? Дайте краткое описание атрибутов элемента радиального градиента.

Как задается и как используется элемент filter? Дайте краткую характеристику атрибутов этого элемента.

Какие фильтры-примитивы для моделирования источников света определены в SVG? Дайте краткую характеристику каждого фильтра.

С помощью какого элемента моделируется рассеивание (диффузия) источника света в SVG? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента моделируется отражение света в SVG? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента в SVG реализуется фильтр-примитив, объединяющий два изображения (на уровне пикселей) с использованием различных режимов смешивания? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента в SVG реализуется фильтр-примитив, выполняющий смешивание (по пикселям) двух входных изображений с использованием операций композиции или арифметических операций? Дайте краткую характеристику атрибутов этого элемента.

С помощью каких элементов в SVG реализуется фильтр-примитив, выполняющий послойный вывод изображения? Дайте краткую характеристику атрибутов этих элементов.

Какие фильтры задания и преобразования цветов определены в SVG? Дайте краткую характеристику каждого фильтра.

С помощью какого элемента в SVG реализуется фильтр, выполняющий преобразование цветов? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента в SVG реализуется фильтр, выполняющий преобразование каналов цвета и прозрачности? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента в SVG реализуется фильтр, выполняющий комбинирование пикселей изображения с соседними пикселями? Дайте краткую характеристику атрибутов этого элемента.

С помощью какого элемента в SVG реализуется фильтр, создающий прямоугольную область, заполненную заданным цветом с заданной прозрачностью? Дайте краткую характеристику атрибутов этого элемента.

Какие фильтры преобразования изображений определены в SVG? Дайте краткую характеристику каждого фильтра.

С помощью каких элементов в SVG реализуются фильтры, осуществляющие размытие изображения и загрузку внутреннего или внешнего изображения? Дайте краткую характеристику атрибутов этих элементов.

С помощью каких элементов в SVG реализуются фильтры, осуществляющие пространственную замену в изображении и изменение толщины графического объекта? Дайте краткую характеристику атрибутов этих элементов.

С помощью каких элементов в SVG реализуются фильтры, осуществляющие смещение входного изображения и заполнение заданного прямоугольника повторяющимися копиями входного изображения? Дайте краткую характеристику атрибутов этих элементов.

С помощью какого элемента в SVG реализуется фильтр, создающий изображения с использованием функции турбулентности? Дайте краткую характеристику атрибутов этого элемента.

Как задаются и используются сценарии в SVG?

Как задаются и используются ссылки в SVG?

Как задается и используется курсор в SVG?

  

айл: file:///web/1/5fan/public_html/www/files/2/5fan_ru_13963_a367d9b98980f18d4c12463da0699859.doc   Создан: 2008-07-10T14:24:00Z Модифицирован: 2008-07-10T14:24:00Z     Автор:


Строка меню

Строка управления инструментами

Строка

команд

Строка

привязки объектов

Панель инструментов

Цветовая палитра

Увеличение

Позиция указателя

Индикатор стиля

Информация о слое

Сообщения

Линейки

Холст

Страница

Строка состояния

а)

б)

в)

а)

б)

1

2

3

4

5

6

7

8

9

10

а)

б)

г)

в)

а)

б)

в)

1

2

а)

б)

2

1

а)

в)

б)

а)

б)

г)

в)

д)

е)

и)

ж)

к)

а)

б)

г)

в)

а)

б)

а)

б)

в)

г)

а)

б)

в)

а)

б)

в)

г)

г)

а)

б)

в)

д)

е)

а)

б)

а)

б)

Фоновое изображение

Стрелка «Назад»

Стрелка «Вперед»

Оглавление


 

А также другие работы, которые могут Вас заинтересовать

34021. Глобальные проблемы человечества 23.5 KB
  Десять тыяч лет назад было около 5млн человек 2 тысячи лет назад – около 200 млн в 1960 г – 3 млрд в 1975 – 4 млрд в 1987 5 млрд в 2000г более 6 млрд человек.
34024. Возникновение христианства как мировой религии. Средневековая философия. Доказательства бытия Бога. Принцип средневековой философии 25.5 KB
  Доказательства бытия Бога. Существование бога самоочевидно но если мы не знаем что такое бог то эта очевидность сомнительна. Невозможно определить бытие бога. Человек не может познать бога.
34025. Философия эпохи Возрождения 24 KB
  2 Расширение кругозора человека возникновение естествознания. Место человека периферийное т. Книги понижали достоинство человека в мире низводят человека с божественной высоты до земной. Гуманизм человек предстает как высшая ценность способности которой должны быть раскрыты полностью всё для блага человека.
34026. Проблема рационализма и сенсуализма начала 19 в. (сравнить Декарта и Локка) 30 KB
  разуме в центре работы теория познания Всякое познание это сближение с опытом. Он создаёт психологическую теорию познания. Что является самым главным в процессе познания По Декарту: чувства делятся на пришедшие из вне врожденные обнаруживаются нами самими. считает что элементы познания возникают только из чувственного опыта.
34027. Томас Гоббс 26.5 KB
  Власть проистекает из инстинкта самосохранения. Власть становится результатом конвенции разумного решения. Появляется общественная власть. Договор может быть расторгнут если власть не может больше защищать.
34028. Французское Просвещение (Вольтер, Руссо) 31 KB
  Крупнейшими мыслителями и идеологами этой эпохи стали Вольтер Дидро Гольбах Гельвеций Ламетри Руссо и др. Своим метким пером он поражал старое отжившее свой век его сатира и насмешка были убийственны для феодальной камарильи смех Вольтера разрушил больше чем плач Руссо. Мировоззренческая система Жан Жака Руссо завоевала огромную популярность еще при жизни он был признанным властителем дум большинства французов второй половины XVIII века.
34029. Философия Канта 27 KB
  Основные достижения Канта теория познания гносеология и этика. Основные положения идеи теории познания. Кант ставит вопрос о диалектике познания говоря о двух понятиях: субъект и объект познания эти понятия составляют диалектическую противоположность противоречие познания. Суть этой диалектики: ведущим началом источником познания является не объект а субъект познания.