SVG — язык разметки для описания графических (векторных) элементов сайта. Аббревиатура образована от названия Scalable Vector Graphics.
История создания
Формат SVG — продукт компании World Wide Web Consortium (W3C), работа над которым началась в 1999 году. Релиз первой версии произошел в 2001 году, в 2011 выпущено обновление 1.1, актуальное по сей день. Сейчас команда W3C готовит к выходу вторую версию стандарта.
Назначение
SVG разработан на базе языка программирования XML и активно применяется в HTML-кодировании при создании интернет-сайтов. С помощью SVG отрисовываются изображения, размер которых можно менять без потери качества. Стандарт поддерживает двумерную анимированную интерактивную графику.
Применение в веб-дизайне
Технология SVG активно используется для создания сайтов. Посредством ее, разработчики реализуют анимацию, векторные и комбинированные изображения, текст.
SVG применяют для отрисовки:
- линий, геометрических фигур и форм;
- логотипов и иконок;
- элементов интерфейса сайта;
- фонов с текстурами;
- картинок и иллюстраций;
- графиков и диаграмм;
- отдельных текстовых блоков.
Причины популярности формата кроются в его удобстве при работе с адаптивными сайтами, рассчитанными на устройства с разными разрешениями экранов. А разнообразие компьютеров и гаджетов стимулирует разработчиков на создание именно таких сайтов.
Главное преимущество SVG-изображений — их масштабируемость. Так, например, при попытке увеличить растровую картинку появляется пикселизация, нарушающая гладкость линий и контуров.А при увеличении SVG-рисунка такой эффект отсутствует. В увеличенном векторном элементе линии и детали сохраняют четкость, и визуальное качество не меняется. Каким бы большим ни было разрешение экрана, SVG-графика на нем выглядит безупречно.
Формат SVG имеет текстовый вид: все команды в нем представляют собой текст и координаты, а не отдельные файлы. Он легко интегрируется в HTML и XHTML, поэтому его можно внедрить в код веб-страницы. А потом оперативно вносить изменения в любом редакторе кода прямо из браузера.
Сочетание качества масштабируемых изображений и простоты их редактирования сделали SVG одним из самых востребованных стандартов в веб-дизайне.
Достоинства
Среди преимуществ языка разметки SVG можно отметить:
- Масштабируемость с сохранением качества. SVG обеспечивает бесконечное разрешение. При увеличении изображений визуальное качество сохраняется вне зависимости от размеров экрана, разрешения, плотности пикселей и типа дисплея;
- Легкость модификации. Вносить изменения в графические элементы проще, чем при работе с растровыми аналогами. Размер, пропорции, форма, расположение, оттенок, эффекты и другие свойства рисунка легко меняются как в графических редакторах, так и инструментами CSS на странице сайта. Нет необходимости хранения, экспорта и импорта исходников изображения;
- Быстрая загрузка. SVG-версии файлов имеют меньший вес, чем растровые аналоги, поэтому скорость загрузки страниц с элементами этого формата выше. Кроме того, возможность встраивания SVG в HTML-код исключает лишние HTTP-запросы и обращения к сторонним ресурсам — работа сайта ускоряется. Быстрота загрузки положительным образом сказывается на конверсии проектов, что очень важно для разработчиков и владельцев сайтов;
- Интерактивность. В SVG-элементы могут быть интегрированы скрипты, ссылки, анимация. Это позволяет реализовывать динамичную и интерактивную графику, создавать контент, напрямую взаимодействующий с пользователем и реагирующий на его действия;
- Дружественность к SEO. Текстовые блоки, выполненные в SVG, представляют собой именно текст, а не изображения. Они хорошо индексируются поисковиками, их содержимое влияет на поисковую выдачу. Отпадает необходимость создания дополнительных метафайлов для поисковых роботов. Кроме того, такой контент удобно выделять и копировать;
- Совместимость с современными браузерами. Формат SVG поддерживается всеми современными веб- и мобильными браузерами, включая малоизвестные.
Все эти качества делают технологию SVG все более и более востребованной в области веб-инженерии.
Недостатки
Есть несколько недостатков и особенностей, которые необходимо учитывать при работе со стандартом SVG:
- плохая совместимость с устаревшими браузерами, в частности Internet Explorer 8 и более ранними его версиями;
- невозможность использования для фотографий, поскольку SVG — это векторный формат;
- полное отсутствие поддержки трехмерной графики;
- проблематичность визуализации браузерами сложной SVG-графики с тысячами узлов — для таких конструкций больше подходит JPEG-формат.
Формат SVG — удобный инструмент для современных веб-разработок. Многочисленные готовые проекты, реализованные с его помощью, — тому подтверждение. У него есть вполне реальная перспектива стать базовым универсальным форматом для векторных изображений в Интернете.