Реферат: SVG: Замена Flash-у
5: <title>Our Cubicles</title>
6: <xsl:apply-templates select="cubicle"/>
7: </svg>
8: </xsl:template>
9: <xsl:template match="cubicle">
10: <rect x="{north}" y="{east}" width="{width}" height="{length}"/>
11: </xsl:template>
12: </xsl:stylesheet>
Конечный SVG документ:
1: <?xml version="1.0" standalone="no"?>
3: <svg xmlns="http://www.w3.org/2000/svg">
4: <title>A Circle</title>
5: <rect x="10" y="15" width="10" height="10"/>
5: <rect x="0" y="0" width="10" height="10"/>
8: </svg>
В результате данной трансформации создается графическое изображение. Показывающее, как располагаются в офисе столы. По этому представлению гораздо проще понять, как столы расположены относительно друг друга. Возможности представления данных графически безграничны, и с помощью SVG осуществляются очень просто.
Анимация в SVG
Анимация, как было уже сказано выше, осуществляется в SVG с помощью языка SMIL (SynchronizedMultimediaIntegrationLanguage), который также является технологией, разработанной консорциумом W3C. В целях демонстрации возможностей SVG в сфере анимации, мы можем взять наш предыдущий пример с кругом и анимировать его, добавив элемент <animate>:
1: <?xml version="1.0" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
4: <svg xmlns="http://www.w3.org/2000/svg">
5: <title>A Circle</title>
6: <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none">
7: <animate attributeType="XML" attributeName="r" from="0" to="50" dur="2s"/>
8: </circle>
9: </svg>
Анимация может запускаться по определенному событию, например по событию "onmouseover", "onclick", либо с помощью скрипта, что позволяет создавать интерактивную графику. У каждого элемента ко всему прочему есть еще и свои собственные события, к которым также можно привязывать скрипты. Короче, существует множество способов сделать SVG-документ интерактивным, и делается это весьма просто. Создание сложных анимаций и сложных наборов графических изображений также не вызывает никаких трудностей в SVG. Любой объект в SVG-документе является XML-элементом, и к любому этому элементу можно получить доступ через DOM. Благодаря этому вы можете определить, как и куда каждый из элементов должен двигаться, как и на какие события реагировать.
С помощью скриптов можно поменять любое значение любого элемента в документе, а также поменять взаимное расположение элементов относительно друг друга, и всю структуру документа. Изменение структуры документа может играть важную роль, так как от этого зависит то, как документ будет выводиться на экран. Например, если элемент <line> (линия) расположен в документе после элемента <circle> (круг), линия будет выведена поверх круга.
SVG в процессе
Разработка спецификации SVG по-прежнему продолжается. В настоящее время спецификация SVG 1.1 приобрела статус LastCallWorkingDraft (Окончательный рабочий черновик проекта). Также в разработке находятся спецификации SVGBasic и SVGTiny, предназначенные для мобильных устройств, что позволит в будущем мобильным телефонам и наладонным компьютерам выводить на экран SVG-файлы. Разработка этих спецификаций приведет в конечном счете к широкому признанию и использованию SVG точно так же, как непрекращающаяся разработка HTML привела к расцвету этой технологии.