Полоски на SVG в качестве фонового рисунка

Для создания "полосатой" страницы достаточно чередовать белое пространство с чёрным. Создайте файл stripe.svg со следующим содержанием.

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <rect width="0.5" height="1" />
</svg>

Помните, что viewBox или эквивалентные атрибуты width и height могуб быть использованы для задания размеров svg для создания фоновых изображений.

Применим созданный SVG-файл в качестве фона страницы:

body {
	background-image: url(stripe.svg);
}

По умолчанию, SVG растянется на всю предоставленную область и вы увидите несколько широких чёрно-белых полос: от 2 до 5-6 в зависимости от ширины вашего монитора.

Для демонстрации ограничимся контейнером.

Чтобы паттерн повторялся чаще, чем один раз, мы можем применить background-size в CSS, указав ширину и высоту.

body {
    background-image: url(stripe.svg);
    background-size: 20px 20px;
}

Подобный паттерн легко изменить, например, поменяв направление полос.

Горизонтальные узкие полоски.

body { background-size: 1px 10px; }

Вертикальные узкие полоски.

body { background-size: 10px 1px; }

Поменять цвет полосок можно, используя rgba или hsla в SVG:

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width="0.5" height="1" fill="rgba(215, 40, 40, 0.9)" />
</svg>

Цвет между полосками меняется через свойство background-color в CSS. Поменяем на красный:

body {
	background-image: url(stripe.svg);
	background-size: 20px 20px;
	background-color: #669;
}

Файл настолько мал, что можно его содержимое вставить в CSS:

body {
	background-image:  url('data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>');
	background-size: 20px 20px;
}

Или использовать кодирование Base64:

body {
    background-image:  url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+');
}

Мы можем сделать полоски уже или толще, используя background-size, но не можем изменить пропорции между линиями. Чтобы добиться этой цели, нужно отредактировать SVG-файл, сделав прямоугольник уже или шире. Сравните с первым примером.

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width=".25" height="1" />
</svg>

Освоив базовые приёмы, вы можете создавать более сложные варианты горизонтальных и вертикальных полосок. Например, паттерн из ⅓ ширины прямоугольника накладывается на ⅓ высоту:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="rgba(0,0,0,0.3)">
    <rect width="100" height="33" />
    <rect width="33" height="100" x="67" />
  </g>
</svg>

Создадим узор, который можно встретить на тёплых рубашках или пледе.

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="rgba(0,0,0,0.3)" stroke-dasharray="3" stroke="rgba(0,0,0,0.2)">
    <rect width="100" height="33" />
    <line x1="33" y1="0" x2="33" y2="100" />
    <line x1="0" y1="66.66" x2="100" y2="66.66" />
    <rect width="33" height="100" x="66" />
  </g>
</svg>

CSS

.stripe-plaid {
  height: 400px;
  width: 50%;
  background-color: #f33;
  background-image: url(stripe-plaid.svg);
  background-size: 22%;
  background-position: 33%;
}

Вернуться в раздел SVG в качестве фонового рисунка.

Реклама