Масштабируемая векторная графика (SVG) состоит из кругов, прямоугольников и путей, представленных в XML и объединенных в изображения на веб-страницах. Вы можете применять сплошную заливку, градиенты и некоторые фильтры SVG — не все браузеры поддерживают все типы фильтров. Вы можете включать текст, изображения и можете копировать ваши SVG столько, сколько хотите. Чаще всего SVG используется в графических программах, для создания диаграмм, иллюстраций, анимаций. Однако, ничто не мешает нам использовать SVG для дизайна сайтов —это дает нам удивительно универсальные возможности в веб-дизайне, занятные в использовании. В этой вводной статье я рассмотрю некоторые важные моменты в работе с SVG, включая поддержку в браузерах. Во второй части мы рассмотрим, как найти и адаптировать SVG, которые вы можете найти в Сети, или как создать SVG-изображения самостоятельно и добавить их на вашу страницу.
Дикий SVG
Некоторые люди используют SVG для дизайна сайтов, обычно для значков топиков. Например, Sam Ruby, сопредседатель рабочей группы HTML5, использует SVG в постах своего блога. Erik Dahlstrom из команды Opera делает то же самое, что и Jeff Schiller на Codedread.
Джефф использует SVG не только для иконок, но и встраивает в меню и весь его сайт использует векторную графику. На сайте Emacs для Mac OS X в основном используется SVG, чтобы увидеть масштабирование SVG в действии, изменить размер страницы.
Я (т.е. автор статьи — прим. пер.) использовал SVG для получения цветов градиента из фото, отображаемого в данный момент (перезагрузите пару раз страницу, чтобы увидеть эффект), как причудливый элемент фона и для общей темы моих сайтов.
Когда можно и когда нельзя использовать SVG
Вы можете использовать SVG везде, где вы используете GIF, JPEG или PNG. Используя SVG, вы предоставляете инструкции по отрисовке, а не растр.
Будучи векторным графикой, SVG может масштабироваться, чтобы вписаться в размер страницы, тогда как JPEG или GIF этого не могут совсем или, как минимум, не могут сделать это чисто. Эта масштабируемость может быть особенно полезна, когда пользователь просматривает страницу и на таком маленьком устройстве, как iPhone, и на большом 32-дюймовом мониторе. На скриншотах ниже показан сайт EMACS для OS X открытый браузере на весь экран и ужатом по вертикали. Обратите внимание, что изображение уменьшается так, чтобы вписаться в окно браузера, не нарушая при этом пропорций. Независимо от того, насколько велика страница, изображение масштабируется корректно.
Скриншот сайта EMACS для Mac OS X
Тот же сайт, но в уменьшенном окне браузера
SVG так же не сильно нагружает канал. Неважно сколько графики передается клиенту, ведь она описывается при помощи XML. SVG может быть полезен, когда необходимо заполнить фон страницы графикой без повторяющихся элементов.
Каким бы хорошим SVG не был, существуют случая, когда вам не следует его использовать. Например, вы можете преобразовать фото в SVG, но преобразование не будет точным. К тому же ресурсов клиента может не хватить для отрисовки такого изображения. Я сконвертировал довольной сложный JPEG в SVG для тестирования. В результате повисла не только первая бета Хрома, но и компьютер, во время обработки SVG.
Итак, SVG не может заменить фото или сложные изображения, но для всего остального вполне подойдет. До того, как мы измажем руки во второй части этой статьи, нам важно узнать о поддержке SVG в браузерах.
Поддержка браузерами
Основные браузеры — Firefox, Chrome, Safari и Opera поддерживаю т SVG либо в виде файла, загружаемого в объект, либо встраиваемого непосредственно в XHTML кода. Джефф Шиллер, упомянутый ранее, поддерживает график, показывающий поддержку SVG в различных браузерах.
Как показано на графике, большинство основных браузеров поддерживают основные возможности SVG. Сюда входит поддержка шрифтов, изображений, графических элементов, таких как круги или пути, градиентов и некоторые фильтров. Не поддерживаются только более экзотические возможности.
Однако, нехватка более продвинутых функций не должна влиять на использование SCV в дизайне сайта, так как я не рекомендую использовать сложные SVG-изображения для фона страницы, потому что браузер потратит много времени на их отрисовку.
Стоит дважды подумать, прежде чем использовать анимированный фон, т.к. людей раздражает шевеление странице, в особенности то, от которого они не могут избавиться отключением яваскрипта.
Как упоминалось ранее, большинство основных браузеров поддерживает основные возможности SVG. Как всегда, существенным исключением является Internet Explorer.
Internet Explorer и SVG
Я одобряю использование SVG, но как было сказано, один из основных браузеров не поддерживает SVG, и этот браузер — Internet Explorer. К счастью для нас, отсутствие поддержки SVG в IE больше не является для нас преградой.
Такие библиотески, как VGWeb, Ample SDK, и Raphael реализуют поддержку SVG в текущей и пршлых версиях IE. Вдобавок, спецификация HTML5 задействует встраивание SVG в HTML, тогда как до этого он поддерживался только в XHTML. Это расширило поддержку доктайпов, а недавние новости о присоединении Microsoft к рабочей группе W3C SVG дает надежду, что IE все-таки начнет поддерживать SVG в девятой версии.
Тем временем, число мобильных устройств в вебе увеличивается, и ни одно из популярных устройст не зависит от IE. Вдобавок, растущая поплярность минималистичного дизайна может быть использована для эффективного введения SVG на ваши сайты. Если сайт имеет привлекательный, но минималистичный дизайн, SVG может быть добавлен, как занятная инновация, и не важно, отобразится он или нет. Упомянутые ранее сайты, использующие SVG, в случае отсутствия поддержки со стороны браузера либо предоставляют альтернативную графику, либо предлагают читателю использовать браузер, поддерживающий SVG. (И не надо бить авторов за последний вариант — такой подход уже больше 10 лет работает для IE в браузерных войнах).
Что насчет доступности?
SVG предоставляет возможность использовать короткие и длинные текстовые альтернативы изображениям. Т.к. он основан на языке разметки, вы можете легко добавить название и описание при помощи элементов title и desc, как показано ниже.
К несчастью, поддержка этих элементов для чтения с экрана недостаточно, что создает проблему для сайтов, где доступность является обязательной.
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" xmlns="http://www.w3.org/2000/svg">
<title>Chimp on a tightrope</title>
<desc>Older chimp walking across a tightrope between two trees at the St. Louis Zoo</desc>
<image xlink:href="chimp.jpg" x="0" y="0" height="402" width="600" />
</svg>
* This source code was highlighted with Source Code Highlighter.Title обычно используется в качестве заголовка документа в standalone SVG. И title, и desc также могут использоваться в более сложной разметке в других пространствах имен. Вдобавок, для более сложных метаданных существует элемент metadata, который может содержать RDF/XML для таких вещей, как информация об авторских правах и авторе.Поскольку поддержка SVG для чтения с экрана скудна, можно использовать обработку на стороне сервера или XSLT для доступа к информации во встроенном в страницу SVG и генерировать HTML из элементов
title, desc, и metadata. Для фона и изображений, используемых в качестве элементов дизайна, можно убрать элементы title и desc за ненадобностью.Больше прочитать о доступности и SVG можно по следующим ссылкам:
комментарии (20)