Фоновый градиент с помощью SVG

,

Замечательный сервис Ultimate CSS Gradient Generator наряду с CSS3 градиентами для всех браузеров создает SVG файл для IE9. Он внедряется в CSS с помощью Data URI в base64 кодировке.


background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i
MS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zy
Igd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIg
cHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IG
lkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3Bh
Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogIC
AgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1v
cGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3
I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGll
bnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZm
lsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Это сервис всегда создает правила так, чтобы градиент заполнял весь блок. Если поправить CSS3 свойства не составит для градиента фиксированного размера, то с SVG придется проделать некоторые манипуляции.

Раскодируем base64

Затем декодируем последовательность символов, которую нам выдал генератор. Я умышленно обрезал часть данных, чтобы команды не затерялись среди них.

echo PD94bWwgdm…IgLz4KPC9zdmc+ | base64 -d > /tmp/g.svg

Файл g.svg .будет содержать SVG и его можно будет отредактировать в любом текстовом редакторе.


<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
        viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse"
          x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#7d7e7d" stop-opacity="1"/>
    <stop offset="100%" stop-color="#0e0e0e" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

Для декодирования можно воспользоваться любым online-сервисом, коих в интернете великое множество.

Задаем размеры изображения

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

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
        viewBox="0 0 1 1" preserveAspectRatio="none">

Важно всегда явно задавать единицы измерения величин даже если это пикселы.

Кодируем SVG в base64

base64 -e /tmp/g.svg

Получившийся в результате набор символов копируем из консоли в CSS файл вместо исходного. После этого нужно удалить все переносы строк, которые могли образоваться внутри закодированных данных. Формат base64 игнорирует пробельные символы, но внутри Data URI пробельные символы недопустимы.

Настраиваем параметры фона

Так как фон уже не заполняет весь блок целиком, то нужно не забыть настроить его позиционирование и повторение.