В первой части этого материала я говорил о нововведениях в Internet Explorer 9: поддержке CSS3, HTML5, DOM L2/L3 и других. Статья завершилась на интересном месте: поддержка рендеринга SVG-графики. Продолжим с этого места.
В этой части статьи я расскажу про поддержку SVG, HTML5 Video их ускорение через GPU-акселератор.
Статья вышла большой, поэтому материал о шрифтах WOFF, ICC профилях, форматах TIFF и JPEG XR, изменениях в инструментах разработчика и интерфейсе пользователя будут в следующей части.
Историческая справка
Прежде всего, хотелось бы окунуться в историю и посмотреть откуда появилась технология SVG и почему ее реализация в IE9 так затянулась.
Известно, что SVG – это плод скрещивания двух технологий: PGML и VML. После того, как вместо принятия VML, который проталкивался Autodesk, Hewlett-Packard, Macromedia, Microsoft, и Visio, W3C решила сформировать новую рабочую группу по разработке SVG, Microsoft, не поддержала такой ход и внедрила VML в свои продукты, в том числе в IE5, Microsoft Office 2000. В дальнейшем VML стал частью международных стандартов ISO/IEC 29500:2008 и ECMA-376 описывающих документы Office Open XML.
SVG разрабатывался с 1999 года и в 2001 году вышла рекомендация версии 1.1, которая действует и по сей день, пока версия SVG 1.2 остается в виде черновиков. Internet Explorer не поддерживал SVG вплоть до 8 версии включительно, реализуя только поддержку “родного” для Microsoft VML. Но времена меняются и большим сюрпризом стало объявление в январе 2010 года о том, что команда IE входит в рабочую группу W3C SVG. Стало ясно, что в грядущем IE9 появится поддержка SVG и так оно и оказалось – в представленной первой сборке такая поддержка была.
Microsoft вступив в группу SVG сразу же озаботилась совместимостью реализации стандарта. Оказалось, что многие вещи в SVG не достаточно ясны и реализуются браузерам по-разному, например:
Касаясь конкретно данного случая, IE9 следует спецификации SVG Tiny 1.2, которая предписывает пропускать отрицательные значения атрибутов rx, ry, но не считать их ошибкой (Opera делает так же).
Серьезность намерений Microsoft поддерживать стандарты SVG подтвердил и выход официального руководства VML to SVG Migration Guide.
SVG в Internet Explorer 9
Internet Explorer 9 реализует стандарт SVG согласно следующему документу SVG 1.1 2nd Edition Full.
Согласно HTML5, SVG-код может быть включен в разметку наравне с HTML. Соответственно, к SVG-тегам может применятся CSS. Возможность внедрять изображения в SVG позволяют накладывать поверх них графику и текст. Например, в блоге разработчиков можно найти такой код.
<!DOCTYPE html>
<svg width=«120» height=«90» >
<style>
.highlight {
stroke-width: 5px;
stroke: white;
fill: none;
}
</style>
<image x=«0» y=«0» width=«120» height=«90» xlink:href=«photos-a.ak.fbcdn.net/photos-ak-sf2p/v160/140/48/1107073/n1107073_31705640_3439.jpg»/>
<circle cx=«90» cy=«50» r=«15» class=«highlight»/>
<circle cx=«22» cy=«47» r=«10» class=«highlight»/>
<rect x=«0» y=«0» width=«120» height=«20» fill-opacity=".5" fill=«black»/>
<text x=«5» y=«15» fill=«white» font-size=«8pt» font-family=«Verdana»>we saw giant otters!</text>
<rect x=«0» y=«0» width=«120» height=«90» stroke-width=«1» stroke=«black» fill=«none»/>
</svg>
Результатом является следующее изображение:
Internet Explorer 9 поддерживает четыре возможных типа внедрения кода SVG: в HTML, в XHTML, в тег object, как документ .svg. Следующая таблица демонстрирует эти возможности:
К слову сказать, поддержку SVG элемента внутри object пока не реализовал ни один другой браузер. Да и другие возможности так же пока отсутствуют в браузерах конкурентов (колонки представлены Mozilla Firefox 3.6.3, Opera 10.52, Apple Safari 4.05, Google Chrome 4.1). Тесты представлены совместно с W3C.
Ознакомится с этими и другими сводными таблицами результатов тестирования браузеров через тесты разработанные совместно с W3C можно по этому адресу. Я планирую отдельную статью на эту тему.
Впрочем, и IE9 не реализует абсолютно все возможности SVG прямо сейчас. Первая и вторая тестовые версии IE9 реализуют поддержку следующих возможностей SVG:
- поддержка модулей Document Structure, Metadata и Extensibility: <svg>, <defs>, <use>, <g>, <image>, <desc>, <title>, <metadata>, <symbol>
- примитивы: <circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>
- модуль Paths module: <path>
- текст
- заливка, штриховка (Stroking), цвета через CSS3
- DOM L2 Core и SVGDOM (не полностью)
- события
- презентационные атрибуты и стили CSS
- трансформации: translate, skewX, skewY, scale, rotate
- поддержка модуля Coordinate Systems, Transformations and Units module
- градиенты, фильтры, SVGFonts и SMIL, Linking/Views(ViewBox), обрезка (Clipping), маскирование (Masking)
- неполная реализация функций работы с текстом
- не все элементы SVGDOM доступны на данный момент
- реализованы не все атрибуты
- поддержка SVG в виде image, .svgz, css-image, во фреймах <iframe> и <embed> пока не реализована
GPU-акселерация, HTML5 Video и кодеки
Microsoft в грядущем Internet Explorer 9 первым внедряет инновационное GPU-ускорение векторной графики и HTML5 video. Кроме того, благодаря поддержке Direct2D и DirectWrite, помимо ускорения графики, через GPU ускоряется и отображение шрифтов и их сглаживание.
Тут надо сказать, что производители других браузеров поспешили заявить о аналогичной поддержке этих возможностей. Такой прогресс, как результат конкуренции, очень радует.
Поддержка HTML5 video в IE9 была продемонстрирована еще на конференции MIX, но в первые две тестовые сборки она не попала. Зато было заявлено, что в июне, в третьей сборке мы HTML5 video уже увидим. Примечательно, что HTML5 Video в IE9 также ускоряется через GPU, что позволяет смотреть HD-видео без проблем и нагрузки на CPU. В ходе MIX, например, показали отображение двух HD-роликов одновременно с минимальной нагрузкой на CPU, тогда как Chrome не смог справится и с одним видео.
Интересен вопрос по поводу кодеков. Известно, что единого мнения по тому какой кодек использовать в качестве стандартного в спецификации HTML5 – нет. Одни говорят о Theora, другие за h264, масла в огонь подлил Google, который запустил проект WebM открыв свой видео-кодек.
Позиция Microsoft такова: IE9 будет поддерживать h264 из коробки, так как он встроен в системы, на которых будет распространяться IE9. Кроме того, Microsoft поддержала проект WebM и заявила о поддержке кодека, но только, если пользователь самостоятельно установит его в Windows. Это вызвано архитектурой IE, который являясь частью операционной системы использует системные кодеки, но не встроенные в себя. Соответственно, для поддержки любого нового кодека в IE необходима его установка в систему. h264 встроен в Vista и Windows 7 изначально и с ним нет проблем. Подробнее о позиции Microsoft можно почитать в блоге разработчиков IE.
Оценить GPU-акселерацию SVG можно в ходе тестов на специальной тестовой странице подготовленной разработчиками.
Примеры и демонстрации
В качестве примеров использования SVG я приведу материалы из блога разработчиков:
<?xml version=«1.0» standalone=«no»?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
«www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg version=«1.1» xmlns=«www.w3.org/2000/svg»>
<rect fill=«orange»
stroke=«black»
width=«150»
height=«75»
x=«50»
y=«25» />
</svg>
<polyline points=«15, 5, 100 8,3 150»
fill=«orange»
stroke=«black»
stroke-width=«4»/>
<polygon points=«15, 5, 100 8,6 150»
fill=«orange»
stroke=«black»
stroke-width=«4»/>
<path d=«M30,60 l 50,0
a25,45 0 0,1 50,0 l 50,0»
fill=«green»
stroke=«blue»
stroke-width=«4» />
Вы можете опробовать другие богатые демонстрации SVG на специальных страницах, подготовленных командой Internet Explorer, здесь я приведу их краткую аннотацию:
Atlas zur Europawahl 2004 in Deutschland
Представляет собой интерактивный атлас Германии с разными статистическими данными, карта раскрашивается в разные цвета в зависимости от выбора пользователя.
The United Nations Systems Organization Chart
Диаграмма построенная на SVG с возможностью почти бесконечного скроллинга. Демонстрирует преимущества векторной графики в масштабировании.
Business Charts
Демонстрация SVG показывающая возможности в построении нативных графиков и диаграмм в браузере.
SVGoids
Представляет собой игру написанную на SVG и JavaScript. При нажатии кнопки “n” (добавляет анимированные примитивы в фоне) наглядно демонстрирует преимущества GPU-ускорения отображения векторной графики.
Falling Balls
Демонстрация GPU-ускорения и скорости нового движка в IE9. Расчет физики производится в демонстрации с помощью движка Box2D Physics Engine. Так как код большой, отображение шариков может произойти с задержкой при переходе на страницу в первый раз, необходимо дождаться.
Практические примеры диаграм
Демонстрация содержит три диаграммы созданные с помощью SVG, которые можно скролировать приближая детали.
Вместо заключения
В этой части статьи я постарался рассказать о реализации и поддержке SVG в Internet Explorer 9. В следующей статье я расскажу про WOFF, ICC профилях, форматах TIFF и JPEG XR, изменениях в инструментах разработчика и интерфейсе пользователя.
PS: что насчет Canvas?
Возникает много вопросов по поводу того, будет или нет поддерживать элемент canvas IE9. Точного ответа на этот вопрос нет, но есть пара спекуляций:
- Патентами на canvas обладает Apple и как упоминается в wiki вопрос лицензирования не такой открытый как хотелось бы. Вполне возможно, что до полного разрешения этого вопроса, Microsoft остережется реализовывать canvas.
- Однако, с другой стороны, в интернете была следующая утечка: компания AMD заявила (но потом убрала заявление) о том, что IE9 будет поддерживать и ускорять через GPU canvas и что видео-карты AMD все это поддерживают.
