SVG градиенты

Градиент — это плавный переход одного цвета в другой. При этом, к одному и тому же элементу могут применяться несколько цветовых переходов.

В SVG существует два основных типа градиентов — линейный и радиальный, которые определяются при помощи специальных элементов.

SVG элементы, определяющие градиенты, должны располагаться внутри элемента <defs>. Элемент <defs> это сокращение от английского слова "definitions" (пер. "определения") и содержит определение специальных элементов (таких как градиенты).

Линейный градиент - <linearGradient>

Чтобы определить линейный градиент, в SVG используется элемент <linearGradient>.

Линейный градиент может быть горизонтальным, вертикальным или угловым:

• Горизонтальный градиент создается, когда координаты y1 и y2 одинаковые, а координаты x1 и x2 разные
• Вертикальный градиент создается, когда координаты x1 и x2 одинаковые, а координаты y1 и y2 разные
• Угловой градиент создается, когда координаты x1 и x2 и координаты y1 и y2 разные

Пример №1

Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному:

SVG код:

<svg height="150" width="400">
   <defs>
     <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
     </linearGradient>
   </defs>
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg> 

Объяснение:

• Атрибут id элемента <linearGradient> определяет уникальное имя градиента
• Атрибуты x1, x2, y1, y2 элемента <linearGradient> определяют начальную и конечную позицию градиента
• Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offset используется, чтобы определить, где цвет градиента начинается и заканчивается
• Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом

Пример №2

Создадим эллипс с вертикальным линейным градиентом от желтого цвета к красному:

SVG код:

<svg height="150" width="400">
   <defs>
     <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
     </linearGradient>
   </defs>
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg> 

Пример №3

Создадим эллипс с горизонтальным линейным градиентом от желтого цвета к красному и добавим текст внутри эллипса:

SVG код:

<svg height="150" width="400">
   <defs>
     <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
     </linearGradient>
   </defs>
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
   <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg> 

Объяснение:

• Элемент <text> добавляет текст

Радиальный градиент - <radialGradient>

Чтобы определить радиальный градиент, используется элемент <radialGradient>.

Пример №1

Создадим эллипс с радиальным градиентом от белого цвета к синему:

SVG код:

<svg height="150" width="500">
   <defs>
     <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
       <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
     </radialGradient>
   </defs>
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg> 

Объяснение:

• Атрибут id элемента <radialGradient> определяет уникальное имя градиента
• Атрибуты cx, cy и r определяют внешний круг, fx и fy определяют внутренний круг
• Цветовой диапазон градиента может быть составлен из двух или более цветов. Каждый цвет задается при помощи тега <stop>. Атрибут offset используется, чтобы определить, где цвет градиента начинается и заканчивается
• Атрибут fill элемента <ellipse> связывает ссылкой элемент с градиентом

Пример №2

Создадим еще один эллипс с радиальным градиентом от белого цвета к синему:

SVG код:

<svg height="150" width="500">
   <defs>
     <radialGradient id="grad2" cx="30%" cy="30%" r="30%" fx="50%" fy="50%">
       <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
     </radialGradient>
   </defs>
   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>