Векторная графика в формате SVG

Введение

Кроме широко известных растровых форматов (JPG, PNG, GIF), в веб-разработках стали повсеместно использовать и векторный формат SVG. Аббревиатура SVG является сокращением от Scalable Vector Graphics, что переводится как «масштабируемая векторная графика». То есть, SVG это тип графики, создаваемой при помощи математического описания геометрических примитивов, таких как, линии, круги, эллипсы, прямоугольники, кривые и тому подобное, из которых и образуется каждая деталь формируемого изображения.

Следовательно, в данном формате сохраняется не само изображение, а набор инструкций для её формирования на основе точек и кривых. Эти инструкции представлены на языке разметки SVG, который расширяет возможности XML.

Векторная графика в формате SVG

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

Когда же выполняется увеличение векторного изображения, то каждая его деталь остаётся чётко обозначенной, то есть их видимое разрешение не уменьшается. По этой причине изображения в формате SVG могут отображаться на самых больших разрешениях, не теряя исходного качества, то есть являются просто идеальными для адаптивных сайтов. Помимо этого, у графики в формате SVG имеется ещё одно преимущество. Такое изображение может быть открыто при помощи HTML или CSS и корректировать его можно в любом редакторе кода, причём достаточно просто. И кроме того, при прочих равных условиях, SVG занимает намного меньше места в памяти, чем растровые изображения. Недостатков у SVG всего два, а именно:

1. Формат SVG может не поддерживаться очень старыми браузерами.
2. Формат SVG не может быть использован для фотографий.

Рассмотрим варианты подключения SVG к html-странице. Существуют разные варианты добавления векторной графики. Например, можно выполнить подключение через тег img. Здесь всё выполняется аналогично растровой графике:

Рисунок 1. Подключение через тег img. Автор24 — интернет-биржа студенческих работ

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

Ещё одним вариантом является подключение через background. Аналогично случаю растровой графики, SVG может быть подключено через css-свойство background следующим образом:

.icon {

background-image: url(«../img/icon.svg»);

}

Недостаток у этого метода такой же, как и у предыдущего метода. Этот вариант может подойти для декоративных изображений (фоны, иконки и так далее), у которых также нет необходимости изменять внешний вид.

Следующим методом является прямая вставка svg-кода. Этот метод является наиболее интересным. Он предоставляет возможность не просто отображения готовой графики, но и возможность изменения её параметров, таких как, толщина элементов, заливка, обводка и так далее. Пример приведён ниже.

Рисунок 2. Метод подключения. Автор24 — интернет-биржа студенческих работ

Данная вставка может быть полезной, когда при работе с изображением возникает необходимость её визуальной модификации, к примеру, нужно изменить окраску svg-иконки при наведении на неё курсора. Прямо на html-страницу (в теге svg) можно вставлять как содержательные (контентные), так и декоративные изображения. К недостаткам следует отнести тот факт, что такие изображения нельзя кешировать отдельно от страницы.

Специалистам, выполняющим вёрстку, часто требуется придумывать реакцию иконки при наведении на неё курсора мыши. В варианте с svg-изображениями возможно просто изменять их цвет. Рассмотрим вариант этого действия на примере иконки «В Контакте».

Рисунок 3. Логотип. Автор24 — интернет-биржа студенческих работ

Логотип является достаточно сложным, поэтому svg-код, который его математически описывает, очень длинный. Например, в HTML это выглядит так:

Рисунок 4. Машинный код. Автор24 — интернет-биржа студенческих работ

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

Следует также обратить внимание на тег path, что перводится с английского как «путь». Он предоставляет возможность задания любой фигуры при помощи компактной строки, в которой представлено описание пути от начальной точки до конечной через промежуточные координаты. Строка с данными может задаваться при помощи атрибута «d» тега path.