JavaScript. Подробное руководство, 6-е издание, стр. 351

<b>  &lt;defs&gt; &lt;!-- Настройка некоторых определений --&gt;</b>

<b>    &lt;linearGradient id=&quot;fade&quot;&gt; &lt;!-- Цветовой градиент с именем ''fade” --&gt;</b>

<b>      &lt;stop offset=&quot;0%&quot; stop-color=&quot;#008&quot;/&gt; &lt;!-- Начинаем с темно-синего --&gt;</b>

<b>      &lt;stop offset=&quot;100%&quot; stop-color=&quot;#ccf&quot;/&gt;&lt;!--Заканчиваем светло-синим--&gt;</b>

<b>    &lt;/linearGradient&gt;</b>

<b>  &lt;/defs&gt;</b>

<b>  &lt;! --</b>

<b>    Нарисовать прямоугольник с тонкой черной рамкой и заполнить его градиентом</b>

<b>  --&gt;</b>

<b>  &lt;rect х=&quot;100” у=&quot;200&quot; width=&quot;800&quot; height=&quot;600&quot; stroke=&quot;black&quot;</b>

<b>     stroke-width=&quot;25&quot; fill=&quot;url(#fade)&quot;/&gt;</b>

<b>&lt;/svg&gt;</b>

На рис. 21.1 показано графическое представление этого SVG-файла.

JavaScript. Подробное руководство, 6-е издание - i_052.jpg

SVG - это довольно обширная грамматика умеренной сложности. Помимо простых примитивов рисования она позволяет воспроизводить произвольные кривые, текст и анимацию. Рисунки в формате SVG могут даже содержать JavaScript-сценарии и таблицы CSS-стилей, что позволяет наделить их информацией о поведении и представлении. В этом разделе показано, как с помощью клиентского JavaScript-кода (встроенного в HTML-, а не в SVG-документ) можно динамически создавать графические изображения средствами SVG. Приводимые здесь примеры SVG-изображений позволяют лишь отчасти оценить возможности формата SVG. Полное описание этого формата доступно в виде обширной, но вполне понятной спецификации, которая поддерживается консорциумом W3C и находится по адресу http://www.w3.org/TR/SVG/. Обратите внимание: эта спецификация включает в себя полное описание объектной модели документа (DOM) для SVG-документов. В данном разделе рассматриваются приемы манипулирования SVG-графикой с помощью стандартной модели XML DOM, а модель SVG DOM не затрагивается.

К моменту написания этих строк все текущие веб-броузеры, кроме IE, имели встроенную поддержку формата SVG (она также будет включена в IE9). В последних версиях броузеров отображать SVG-изображения можно с помощью обычного элемента

<b>&lt;img&gt;</b>
. Некоторые немного устаревшие броузеры (такие как Firefox 3.6) не поддерживают такую возможность и требуют использовать для этих целей элемент
<b>&lt;object&gt;</b>
:

<b>&lt;object data=&quot;sample.svg&quot; type=&quot;image/svg+xml&quot; width=''100&quot; height=&quot;100&quot;/&gt;</b>

При использовании в элементе

<b>&lt;img&gt;</b>
или
<b>&lt;object&gt;</b>
SVG можно рассматривать как еще один формат представления графических изображений, который, с точки зрения программиста на языке JavaScript, ничем особенным не выделяется. Гораздо больший интерес представляет сама возможность встраивания SVG-изображений непосредственно в документы и выполнения операций над ними. Поскольку формат SVG является грамматикой языка XML, изображения в этом формате можно встраивать непосредственно в XHTML-документы, как показано ниже:

<b>&lt;?xml version=&quot;1.0&quot;?&gt;</b>

<b>&lt;!-- Объявить HTML как пространство имен по умолчанию, a SVG - с префиксом ''svg:&quot; --&gt;</b>

<b>&lt;html xmlns=&quot;</b><a href="http://www.w3.org/1999/xhtmr'"><b>http://www.w3.org/1999/xhtmr'</b></a>

<b>     xmlns:svg=&quot;</b><a href="http://www.w3.org/2000/svg"><b>http://www.w3.org/2000/svg</b></a><b>&quot;&gt;</b>

<b>  &lt;body&gt;</b>

<b>    Это красный квадрат: &lt;svg:svg width=&quot;10&quot; height=&quot;10&quot;&gt;</b>

<b>      &lt;svg:rect x=&quot;0&quot; y=&quot;0” width=&quot;10&quot; height=&quot;10&quot; fill=&quot;red&quot;/&gt;</b>

<b>    &lt;/svg:svg&gt;</b>

<b>    Это голубой круг: &lt;svg:svg width=&quot;10&quot; height=&quot;10&quot;&gt;</b>

<b>      &lt;svg:circle cx=&quot;5&quot; cy=&quot;5&quot; r=&quot;5&quot; fill=&quot;blue&quot;/&gt;</b>

<b>    &lt;/svg:svg&gt;</b>

<b>  &lt;/body&gt;</b>

<b>&lt;/html&gt;</b>

Этот прием можно использовать во всех текущих броузерах, кроме IE. Нарис. 21.2 показано, как Firefox отображает этот XHTML-документ.

JavaScript. Подробное руководство, 6-е издание - i_053.jpg

Стандарт HTML5 сокращает количество различий между XML и HTML и позволяет вставлять разметку на языке SVG (и MathML) непосредственно в HTML-файлы, без объявления пространств имен или префиксов тегов:

<b>&lt;!DOCTYPE html&gt;</b>

<b>&lt;html&gt;</b>

<b>  &lt;body&gt;</b>

<b>    Это красный квадрат: &lt;svg width=&quot;10&quot; height=&quot;10&quot;&gt;</b>

<b>      &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;10&quot; height=&quot;10&quot; fill=&quot;red&quot;/&gt;</b>

<b>    &lt;/svg&gt;</b>

<b>    Это голубой круг: &lt;svg width=&quot;10&quot; height=&quot;10&quot;&gt;</b>