На прошлой неделе компания "Майкрософт" с помпой представила свой новый браузер IE 9, в котором была заявлена поддержка графического формата SVG. Таким образом, после многих лет ожидания векторный формат SVG получил полное признание практически всех разработчиков браузеров. Его давно в той или иной мере поддерживают остальные браузеры - Opera, Firefox, Chrome. Поэтому давайте в сей исторический момент познакомимся с этим форматом поближе.

Возвращение в Веб

Формат векторных изображений SVG был разработан Консорциумом W3С более десяти лет назад - в 1999 году. Консорциум W3C - это некоммерческая организация, занимающаяся разработкой открытых стандартов, например, HTML и XML.

Несмотря на то, что векторные изображения давно представляют интерес для веб-дизайнеров, этот формат никак не мог завоевать массовое признание. С одной стороны, с 1996 года уже приобрела популярность коммерческая технология векторной анимации Flash. С другой стороны, "Майкрософт", контролировавшая на тот момент практически весь рынок браузеров, не обращала никакого внимания на этот свободный векторный формат.

Но не получая признания в Веб, SVG нашёл пристанище у полиграфистов и стал одним из основных форматов в таких графических пакетах, как Adobe Illustrator и CorelDRAW. Также SVG полюбился различным свободным проектам, в частности, OpenDesktop, под чьим крылом находятся проекты Gnome и KDE. И линуксоиды теперь на своих рабочих столах могут созерцать векторные иконки именно в этом формате.

Время шло, альтернативные браузеры потихоньку отвоёвывали у Internet Explorer место под солнцем, и все они в той или иной мере поддерживали SVG. Наиболее полной поддержкой этого формата сейчас может похвастать норвежский браузер Opera 10.50. И вот, наконец, сдались и в Редмонде, объявив полную поддержку SVG в грядущем IE9.

Трудно говорить о реальной мотивации "Майкрософт" в отношении SVG. Возможно, софтверный гигант вспомнил, что SVG - это XML-формат, а "Майкрософт" ведь любит XML. Но, что бы там ни было, SVG возвращается туда, где его настоящее место, - и это Всемирная Паутина.

Картинка - это текст

SVG (Scalable Vector Graphics) - это масштабируемая векторная графика, основанная на текстовой разметке XML. Другими словами, если растровая графика форматов JPEG, GIF, PNG - это матрицы пикселов, то содержание векторного SVG описывается простым текстом. И, соответственно, такую картинку можно открыть для редактирования в любом простом текстовом редакторе, например, Notepad.

Изображение в векторных форматах формируют не пикселы, а геометрические примитивы - линии, круги, треугольники, а также текст. По сути, векторный рисунок - это текстовой список всех геометрических фигур, а также их атрибутов, что в совокупности составляют векторное изображение. Вот так, для примера, может выглядеть код картинки чёрного квадрата Малевича.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns="http://www.w3.org/2000/svg"
 width="640" height="480">
<rect fill="#000000" id="svg_2" height="200"
 width="200" y="100" x="209"/>
</svg>

Как видите, формат очень похож на HTML. Для просмотра можно сохранить этот текстовой файл с расширением svg и открыть его в любом современном браузере. Непосредственно в содержание веб-страницы изображения SVG внедряются при помощи тега <object>.

К возможностям SVG относится и анимация. В данном формате анимация может осуществляться с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Но также возможна анимация и посредством скриптовых языков на основе спецификации ECMAScript. То есть геометрическими примитивами можно управлять с помощью JavaScript.

В SVG документ можно вставлять и другие элементы. Например, можно вставить PNG, GIF или JPG-картинку.

Возможности и недостатки

Какие же основные преимущества и недостатки этого формата, по сравнению с растровыми-пиксельными?

Главная фишка векторных форматов - это абсолютная масштабируемость. То есть векторное изображение можно уменьшать или увеличивать сколько угодно, и искажений изображения не будет. Причём при масштабировании не будет изменяться и размер файла векторного изображения. А вот масштабирование растрового изображения на 200-300% и более приводит к появлению заметных искажений и артефактов, а также значительному изменению размеров конечного файла.

Так как SVG текстовой формат, такие картинки легко индексируются поисковыми системами.

Элементы SVG интегрируются непосредственно в объектную модель веб-страницы DOM. А это даёт широкие возможности по динамическому изменению элементов картинки и их атрибутов через JavaScript.

Но следует учитывать, что SVG-изображения - это рисунки и только рисунки. А вот конвертировать фотографии в векторный формат теоретически можно, но на практике лучше этого не делать, если не стоят какие-то специфические эстетические задачи. Векторные форматы совершенно не подходят для фотографий.

К тому же "тяжёлые" SVG-картинки с большим количеством элементов могут потребовать значительных вычислительных ресурсов. Ведь такой уж принципиальной разницы между рендерингом 2D и 3D нет.

Кого "убьет" SVG?

Естественно, бурно обсуждается вопрос, какие технологии или форматы могут быть вытеснены из веб-разработок с приходом SVG. Почему-то считается, что SVG - это "убивец" Flash, что не совсем верно.

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

Формат SVG, конечно же, значительно лучше подходит для задач анимации, чем GIF-анимация.

Что касается иллюстративной, содержательной графики, то формат SVG отлично справится с графиками, диаграммами, чертежами, схемами, географическими картами, просто рисунками. И в области иллюстраций, скорее всего, придётся потесниться формату PNG.

А вот фотографические изображения, как мы уже говорили выше, это то, для чего SVG совершенно не предназначен, поэтому формату JPG ничего не грозит.

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

Кстати, следует помнить и о технологии Canvas из будущего стандарта HTML 5, который тоже предназначен для формирования изображений при помощи функций JavaScript и который может использоваться для тех же целей, что и SVG, и Flash, и даже Silverlight. Неудивительно, что о его поддержке "Майкрософт" молчит.

Программы для работы

Так как SVG является текстовым форматом, то редактировать векторные картинки можно даже в "Блокноте". Но можно - не значит нужно. Есть более удобные программы.

Во-первых, это коммерческие тяжеловесы Adobe Illustrator и CorelDRAW. Существуют и свободные векторные графические редакторы sK1, Ikscape. Для офисных нужд подойдёт OpenOffice Draw.

Для несложных векторных картинок или для простого знакомства с форматом SVG я бы предложил посмотреть в сторону веб-приложения SVG-Edit (code.google.com/p/svg-edit), которое распространяется в виде расширения для Firefox или виджета Opera и использует только JS, HTML, CSS и SVG. Работает это веб-приложение в офлайновом режиме и не требует подключения к Интернету.

Несмотря на простоту, в SVG-Edit реализована поддержка растровых изображений, группировка элементов, масштабирование, слои, кривые, смена фона и многое другое. Так что для начала SVG-Edit - самое то.

Стандарты

И в заключение несколько слов о текущем состоянии этого стандарта. Разработка спецификации SVG по-прежнему продолжается. В настоящее время рабочим вариантом считается версия 1.1. Также для мобильных устройств предусмотрены спецификации SVG Tiny и SVG Basic.

Что же касается уровня поддержки в браузерах, то наиболее близко соответствует стандартам норвежский браузер Opera последней версии 10.50. Но полной поддержки стандарта нет пока ни у кого. Поэтому веб-дизайнерам, собравшимся использовать преимущества SVG, конечно же, предстоит много счастливых минут по тестированию своего векторного контента во всех существующих браузерах.

Михаил АСТАПЧИК