Линейный градиент в SVG

Шаг 1. Определение

В секцию defs добавляем тег линейного градиента linearGradient.

<defs>
	<linearGradient id="blue_gradient" x1="0" y1="0" x2="1" y2="0">
	</linearGradient>
</defs>

У объекта linearGradient задаются следующие свойства:

• id – идентификатор градиента;
• x1 – координата точки 1 по оси X;
• y1 – координата точки 1 по оси Y;
• x2 – координата точки 2 по оси X;
• y2 – координата точки 2 по оси Y.

Точки 1 и 2 указывают вектор (направление) заливки градиента. Для горизонтальной заливки слева направо можно указать (0,0) и (1,0).

Шаг 2. Цвета заливки

Для указания цветов в объект linearGradient добавляем теги stop.
В примере выполняется переход из в

<defs>
	<linearGradient id="blue_gradient" x1="0" y1="0">
		<stop offset="0%" stop-color="#4cbdca" />
		<stop offset="80%" stop-color="#1a8da7" />
	</linearGradient>
</defs>

Тег stop поддерживает следующие свойства:

• offset – расположение точки цвета относительно всего градиента (указывается в процентах или числом от 0 до 1);
• stop-color – цвет. Указывается способами как в CSS;
• stop-opacity – прозрачность (указывается в процентах или числом от 0 до 1).

Шаг 3. Применение

Для заливки элемента градиентом в свойстве fill указывается значение url(#blue_gradient), где blue_gradient это id ранее объявленного градиента.
В примере иконка для кнопки реализована через элемент path

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
	<linearGradient id="blue_gradient" x1="0" y1="0">
		<stop offset="0%" stop-color="#4cbdca" />
		<stop offset="80%" stop-color="#1a8da7" />
	</linearGradient>
</defs>
<g>
	<path fill="url(#blue_gradient)" d="M15.331 2.502c-2.244-0.323-4.724-0.502-7.331-0.502s-5.087 0.179-7.331 0.502c-0.43 1.683-0.669 3.543-0.669 5.498s0.239 3.815 0.669 5.498c2.244 0.323 4.724 0.502 7.331 0.502s5.087-0.179 7.331-0.502c0.43-1.683 0.669-3.543 0.669-5.498s-0.239-3.815-0.669-5.498zM6 11v-6l5 3-5 3z"></path>
</g>
</svg>