Дополнительные сведения о SVG
В первой предварительной версии платформы Internet Explorer 9 было объявлено о начале поддержки SVG в Internet Explorer 9. Как говорилось ранее, SVG — это формат векторного изображения, созданный консорциумом W3C. На третьем и четвертом предварительных показах платформа Internet Explorer 9 продемонстрировала поддержку всех функциональных возможностей SVG. В число основных дополнений входит поддержка градиентов, шаблонов, отсечения области и маскирования. Эти функции используются для создания изображений с глубиной и текстурой. Как правило, эти функции можно найти в сложных SVG-файлах. Новые возможности, как и остальные функции SVG в Internet Explorer 9, поддерживают аппаратное ускорение. Аппаратное ускорение позволяет повысить производительность, особенно для сложных вычислений, таких как отсечение и маскирование. Мы продолжим сотрудничество с рабочей группой SVG, чтобы устранить неясности с SVG 1.1 выпуск 2 и продемонстрировать возможности взаимодействия с реализацией SVG в Internet Explorer 9.
9 вещей, которые мне нравятся в формате SVG
Преимущества формата SVG многогранны. Этот формат невероятно гибок, обладает большим потенциалом и поэтому идеально подходит для различных целей. Ниже перечислено 9 причин, по которым формат SVG может сыграть важную роль в HTML5.
1. Масштабируемость
Безусловным преимуществом формата SVG является масштабируемость, что подтверждается его названием масштабируемая векторная графика. Благодаря этому преимуществу формат SVG идеально подходит для карт, диаграмм и графиков, т. е. изображений, в которых детали важнее общего представления. В формате SVG четкость графики поддерживается при любых разрешениях. Можно один раз создать эмблему организации и значок веб-сайта и затем использовать их в различных местах или масштабировать с требуемым увеличением. Одно и то же изображение не нужно сохранять с разными разрешениями, поскольку изображение настраивается в соответствии с условиями использования. Как правило, карты просматриваются как единое целое изображение, однако должны также поддерживать возможность детального просмотра выбранного участка. В настоящее время самым распространенным форматом для карт является PDF. Этот формат упрощает масштабирование карты, поддерживает высококачественную печать с различными разрешениями и предоставляет функцию поиска в документе. В формате SVG все эти положительные характеристики имеют встроенную поддержку, поэтому подключаемые модули не требуются. Для упрощения навигации по различным разделам одного документа можно определить предварительные представления документа.
2. Поддержка сценариев
Формат SVG поддерживается моделью DOM, что упрощает создание сценариев и использование JavaScript в элементах SVG. Поскольку фигуры SVG являются графическими объектами, родственными элементам HTML, при создании сценариев SVG используются общие шаблоны, которые уже знакомы разработчикам. Элементы SVG могут принимать обработчики событий. Их можно изменять с помощью модели DOM или методов setAttribute() и getAttribute() DOM L2 Core. Все атрибуты, которые описывают элемент SVG (начиная от расположения и цвета и заканчивая фигурой элемента), можно изменять. В примере ниже показано, как использовать обработку событий и сценарий для создания интерактивных объектов SVG.
Your browser or viewer does not support xhtml with svg, view this post in IE9 or another browser to use the examples. Get IE9 Platform Preview.
Script:
var colors = ["orange", "black", "yellow", "red", "blue", "fuchsia"];
var curColor = 0;
function alternateColor() {
var circle = document.getElementById("myCircle");
curColor = (curColor + 1) % colors.length;
circle.setAttribute("fill", colors[curColor]);
circle.setAttribute("stroke", colors[curColor]);
}
SVG:
<svg xmlns="https://www.w3.org/2000/svg" height="150" width="150">
<circle onclick="alternateColor();"
cx="75" cy="75" r="50"
fill="orange"
stroke="orange" stroke-opacity=".5" stroke-width="10"
id="myCircle"/>
</svg>
3. Поддержка стилей
Существует несколько способов добавления элемента SVG на веб-страницу. SVG-файл может быть указан в тегах <embed>, <object>, <iframe> и <img>. Изображение SVG можно добавить с помощью CSS в качестве фонового изображения или изображения стиля списка. Для полной интеграции SVG и страницы можно добавить XHTML или HTML5. Изолированные документы SVG и встроенные элементы SVG получают полные преимущества за счет полной интеграции с веб-страницей. Элемент SVG рассматривается как один из элементов HTML, поэтому к нему применяются блоки CSS, которые используются для задания стиля всей страницы. Содержимое веб-сайтов, вместе со значками, эмблемами, элементами навигации и остальными графическими объектами SVG, поддерживает отдельные таблицы стилей. Для управления выводом изображения SVG на печать можно использовать таблицу стилей печати. Посмотрите пример, приведенный ниже. При использовании веб-браузера, поддерживающего формат SVG, можно переключаться между таблицами стилей для просмотра, как при этом изменяются изображения SVG.
4. Поддержка поиска
SVG — это формат, основанный на XML, поэтому он состоит из элементов и атрибутов, которые удобны для восприятия человеком. Текст в SVG-файле отображается как текст в разметке. Формат XML поддерживает текстовый поиск в документах, что недоступно в более традиционных форматах GIF и PNG. Для разработчиков это означает, что текст в изображениях SVG доступен для индексирования поисковыми системами. Благодаря этому поисковая система может полностью проиндексировать веб-сайт. Например, блок-схема может быть самостоятельно проиндексирована поисковой системой без необходимости расшифровки каждого элемента блок-схемы.
5. Доступность
Помимо функции поиска, еще одним из преимуществ текстового формата SVG является доступность. В отличие от точечной графики, которая объединяет заголовок текста и описание в один элемент, элементы <title> и <description> могут применяться к любому элементу SVG. Веб-разработчики могут описывать каждый отдельный компонент в дополнении ко всему документу, что упрощает чтение документа. Документ SVG имеет более четкую и понятную структуру. Кроме того, для упрощения навигации по выбранным разделам SVG можно добавить атрибуты, поддерживающие фокусировку.
6. Декоративный текст
Формат SVG может использоваться на веб-сайтах с ресурсоемкой графикой. Для этого можно использовать файлы HTML5 или XHTML. Формат SVG можно использовать в заголовках с декоративным текстом. К тексту SVG можно применить больше стилей, чем к тексту HTML. В тексте SVG можно использовать градиенты и шаблоны. В отличие от текста HTML, текст SVG также может содержать штриховку. По сравнению с точечными изображениями текст SVG более гибок с точки зрения редактирования. При использовании в сочетании с блоком CSS текст в нескольких областях документа может отображаться одинаково, как заголовки HTML. А вместе с поддержкой WOFF в IE9 можно применять такой же шрифт WOFF на всей странице! Текст SVG можно переворачивать или располагать в требуемой плоскости. Резюмируя, можно сказать, что текст SVG обеспечивает большую гибкость и креативность на веб-странице. Чтобы узнать, как легко и просто создать декоративный текст, посмотрите пример ниже.
7. Формат SVG, управляемый данными и создаваемый сервером
SVG — это спецификация XML, которая позволяет использовать SVG в качестве формата изображений, создаваемых сервером. XML-код, создаваемый сервером, используется довольно широко. В качестве двух примеров можно привести веб-каналы RSS и Atom. Для отображения карт, диаграмм и графиков часто используются данные, находящихся в хранилище. Для этих типов документов формат SVG является основным кандидатом. Благодаря простоте создания XML-кода SVG является по-настоящему фантастическим форматом для создания информационных изображений этого типа.
8. Удобство работы с браузером
По сравнению с подключаемыми модулями сторонних производителей (например, Flash или Silverlight), одним из преимуществ формата SVG является встроенная поддержка веб-браузера, которая предоставляет несколько преимуществ. Для работы с форматом SVG пользователям не требуется устанавливать надстройки. Встроенная поддержка обеспечивает удобство для пользователя и снижает риск потенциальных уязвимостей, возникающий при использовании надстройки. В Internet Explorer 9 поддерживается аппаратное ускорение SVG, которое позволяет сделать работу пользователей более эффективной и удобной. Кроме того, SVG обеспечивает более тесную интеграцию с разметкой страницы, моделью DOM и сценариями для обеспечения совместимости программной модели и улучшения взаимодействия с пользователем.
Поддержка формата SVG в веб-браузере Internet Explorer 9 соответствует сегодняшним представлениям об изображении и ожиданиям пользователей от изображения: а) сохранение в форматах точечных изображений PNG и BMP; б) копирование и вставка в документ Word или презентацию PowerPoint в качестве растрового изображения, например в форматах PNG, JPEG и GIF, которые наиболее распространены на сегодняшний день в Интернете; в) установка в качестве фона рабочего стола; г) печать изображения SVG. Преимущества изображений в формате SVG для веб-браузера: а) сохранение в формате SVG; б) копирование и вставка в редактор Inkscape для редактирования в формате SVG; в) текст SVG, поддерживающий поиск. Встроенная поддержка формата SVG позволяет сделать работу пользователей с веб-браузером более эффективной и удобной.
9. Изучение и просмотр исходного кода
Поскольку SVG является расширением XML, процесс изучения формата SVG — это адаптация знаний о XML/HTML. Большинство из нас изучали HTML с помощью функции "Просмотр HTML-кода" веб-браузера на понравившихся веб-сайтах. SVG работает по такому же принципу: чтобы изучить и понять принцип работы графики SVG, воспользуйтесь функцией "Просмотр HTML-кода" в SVG-файле или HTML5-файле со встроенным SVG. Элементы SVG работают со средствами отладки Internet Explorer 9. Поэтому SVG — это веб-технология, которую легко взять на вооружение.
Кроме того, несколько наиболее распространенных инструментов, таких как Visio или Adobe Illustrator, уже поддерживают вывод SVG-файлов. Inkscape — это другое фантастическое средство для создания SVG. Этот редактор специально разработан для использования SVG в качестве выходного формата и к тому же предоставляется бесплатно. Использование формата SVG в Интернете — это естественная эволюция.
Призыв к действию
Если вы планируете использовать формат SVG на своем веб-сайте, возможно, также потребуется обеспечить совместимость веб-сайта с веб-браузерами, которые не поддерживают формат SVG. В зависимости от контекста, формат SVG может использоваться для текста, изображения или того и другого. Чтобы определить, какой формат используется для отображения, используйте обнаружение функции, а не веб-браузера. Формат SVG содержит набор строк функций, предназначенных для описания поддержки SVG различными модулями. С помощью инструкций try-catch и метода hasFeature() можно определить, поддерживается ли формат SVG веб-браузером. Пример кода приведен ниже.
try {
if (document.implementation.hasFeature("https://www.w3.org/TR/SVG11/feature#Structure", "1.1")) {
// использование формата SVG
}
else {
//требуется обеспечить совместимость
}
}
catch(e) {
// требуется обеспечить совместимость
}
Альтернативный вариант: если на страницу добавляются отдельные SVG-файлы, то можно использовать преимущества тега <object>, разместив в нем сведения для браузеров, которые не поддерживают формат SVG, как показано в следующем примере кода.
<object data="vectorPanda.svg" type="image/svg+xml"><img src="pandaFallbackImage.png"></object>
Если формат SVG уже используется в HTML5-страницах веб-сайта, для загрузки страниц в требуемом режиме документа убедитесь, что для HTML5-страниц задан правильный тип документа doctype. Если значение DocType не задано, Internet Explorer 9 использует режим совместимости и содержимое в формате SVG не отображается. Добавьте тег <!DOCTYPE html> в качестве первой строки разметки веб-страницы.
Если формат SVG используется в файле XHTML или непосредственно в качестве элемента SVG, убедитесь, что веб-сервер обрабатывает следующие типы MIME:
XHTML = application/xhtml+xml
SVG = image/svg+xml
Посетите веб-сайт Предварительное представление платформы и узнайте, как можно усовершенствовать свой веб-сайт! Поделитесь с нами хорошими идеями. Мы с благодарностью примем ваши идеи!
Дженнифер Ю (Jennifer Yu)
Руководитель программы