Реферат: SVG: Замена Flash-у

На протяжении последних 10 лет компания Macromedia является доминирующей силой, продвигающей векторную графику и анимацию в Web. Времена меняются и на горизонте появляются новые методы. В векторной графике появился новичок - ScalableVectorGraphics (SVG) (масштабируемая векторная графика), язык, основанный на XML, разрабатываемый консорциумом W3C.

Большинство из вас, читатели, помнят, что в начале 90-х годов Macromedia разработала продукт под названием Shockwave. Shockwave позволял разработчикам мультимедийных программ создавать анимации и даже программировать их, что открывало невиданные до селе возможности в интерактивной анимации.

Броузеры тех времен стали поддерживать Shockwave с помощью plug-in-ов, и вскоре Macromedia осознала, что необходимо создать облегченную версию Shockwave, которая будет предназначена исключительно для броузеров. В 1996 году Macromedia приобрела компанию FutureWavesoftware, чей продукт - FutureSplash - стал тем, что мы знаем как Flash 1.0.

Примерно в середине 90-ых на небосклоне стала восходить звезда языка XML, благодаря его простому методу организации данных. На языке XML было создано множество схем данных (dataschemas). Схемы данных описывали, например, как хранить и выводить математическую информацию (MathML), как описывать ресурсы общего характера (RDF), и даже как хранить и выводить химическую информацию (CML). Этот метод организации данных был положен в основу SVG.

Наступил 1999 год. Этот год - год рождения новой XML схемы данных - SVG. SVG схема определяет, как в XML записывается структура данных, описывающих векторную или растровую картинку. В спецификации языка SVG также описано, как создавать SVG-анимации, SVG-программы и документы. Все это делает SVG сильным конкурентом Flash-у.

Подробнее об SVG

С первого взгляда ясно, что спецификация языка SVG предлагает альтернативу многим функциям, имеющимся в наличии у Flash, а также добавляет много других. Ядром SVG является метод создания векторных графических элементов точно так же, как Flash строит всю анимацию на основных геометрических фигурах. Также как и Flash, SVG позволяет создавать анимацию для каждого элемента, позволяет управлять элементами с помощью скриптов через DOM, JavaScript, ECMAScript или с помощью любого другого скриптового языка, который поддерживается SVG-программой. В SVG разработчику доступны многие основные элементы, включая окружности, прямоугольники, эллипсы, многоугольники, кривые и текст. Так же как и в HTML, отображением элементов можно управлять с помощью стилей (CSS2), либо напрямую с помощью атрибутов.

В настоящее время существует множество SVG-броузеров и редакторов, позволяющих создавать и просматривать SVG-документы. Компания Adobe создала plug-in, который позволяет просматривать SVG-файлы в броузере, а также включил поддержку работы с SVG-Файлами в Illustrator 10. Другие компании, такие как JASC, Corel, Sun и IBM также включили в свои продукты определенную поддержку SVG. Так как схема SVG достаточно проста, вы можете без труда создать SVG-файл даже в простом текстовом редакторе.

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

1: <?xml version="1.0" encoding="UTF-8" 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: </svg>

Обратите внимание: первая строка - стандартный заголовок XML-документа, во второй и третьей строке расположен заголовок SVGDOCTYPE. В 4-ой строке располагается корневой элемент SVG-документа с указанием пространства имен (namespace) SVG. Внутри этого элемента располагается элемент <title> и элемент для рисования круга <circle>. В элементе <circle> мы задаем координаты центра круга (атрибуты cx и cy), радиус (атрибут r). Остальные атрибуты определяют, какой инструмент используется для рисования края круга, какой у края будет цвет, и каким цветом будет залит сам круг (этот атрибут имеет значение "none" - т.е. у круга заливки не будет) .

В SVG документ можно вставлять и другие элементы. Например, можно вставить PNG, GIF или JPG картинку с помощью элемента <image>. С помощью SVG-схемы можно определить свои собственные шрифты, и даже написать текст вдоль кривой. С помощью скритов можно менять все атрибуты всех этих элементов, а также создавать анимации, о чем речь пойдет ниже.

Работаем с SVG

Создать SVG файл крайне просто, и в отличие от Flash, для этого вам не понадобится пользоваться каким-либо графическим редактором или приобретать какое-либо ПО - plug-in от Adobe распространяется бесплатно. Эта простота дает SVG еще одно преимущество перед Flash: благодаря текстовой природе XML, SVG-файлы могут индексироваться поисковыми серверами. Таким образом вам не нужно создавать дополнительные метафайлы для поисковых серверов, как это делается в случае с Flash. SVG-документ можно с легкостью вставить в HTML-документ.

Так как SVG-формат базируется на XML, разработчики получают возможность строить SVG-изображения основываясь на данных, которые также могут храниться в XML-формате. Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных. Более того, можно например в SVG-графике отобразить, как располагаются столы в офисе, на основе данных, записанных в XML формате.

XML данные:

1: <?xml version="1.0"?>

2: <cubicles>

3: <cubicle north="10" east="15" width="10" length="10"/>

4: <cubicle north="0" east="0" width="10" length="10"/>

5: </cubicles>

XSL преобразование XML в SVG:

1: <?xml version='1.0'?>

2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

3: <xsl:template match="/">

--> ЧИТАТЬ ПОЛНОСТЬЮ <--