Вы здесь: Главная » CSS » Использование SVG в качестве фоновых изображений

Использование SVG в качестве фоновых изображений

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный  (W3C).

Предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую (из Википедии).

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

Хочу представить вашему вниманию сайт heropatterns.com, на котором размещены примеры фоновых SVG.

Здесь Вам необходимо настроить цвет переднего плана (Foreground color) и фона (Background color), а также настроить непрозрачность переднего плана (Foreground Opacity), выбрать понравившееся изображение и скопировать код.

heropatterns

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

selected-svg-pattern

Можно посмотреть на приведенные примеры ниже:

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *