Веб-разработчик, облачные технологии
25,7
рейтинг
2 июня 2010 в 11:31

Разработка → Internet Explorer 9: наиболее полное руководство разработчика (и не только), часть 2

image

В первой части этого материала я говорил о нововведениях в 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 не достаточно ясны и реализуются браузерам по-разному, например:

image

Касаясь конкретно данного случая, 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>


Результатом является следующее изображение:

IE9 Platform Preview displaying the above svg. There is an image with two circles drawn on it.

Internet Explorer 9 поддерживает четыре возможных типа внедрения кода SVG: в HTML, в XHTML, в тег object, как документ .svg. Следующая таблица демонстрирует эти возможности:

image

К слову сказать, поддержку SVG элемента внутри object пока не реализовал ни один другой браузер. Да и другие возможности так же пока отсутствуют в браузерах конкурентов (колонки представлены Mozilla Firefox 3.6.3, Opera 10.52, Apple Safari 4.05, Google Chrome 4.1). Тесты представлены совместно с W3C.

image

image

Ознакомится с этими и другими сводными таблицами результатов тестирования браузеров через тесты разработанные совместно с 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> пока не реализована
Большим поюсом IE9 является то, что инструменты разработчика представленные в нем позволяют налету редактировать svg-код, превращая таким образом IE9 в своеобразный SVG-редактор.

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>


image

<polyline points=«15, 5, 100 8,3 150»
fill=«orange»
stroke=«black»
stroke-width=«4»/>


image

<polygon points=«15, 5, 100 8,6 150»
fill=«orange»
stroke=«black»
stroke-width=«4»/>


image

<path d=«M30,60 l 50,0
a25,45 0 0,1 50,0 l 50,0»

fill=«green»
stroke=«blue»
stroke-width=«4» />


image

Вы можете опробовать другие богатые демонстрации SVG на специальных страницах, подготовленных командой Internet Explorer, здесь я приведу их краткую аннотацию:

Atlas zur Europawahl 2004 in Deutschland


image

Представляет собой интерактивный атлас Германии с разными статистическими данными, карта раскрашивается в разные цвета в зависимости от выбора пользователя.

The United Nations Systems Organization Chart


image

Диаграмма построенная на SVG с возможностью почти бесконечного скроллинга. Демонстрирует преимущества векторной графики в масштабировании.

Business Charts


image

Демонстрация SVG показывающая возможности в построении нативных графиков и диаграмм в браузере.

SVGoids


image

Представляет собой игру написанную на SVG и JavaScript. При нажатии кнопки “n” (добавляет анимированные примитивы в фоне) наглядно демонстрирует преимущества GPU-ускорения отображения векторной графики.

Falling Balls


image

Демонстрация GPU-ускорения и скорости нового движка в IE9. Расчет физики производится в демонстрации с помощью движка Box2D Physics Engine. Так как код большой, отображение шариков может произойти с задержкой при переходе на страницу в первый раз, необходимо дождаться.

Практические примеры диаграм


image

Демонстрация содержит три диаграммы созданные с помощью SVG, которые можно скролировать приближая детали.

Вместо заключения


В этой части статьи я постарался рассказать о реализации и поддержке SVG в Internet Explorer 9. В следующей статье я расскажу про WOFF, ICC профилях, форматах TIFF и JPEG XR, изменениях в инструментах разработчика и интерфейсе пользователя.

PS: что насчет Canvas?


Возникает много вопросов по поводу того, будет или нет поддерживать элемент canvas IE9. Точного ответа на этот вопрос нет, но есть пара спекуляций:
  1. Патентами на canvas обладает Apple и как упоминается в wiki вопрос лицензирования не такой открытый как хотелось бы. Вполне возможно, что до полного разрешения этого вопроса, Microsoft остережется реализовывать canvas.
  2. Однако, с другой стороны, в интернете была следующая утечка: компания AMD заявила (но потом убрала заявление) о том, что IE9 будет поддерживать и ускорять через GPU canvas и что видео-карты AMD все это поддерживают.
Пока вопрос не ясен, мы можем принимать любую из точек зрения: будет или не будет canvas в IE9.
Владимир @XaocCPS
карма
776,6
рейтинг 25,7
Веб-разработчик, облачные технологии
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (40)

  • –1
    Мне интересно, почему для платформ превью не делают нормальный gui? не знаю кто как, а я бы ие9 пользовался как основным браузером с радостью…
    • –4
      я об этом еще планирую написать. если коротко — есть мнение, он наверняка будет сильно отличаться и поэтому его пока скрывают
    • 0
      Может, чтобы потом этим GUI не пользовались как обычным браузером?
  • +10
    IE *неожиданно* проходит тесты, написанные разработчиками IE
    Хотя для него и это большой успех =)
    • 0
      Вы знаете компании, которые иначе поступают?
  • НЛО прилетело и опубликовало эту надпись здесь
    • –5
      >> слышать от почти самой богатой IT-корпорации

      корпорация по этому поводу не говорила ничего, в статье представлены только мои размышления, я к MS отношения не имею
      • НЛО прилетело и опубликовало эту надпись здесь
        • +4
          Мягкие хорошо поощряют своих евангилистов
      • 0
        Это такая себе молитва верстальщиков :)
  • +1
    Microsoft в грядущем Internet Explorer 9 первым внедряет инновационное GPU-ускорение
    RLY?
    • –3
      естественно, как я и говорил, разработчики браузеров сразу же обеспокоились поддержкой ускорения, как только оно было показано в действии в IE9. Ну и directwrite для сглаживания текста — это еще не все ускорение, доступное в IE9.
      • 0
        Ну и славно, ждем инноваций в виде канваса в ИЕ10.
      • +9
        У вас майкрософт головного мозга. Опера заявляла о работе над аппаратным ускорением полтора года назад, билд мозилы был доступен пол года назад.
        • +1
          >>билд мозилы был доступен пол года назад.
          Ну да, через пару дней как MS показала ie9 с gpu на pdc09.
          • +3
            Судя по тому, что та версия всетаки работала, причем без видимых глюков и была действительно много быстрее, реализация прикручивалась не несколько дней. Хотя, кто знает.
    • –1
      На сколько я знаю, тот же гугль не собирается аппаратное ускорение делать, что бы остаться платформо-независимым.
      • –1
        И вообще, DirectWrite в этом виде нету и не будет в Windows XP, а ведь Windows XP всё ещё пользуются тысячи и десятки тысяч вебочитателей на нетбуках, а также на не так уж давних настольниках и ноутбуках, на которых Vista или Win7 не ставились или были снесены за жадность к ресурсам.
        • +1
          Уважаемый Мицгол, а почему вы не пишите «сетекниги» и «запискокни»? Ведь есть же вебочитатели и настольники. Подозреваю, что есть и наколенники.
          • 0
            Вы сперва добейтесь предложите свой вариант вместо вебочитателей, чтобы был удобный и не блевотный, а потом уж sarcasm on. Айтишный русский сильно засорён, и хорошо, когда кто-то пытается это исправлять.
            • +2
              Суровые русские айтишники очень часто читают литературу в оригинале, а он, как вы понимаете, совсем не русский. Именно поэтому в русском айтишном столько англицизмов. Не вижу в этом большой проблемы. И где там грань, до которой надо переводить, за которой — нет?
              • 0
                Грань такова — пишете по-русски, избегайте ненормативной лексики без нужды. А если уж приходится её употреблять, то она лучше пусть будет с русскими корнями (вебочитатель), чем иначе. Я видел множество примеров такого словотворчества, и никому не мешало, а данный выпад, похоже, был вызван исключительно тем, что это Мицгол. Придуманное мной слово «знаконабор» в смысле «character set» не породило никакой критики вообще, будучи употребляемым в топиках и коментах.
                • +3
                  Предлагаю не развивать оффтопик не уходить от темы публикации еще дальше. Мне все равно кто такой Мицгол, просто у меня глаз на «вебочитателях» и «настольниках» споткнулся, а мозг напрягся. На вашем «знаконаборе» споткнулись оба глаза. Лучше уж «набор символов». Это точно по-русски.
      • +3
        А опера собирается и собирается остаться платформонезависимой. Все от лени.
  • +6
    Известно, что SVG – это плод скрещивания двух технологий: PGML и Microsoft VML. После того, как вместо принятия VML, который проталкивался Autodesk, Hewlett-Packard, Macromedia, Microsoft, и Visio
    Разве не все эти фирмы вместе придумывали этот стандарт?
    Серьезность намерений Microsoft поддерживать стандарты SVG подтвердил и выход официального руководства VML to SVG Migration Guide.
    Не работает ссылка.
    К слову сказать, поддержку SVG элемента внутри object пока не реализовал ни один другой браузер.
    Как-то странно, у меня в блоге вертикально написанное время несколько лет сделано при помощи SVG, SVG вставлен в object. Все браузеры, кроме IE, это понимают.
    • –4
      >> Разве не все эти фирмы вместе придумывали этот стандарт?

      вы правы, поправил текст

      >> Не работает ссылка

      fixed

      >> Все браузеры, кроме IE, это понимают

      имеется в виду встраивание не через атрибут data, как очевидно у вас сделано, без возможности обращения чреез dom к коду SVG, а просто как вложенная конструкция.

      • –5
        парсер съел теги:

        <OBJECT><SVG height=100px width=100px> <RECT width=100px height=100px fill=green></RECT></SVG>

        Так тоже браузерами отображается? Можно проверить на тестовой странице

        samples.msdn.microsoft.com/ietestcenter/html5/svghtml_harness.htm?url=SVG_HTML_Elements_001

        долджен быть зеленый квадрат
        • –3
          Проверил на том, что есть под рукой: Chrome 5.0.375 тест не проходит, Firefox 3.6.3 тест не проходит
          интересно как дела у оперы
          • +1
            Аналогично
        • +5
          А можете подробнее рассказать, почему это должно работать именно так?
          • +3
            А главное, зачем? :)
  • 0
    Просьба к разработчикам IE9 — сделайте его намного лучше предыдущих версий, я пользуюсь этим браузером, но в нем куча багов, из-за которых постепенно перехожу к мозиле, но в ие нравятся закладки — юзабильно сделаны, в мозиле хуже, но там меньше багов.
  • +7
    Хаос, я знаю ты евангелист в мс, но признайся, пользуешься ежедневно explorerом?
    • 0
      Да, было бы очень интересно user agent XaocCPS'а узнать :)
  • +3
    А нашем подкасте с csharpus правильно было сказано что разработчикам было бы легче, если бы IE вообще не существовало. Поддержка SVG в 2010м году — это вообще плевок в лицо всем кого интересует (интересовал) этот формат. Поезд, как говориться, давно уже ушел.
    • –3
      >> Поезд, как говориться, давно уже ушел

      Я согласен с тем, что svg нужно было реализовать раньше. Но почему «поезд ушел»? Люди перестали сайты делать? В web больше не нужна векторная графика? Поясни мысль, пожалуйста.
      • +1
        Если бы IE поддерживал SVG тогда, когда все начиналось, в эту тему влились бы люди, понаделали бы красивых демок и т.д. Были бы прикольные сайты, стандарт развивался бы, и так далее. Но поскольку МС затянуло (а замечу что в Chrome, Opera, и т.п. все прекрасно работает), поезд уже капитально ушел.

        Буду ли я делать SVG на своем сайте? Нет, не буду, т.к. знаю что вагон и маленькая тележка довольных пользователей сидят на IE6--IE8 и им абсолютно до лампочки до моих технических изысков.

        На самом деле очень жаль — мне SVG нравился.
        • НЛО прилетело и опубликовало эту надпись здесь
          • –1
            Это конечно вариант. А где можно почитать про то, как это делается?
            • НЛО прилетело и опубликовало эту надпись здесь

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.