Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

SVG на сайтах Категория: Веб-мастерство
Название: SVG на сайтах
Дата добавления: 12-06-2012
Раз просмотрено: 995
Комментарии: 0
Рейтинг: * · · · · · · · · · (1 голос)

SVG на сайтах

SVG (масштабируемая векторная графика) — это векторная графика, специально предназначенная для веб-страниц. Этот формат был разработан консорциумом W3C и его поддерживают все браузеры, за исключением Internet Explorer младше 9 версии и Android младше 3. Например, интернет-гигант Wikipedia большую часть своей графики хранит именно в этом формате. В этой статье мы рассмотрим преимущества, недостатки и способы практического применения SVG на сайтах.

Наверняка, многие знают, что существует два типа графики — растровая и векторная. Изображения в растровой графике задаются набором цветных точек (пикселей). Примером можно привести изображения в формате .GIF, .JPG и .PNG. Почти вся графика на сайтах является растровой, однако о нее есть главный недостаток — при масштабировании качество растровой графики падает. SVG же является примером векторной графики. Изображения в этом типе графики задаются математическими формулами, поэтому при масштабировании их качество остается прежним, а размер, зачастую, по сравнению с аналогичными изображениями в растровой графике ниже.

Преимущества SVG

У формата SVG есть несколько преимуществ над обычными изображениями или визуализацией, основанной на элементах <canvas>. SVG не предназначена для манипуляций с пикселями, но для векторной графикой и программной манипуляции с векторами предназначена очень хорошо.

Независимость от разрешения

Независимость от разрешения и агностицизм браузеров — это горячая тема в передовых разработках. Большинство существующих решений для исправления проблем связанных с разрешением основываются на большом количестве скачиваемых данных — замены картинок с высоким разрешением, хаки для браузеров и так далее. Это не слишком хорошо.

SVG предлагает способ создавать графические элементы полного разрешения, вне зависимости от размеров экрана, масштаба и разрешения устройства. До SVG мы видели это только в умной стилизации элементов в CSS и в рендеринге текста. Использование тегов <div> и элементов :after и :before, позволяющие создать простые формы и эффекты больше не является необходимостью. Вы можете использовать SVG для создания любых векторных форм.

Доступная модель документа и API основанный на узлах

Если вы знаете HTML, CSS и JavaScript, значит вы уже умеете многое из того, что вам нужно, чтобы начать писать SVG. SVG использует XML-совместимый формат для описания форм. Помио этого, вы можете стилизовать формы в CSS и сделать их интерактивными с помощью JavaScript. Вот пример SVG кода, который при вставке в веб-страницу отобразит бордовый прямоугольник с размерами 300 на 100 пикселей с закругленными краями:

<svg width="300" height="100">
  <rect fill="#fff" x="0" y="0" width="100%" height="100%" />
  <rect fill="#900" x="0" y="0" width="100%" height="100%" rx="1em"/>
</svg>

DOM API файла SVG, основанного на узлах, уже более доступна, чем API <canvas> на стороне клиента. C этой конструкцией вы можете:

Отсутствие лишних HTTP-запросов

Когда мы вставляем изображения на веб-страницу при помощи тега <img>, мы создаем дополнительный HTTP-запрос, а это затормаживает загрузку сайта. А если ваше изображение является набором узлов, этот запрос пропадает, что увеличивает скорость загрузки вашего сайта и делает его удобным для пользователя.

Легкий интерактивный скриптинг

Несмотря на войны браузеров, DOM API во всех браузерах предлагает широкую гибкость с точки зрения сценариев интерактивности, которая распространяется и на элементы SVG. Стилизование SVG осуществляется с помощью CSS, а прикрепив обработчик события к узлу SVG, мы легко можем сделать его интерактивным.

Это не относится к элементам, нарисованным при помощи элемента <canvas>. Метод с <canvas> просто обрабатывает отдельные пиксели, а нарисованные элементы не сохраняются в памяти в виде объектов. Скрипты, которые должны обрабатывать его, будут сложны. Давайте рассмотрим на пример. Допустим, вы хотите обнаружить наведение на круг, нарисованный в элементе <canvas> с помощью jQuery. Для этого вам понадобится такой скрипт:

var circleCenter = [200, 300], radius = 50;

$(window).on('mousemove', function(e) {
    var mx = e.pageX, my = e.pageY;
    if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius) {
        // Действие при наведении
   } 
});

А теперь посмотрите, насколько код упрощается при работе с узлами SVG:

$('svg path#circle').on('hover', function(event) {
    // Действие при наведении
});

Практическое применение SVG

C SVG возникают огромные возможности для создания отличных вещей. Это могут быть масштабируемые иконки, интерактивные графики, детальные и эстетичные способы удобного предоставления информации пользователю и многое другое. Давайте разберем практического применения SVG.

Почему SVG редко применяется?

Теперь, когда мы рассмотрели основные преимущества SVG, давайте рассмотрим, почему многие разработчики до сих пор не используют ее. На то есть две основные причины.

Когда не стоит использовать SVG?

Хотя SVG подойдет для большинства ваших потребностей в работе с изображениями, есть несколько вещей, для которых она не подойдет:

Заключение

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

Это интересно: «Основные техники фона веб-страницы».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.