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

В рамках наших зобов’язань щодо забезпечення сумісності ми раді повідомити про підтримку формату масштабованої векторної графіки (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.

Візьмемо, наприклад, поведінку, яка виникає, коли елемент має негативні значення для 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>

Тут можна вставити векторні зображення за допомогою рядкового 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: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, тег

У нижчеподаній таблиці вказано, як включити 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 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 підтримуються наступні елементи (принаймні, частково):

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

У майбутньому оновлені версії IE9 Platform Preview будуть підтримувати:

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*