Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 704 / 58 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Лекция 6:

Internet Explorer 9. SVG и GPU

Аннотация: В данной лекции мы хотим рассмотреть особенности IE9, непосредственно связанные с отображением веб - содержимого браузером.

GPU - акселерация

Одним из самых заметных и значимых новшеств в IE9 является использование GPU - ускорения. Помимо ускорения графики и HTML5 - видео, скорость отображения шрифтов также возросла, за счет поддержи Direct2D и DirectWrite.

Поддержка HTML5 video в IE9 была продемонстрирована еще на конференции MIX, но в первые две тестовые сборки она не попала. Зато было заявлено, что в июне, в третьей сборке мы HTML5 video уже увидим. Примечательно, что HTML5 Video в IE9 также ускоряется через GPU, что позволяет смотреть HD-видео без проблем и нагрузки на CPU.

Отметим, что единого мнения по тому какой кодек использовать в качестве стандартного в спецификации HTML5 – нет. Позиция Microsoft такова: IE9 будет поддерживать h264 из коробки, так как он встроен в системы, на которых будет распространяться IE9. Кроме того, Microsoft поддержала проект WebM и заявила о поддержке кодека, в случае, если пользователь самостоятельно установит его в Windows.

Соответственно, для поддержки любого нового кодека в IE необходима его установка в систему. h264 встроен в Vista и Windows 7 изначально и с ним нет проблем.

Оценить GPU-акселерацию SVG можно по следующей ссылке http://ie.microsoft.com/testdrive/Graphics/GraphicsAccelebration/Default.xhtml

SVG в IE9

SVG (масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как HTML и XHTML. Разрабатывается с 1999 года, в 2001 году вышла 1.1 версия, которая остается актуальной до сегодняшнего дня, в активной разработке версия 1.2. В основу SVG легли языки разметки VML и PGML.

К преимуществам SVG относят:

  • Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
  • Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
  • Возможность увеличения - вы можете увеличить любую часть изображения SVG без потери качества.
  • Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
  • Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых серверов.
  • Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например "onmouseover" или "onclick" ), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
  • SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
  • SVG документы легко интегрируются с HTML и XHTML документами. Внешний SVG подключаются через тег <object>, значение атрибута data — имя файла с расширением ".svg", содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
  • Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.
  • Совместимость с технологией Java - SVG совместим с высокотехнологичным Java-графическим движком Java 2D API.

Internet Explorer 9 реализует стандарт SVG согласно документу Scalable Vector Graphics (SVG) 1.1 (Second Edition)

( http://dev.w3.org/SVG/profiles/1.1F2/publish/) Согласно HTML5, SVG-код может быть включен в разметку наравне с HTML. Соответственно, к SVG-тегам может применятся CSS. Возможность внедрять изображения в SVG позволяют накладывать поверх них графику и текст.

Internet Explorer 9 поддерживает четыре возможных типа внедрения кода SVG: в HTML, в XHTML, в тег object, как документ .svg.

В HTML5 SVG может встраиваться непосредственно в код HTML. Текущие веб-страницы могут быть обновлены для включения SVG с небольшим изменением общей структуры.

На текущий момент в IE9 поддерживаются следующие элементы (по крайней мере, частично):

  • Методы вложения: строчный HTML, строчный XHTML, <object>, .svg-документы
  • Структуры: <svg>, <defs>, <use>, <g>, <image>
  • Формы: <circle>, <ellipse>, <rect>, <line>, <Polyline>, <polygon>, <путь>
  • Текст
  • Заливка, выделение, (CSS3) цвет
  • DOML2 Core и SVGDOM
  • События
  • Презентационные аттрибуты и стилизация CSS
  • Преобразования: translate, skewX, skewY, scale и rotate.
  • Методы вложения: <embed>, <iframe>, <img>, css image, .svgz
  • Градиенты и шаблоны
  • Обрезку, наложение маски и составление
  • Курсор, маркер

В заключении отметим, что все изложенные в данной лекции особенности IE9 косвенно указывают на изменения в самой концепции предоставления веб - услуг. Формируется тенденция, при которой минимизируется нагрузка на сеть и сервер, в то время как компьютер - клиент берет на себя больше вычислительных функций ( GPU - акселерация ).

Дополнительные источники

  1. http://samples.msdn.microsoft.com/ietestcenter/#html5
  2. http://samples.msdn.microsoft.com/ietestcenter/#svg11e2
  3. http://ie.microsoft.com/testdrive/Default.html
  4. http://xml.nsu.ru/extra/svgintro_1.xml
  5. http://blogs.msdn.com/b/ieru/archive/2010/03/26/svg-in-ie9-roadmap.aspx