(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

SVG в дорожной карте IE9

Источник: thevista

В рамках наших обязательств по обеспечению совместимости мы рады сообщить о поддержке формата масштабируемой векторной графики (SVG) 1,1 (второе издание) в Internet Explorer 9 Platform Preview. Второе издание SVG содержит рекомендуемые обновления для первого издания SVG 1.1. Мы ожидаем, что SVG в случае обеспечения его поддержки разработчиками станет неотъемлемой частью всемирной сети. SVG имеет много преимуществ по сравнению с растровыми изображениями. В эпоху аппаратно-ускоренной графики пришло время для насыщенной и интерактивной графики.

SVG открывает дорогу новым мощным веб-приложениям. Формат использует специфические теги XML для создания векторных изображений. Это делает SVG более читаемым и редактируемым вручную, чем в других графических форматах, потому что файл SVG полностью состоит из разметки текста в векторном изображении, доступным для поиска. Кроме того, SVG выгоднее, чем DOM. Изображения можно программировать как графические объекты, позволяя задействовать гораздо более мощные веб-приложения. Теперь возможно создавать динамически генерируемые изображения без необходимости использования сценариев на сервере или дополнений к браузеру.

SVG предлагает массу различных преимуществ по сравнению с другими форматами. SVG-изображения масштабируемы с небольшим увеличением размера файла, но без потери качества, что делает его идеальным для использования в небольших изображениях и иконках. Кроме того, SVG является отличным форматом для изображений больших размеров. Карты, схемы, диаграммы - яркие тому примеры. Четкие границы маленьких изображений остаются нетронутыми даже тогда, когда изображения сильно уменьшаются. Ключевые элементы, например текст в организационной диаграмме или границы страны остаются четкими и читаемыми после масштабирования изображения. Сохранение информации в удобной для восприятия человеком разметке также делает SVG идеально подходящим для Wiki-подобных изображений, ведь они легко редактируется. SVG позволяет изменять надписи на графиках и диаграммах - для этого потребуется всего лишь простой редактор текста. Так как встроенная поддержка SVG в веб-браузерах продолжает расширяться, SVG становится все более перспективным вариантом для реализации интерактивного и анимированного веб-контента.

О совместимости
Мы ценим веб-разработчиков как наших клиентов и пытаемся донести до них, что SVG становится мощным инструментом, который может быть одинаково хорошо реализован в различных веб-браузерах. Иногда, однако, пути развития не совсем очевидны.

Патрик Денглер (Patrick Dengler), член рабочей группы SVG и старший программный менеджер Microsoft, работает в тесном контакте с рабочей группой SVG для оказания помощи в определении будущего SVG и реализации совместимости. Хотя первые спецификации SVG изданий получили статус "Рекомендуемый" еще несколько лет назад, в спецификации еще много пробелов. В результате текущая реализация SVG в основных веб-браузерах отличается как по охвату, так и по поведению. Нашей целью является упрощение жизни разработчиков, ведь мы стремимся к интероперабельности. В той части спецификации, которую мы реализуем, мы придерживаемся в непосредственной близости к текущей спецификации. В некоторых случаях наши решения были продиктованы поведением других браузеров и направлениями будущего развития SVG.

Возьмем, например, поведение, которое возникает, когда элемент <rect> имеет отрицательные значения для RX и RY. Это непонятная ситуация берет свои корни в спецификации 1,1. Запись на странице предполагает одно поведение, в то время как принципы обработки ошибок предлагают другое.

Код:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
   <rect x="10" y="10" width="50" height="80" rx="-10" ry="-10" fill="red"/>
</svg>

Так как же правильно? Presto (Opera) рассматривает отрицательные значения RX и RY как 0, Gecko (Firefox) вовсе не визуализирует прямоугольник, а Webkit (Chrome, Safari) использует указанные отрицательные значения RX и RY. Все основные браузеры поступают по принципу "кто во что горазд". В результате поведение отличается из-за незначительных несоответствий в спецификации 1,1. Забегая вперед, скажу, что спецификация SVG Tiny 1.2 уточняет поведение путем указания того факта, что отрицательное значение на самом деле не является ошибкой, оно просто не поддерживается. Это поведение, которое в IE9 реализовано следующим образом.

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

Код:
<!DOCTYPE html>
<p style="font-family:Georgia;font-size:9pt;">Здесь можно вставить векторные изображения с помощью строчного HTML! Они наследуют стили CSS от родительских элементов, равно как и другие элементы HTML5.
<BR>
<svg width="200" height="100">
    <circle cx="50" cy="50" r="45" fill-opacity=".5" fill="red"/>
    <circle cx="100" cy="50" r="45" fill-opacity=".5" fill="yellow"/>
    <circle cx="75" cy="100" r="45" fill-opacity=".5" fill="blue"/>
    <text x="40" y="70" fill="white">Colors!!</text>
</svg>
</p>

В IE9 Platform Preview этот код визуализируется следующим образом:

В дополнение к созданию изображений с нуля, вы можете использовать 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:fb_type=image fb_closeonclick=true fb_title='Открыть в полный размер' href="http://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>

В картах Google реализована схожая функциональность путем использования SVG для построения полилиний, наложенных на карты.

В дополнение к SVG в качестве строчного HTML, предварительная версия IE9 поддерживает включение SVG через строчный XHTML, тэг <object> и в качестве самостоятельного SVG-документа.

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

Строчный HTML 
Код:
<!DOCTYPE html>
...
<svg width="120" height="90">
your SVG markup
</svg>
...
Строчный XHTML 
Код:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="90">
your SVG markup
</svg>
...
</body>
</html>
Тег <object> 
Код:
...
<object data="your-SVG-image.svg"
width="100" height="100"
type="image/svg+xml"></object>
...
Документы .svg 
Код:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
your SVG markup
</svg>

Поддержка HTML5 означает, что SVG может быть стилизован с помощью CSS. Поддержка CSS действительно интегрирует SVG со страницей, позволяя разработчикам использовать изображения совершенно по-новому. Иконки и изображения можно стилизовать. Графики и карты могут окрашиваться на лету.

Демонстрация Стивена Синофски (Steven Sinofsky) в ходе MIX10 показала, что атрибутами SVG можно управлять с помощью Internet Explorer Developer Tools. Это так же просто, как вызов Developer Tools (F12), а затем щелчок на SVG-элементах в дереве HTML, а также настройка его стиля и атрибутов в панели свойств справа. Вы можете экспериментировать с Developer Tools, ведь это отличный способ познакомиться с SVG.

Platform Preview также обеспечивает базовую поддержку DOM. SVG-элементы могут создаваться и перемещаться, стилизоваться и анимироваться с помощью JavaScript. Если элемент существует в SVG Platform Preview, то для него поддерживаются большинство, если не все, интерфейсы SVGDOM. Игра SVG-OID и карта выборов Германии демонстрируют лишь малую часть потенциала SVG.

Для разработчиков VML, которые заинтересованы в изучении SVG, Сет МакЭвой (Seth McEvoy) написал VML в SVG - руководство по миграции. Он рассматривает VML и SVG, начиная с архитектуры и сравнивает их бок-о-бок. Настоятельно рекомендуется сспользовать более совместимый SVG взамен VML.

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

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

Основная часть стандарта SVG, которая поддерживается в Platform Preview, полностью реализована. Если элемент присутствует в Platform Preview, он наверняка обладает соответствующей поддержкой SVGDOM и может быть стилизован с помощью CSS или презентационных аттрибутов.

В будущем обновленные версии IE9 Platform Preview будут поддерживать:

  • Методы вложения: <embed>, <iframe>, <img>, css image, .svgz
  • Градиенты и шаблоны
  • Обрезку, наложение маски и составление
  • Курсор, маркер

Мы рекомендуем вам загрузить предварительную версию и оценить функциональность SVG! На сайте Internet Explorer Test Drive вы найдете несколько демонстраций, и он станет для вас отличной отправной точкой.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 01.04.2010 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
Microsoft 365 Business Basic (corporate)
Microsoft Office 365 для Дома 32-bit/x64. 5 ПК/Mac + 5 Планшетов + 5 Телефонов. Подписка на 1 год.
Microsoft Office 365 Персональный 32-bit/x64. 1 ПК/MAC + 1 Планшет + 1 Телефон. Все языки. Подписка на 1 год.
Microsoft Office для дома и учебы 2019 (лицензия ESD)
Microsoft Office 365 Бизнес. Подписка на 1 рабочее место на 1 год
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
CASE-технологии
Программирование на Microsoft Access
Corel DRAW - от идеи до реализации
Проект mic-hard - все об XP - новости, статьи, советы
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100