Градиенты SVG – код SVG и примеры C#

SVG-градиенты – SVG Gradients

Градиенты SVG позволяют создавать плавные переходы между цветами или другими визуальными свойствами в графике SVG. Градиенты определяются как постепенное смешивание цветов по всей области. Они используются для достижения различных визуальных эффектов, таких как затенение, блики и многое другое. SVG поддерживает два основных типа градиентов: линейные градиенты и радиальные градиенты, которые определяются элементами SVG <linearGradient> и <radialGradient>.

Элемент <linearGradient> или <radialGradient> должен быть встроен в тег <defs> для обеспечения возможности повторного использования. Элемент <defs> часто используется для определения градиентов, шаблонов, фильтров и других элементов, на которые можно ссылаться несколько раз. Атрибут id указывает уникальное имя для градиента SVG. Другие элементы внутри файла могут ссылаться на него. Градиент можно применять к свойствам заливки (fill) или обводки (stroke) фигур, текста и т. д.

В этой статье вы узнаете, как создавать линейные и радиальные градиенты в коде SVG, а также ознакомитесь с примерами C# реализации градиентов SVG с использованием библиотеки Aspose.SVG for .NET.

Линейный градиент – Linear Gradient

Как создать линейный градиент в коде SVG

Линейный градиент определяется элементом <linearGradient>. Линейные градиенты создают плавный переход между цветами по прямой линии – вектору градиента. Вектор линейного градиента соединяет начальную и конечную точки, на которые отображаются остановки градиента. Атрибуты x1, y1, x2 и y2 задают вектор линейного градиента. Их значения могут быть как числами, так и процентами.

<linearGradient> имеет вложенные дочерние элементы <stop>, которые управляют цветами, используемыми в градиенте. Каждый цвет указывается атрибутом stop-color. Атрибут offset элемента <stop> указывает, где находится ограничитель градиента. Для линейных градиентов он представляет собой местоположение вдоль вектора градиента.

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<defs>
 3		<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" stop-color="#c71700" />
 5			<stop offset="60%" stop-color="orange" />
 6			<stop offset="100%" stop-color="#5a2100" />
 7		</linearGradient>
 8	</defs>
 9    <rect x="30" y="30" height="150" width="370" fill="url(#linear-gradient)" />
10</svg>

В приведенном выше примере на линейный градиент id="linear-gradient" ссылается элемент <rect> в атрибуте fill. Внутри линейного градиента есть три узла <stop>. В каждом из них атрибут offset задает положение, в котором градиент SVG получает значение stop-color. Результирующее SVG-изображение выглядит следующим образом:

Текст «Прямоугольник, заполненный линейным градиентом»

Линейный градиент – Linear Gradient

В этом примере C# создается файл SVG с прямоугольником, заполненным линейным градиентом, похожим на тот, который мы видели ранее.

Используйте конструктор SVGDocument(), чтобы создать пустой документ SVG. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
Создайте элемент <defs> и добавьте его к элементу <svg>:
- Используйте метод CreateElementNS(), чтобы создать экземпляр SVGDefsElement класс.
- Используйте метод AppendChild(), чтобы добавить элемент <defs> в <svg> элемент.
Создайте элемент <linearGradient> с атрибутами и добавьте его к элементу <defs>:
- Используйте метод CreateElementNS(), чтобы создать экземпляр класса SVGLinearGradientElement.
- Вызовите метод SetAttribute(name, value), чтобы установить x1, y1, x2, и y2 атрибуты.
- Не забудьте установить атрибут id. Обращение к URL-адресу атрибута id в <linearGradient> позволяет применять градиент SVG для заливки и обводки фигур или текста SVG.
- Используйте метод AppendChild(), чтобы добавить <linearGradient> к элементу <defs>.
Создайте элементы <stop>, установите их атрибуты и добавьте остановки к элементу <linearGradient>:
- Используйте CreateElementNS() для создания экземпляров класса SVGStopElement.
- Вызовите метод SetAttribute() для установки атрибутов offset и stop-color.
- Используйте метод AppendChild(), чтобы добавить остановки к элементу <linearGradient>.
Создайте прямоугольный элемент <rect>, который будет заполнен линейным градиентом. Ему присваивается атрибут fill, для которого установлено значение url(#linear-gradient) и который ссылается на ранее определенный градиент SVG с Id = "linear-gradient".
Вызовите метод Save(), чтобы сохранить документ в локальном файле.

1using Aspose.Svg;
2using System.IO;

 1// Create an SVG linear gradient and apply it to a rectangle programmatically in C#
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create a <defs> element and add it to the <svg> element
12    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
13    svgElement.AppendChild(defsElement);
14
15    // Create a <linearGradient> element and add it to the <defs> element
16    SVGLinearGradientElement linearGradient = (SVGLinearGradientElement)document.CreateElementNS(SvgNamespace, "linearGradient");
17    linearGradient.Id = "linear-gradient";
18    linearGradient.X1.BaseVal.ValueAsString = "0%";
19    linearGradient.Y1.BaseVal.ValueAsString = "0%";
20    linearGradient.X2.BaseVal.ValueAsString = "100%";
21    linearGradient.Y2.BaseVal.ValueAsString = "0%";
22    defsElement.AppendChild(linearGradient);
23
24    // Add color stops to the gradient
25    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
26    stop1.SetAttribute("offset", "10%");
27    stop1.SetAttribute("stop-color", "#c71700");
28    linearGradient.AppendChild(stop1);
29
30    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
31    stop2.SetAttribute("offset", "70%");
32    stop2.SetAttribute("stop-color", "orange");
33    linearGradient.AppendChild(stop2);
34
35    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
36    stop3.SetAttribute("offset", "100%");
37    stop3.SetAttribute("stop-color", "#5a2100");
38    linearGradient.AppendChild(stop3);
39
40    // Create a rectangle and apply the linear gradient
41    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
42    rectElement.X.BaseVal.Value = 30;
43    rectElement.Y.BaseVal.Value = 30;
44    rectElement.Width.BaseVal.Value = 370;
45    rectElement.Height.BaseVal.Value = 150;
46    rectElement.SetAttribute("fill", "url(#linear-gradient)");
47
48    // Append the rectangle to the SVG document
49    svgElement.AppendChild(rectElement);
50
51    // Save the document
52    document.Save(Path.Combine(OutputDir, "linear-gradient.svg"));
53}

Example-CreateLinearGradientSVG.cs hosted with ❤ by GitHub

Результирующий файл line-gradient.svg выглядит точно так же, как на изображении выше – прямоугольник с линейным градиентом красно-оранжево-коричневого цвета.

Радиальный градиент – Radial Gradient

Радиальные градиенты создают плавный переход между цветами, исходящими из центральной точки. Элемент <radialGradient> определяет радиальный градиент и его атрибуты. Подобно линейным градиентам, элементы <stop> определяют остановки цвета вдоль радиального градиента.

Атрибуты cx, cy и r определяют конечную окружность радиального градиента. Градиент будет нарисован таким образом, чтобы точка градиента 100% отображалась на периметре этого конечного круга.
Атрибуты fx, fy и fr определяют начальный круг радиального градиента. Градиент будет нарисован таким образом, что точка градиента 0% будет сопоставлена с периметром этого начального круга.

Как создать радиальный градиент в коде SVG

Радиальный градиент сложнее линейного. Цвета в нем меняются круговым, а не линейным образом. Радиальный градиент определяется элементом <radialGradient>.

Атрибуты cx и cy задают координаты центра градиентного круга. Значение 0,5 соответствует центру элемента. Оба значения по умолчанию равны 0,5, если они опущены.
Атрибут r устанавливает радиус градиентного круга как пропорцию размера элемента. Значение 0,8 соответствует 80% размера элемента.
Атрибуты fx и fy устанавливают координаты фокусной точки градиентного эллипса. Фокусная точка – это то, куда направлен акцент градиента. Например, значение fx 25% указывает, что фокус находится горизонтально на 25% ширины элемента.

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

 1<svg xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" >
 4            <stop offset="10%" stop-color="chocolate" />
 5            <stop offset="30%" stop-color="silver" />
 6            <stop offset="60%" stop-color="chocolate" />
 7            <stop offset="90%" stop-color="maroon" />
 8        </radialGradient>
 9    </defs>
10    <g fill="url(#radial-gradient)">
11		<circle cx="100" cy="100" r="90" />
12		<rect x="570" y="10" height="130" width="200" />
13		<ellipse cx="300" cy="150" rx="150" ry="50" />
14		<ellipse cx="490" cy="140" rx="50" ry="130" />
15	</g>
16</svg>

Text «Показаны четыре фигуры, заполненные радиальным градиентом: круг, два эллипса и прямоугольник.»

Как видно на рисунке, восприятие радиального градиента зависит от формы, к которой он применен. Радиальный градиент может создать убедительную иллюзию трехмерного освещения и глубины в круге или эллипсе. В то же время в прямоугольнике такого эффекта мы не наблюдаем. Здесь градиент дает различную степень визуального акцента и световых эффектов на плоских поверхностях.

Радиальный градиент – примеры C#

Радиальный градиент создает плавный переход цвета, который расходится от центральной точки к внешним краям фигуры. В следующем фрагменте кода C# показано, как создать радиальный градиент. В этом примере центры самой внутренней и внешней границы градиента SVG одинаковы и по умолчанию равны 0,5. Давайте рассмотрим код C# шаг за шагом:

Создайте экземпляр класса SVGDocument. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
Создайте элемент <defs> и добавьте его к элементу <svg>:
- Используйте метод CreateElementNS(namespaceURI, qualifiedName), чтобы создать экземпляр класса SVGDefsElement.
- Используйте метод AppendChild(), чтобы добавить элемент <defs> к элементу <svg>.
Создайте элемент <radialGradient> с атрибутами и добавьте его к элементу <defs>:
- Используйте метод CreateElementNS, чтобы создать экземпляр класса SVGRadialGradientElement.
- Вызовите метод SetAttribute(), чтобы установить атрибуты x1, y1, x2 и y2.
- Не забудьте установить атрибут id. Обращение к URL-адресу атрибута id в <radialGradient> позволяет применять градиент SVG для заливки и обводки фигур или текста SVG.
- Используйте метод AppendChild(), чтобы добавить <radialGradient> к элементу <defs>.
Создайте элементы <stop>, установите их атрибуты и добавьте остановки к элементу <radialGradient>:
- Используйте CreateElementNS() для создания экземпляров класса SVGStopElement.
- Вызовите метод SetAttribute() для установки атрибутов offset и stop-color.
- Используйте метод AppendChild(), чтобы добавить остановки к элементу <radialGradient>.
Создайте прямоугольные элементы <rect> и <circle>, которые будут заполнены радиальным градиентом. Ему присвоен атрибут fill, для которого установлено значение url(#RadialGradient) и который ссылается на ранее определенный градиент SVG с Id = "RadialGradient".
Вызовите метод Save(), чтобы сохранить полученное изображение SVG в локальный файл.

1using Aspose.Svg;
2using System.IO;

 1// Create and apply a radial gradient to SVG shapes programmatically using Aspose.SVG
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create a <defs> element and add it to the <svg> element
12    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
13    svgElement.AppendChild(defsElement);
14
15    // Create a <radialGradient> element and add it to the <defs> element
16    SVGRadialGradientElement radialGradient = (SVGRadialGradientElement)document.CreateElementNS(SvgNamespace, "radialGradient");
17    radialGradient.Id = "RadialGradient";
18    radialGradient.R.BaseVal.ValueAsString = "0.7";
19    defsElement.AppendChild(radialGradient);
20
21    // Add color stops to the radial gradient
22    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
23    stop1.SetAttribute("offset", "0%");
24    stop1.SetAttribute("stop-color", "silver");
25    radialGradient.AppendChild(stop1);
26
27    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
28    stop2.SetAttribute("offset", "55%");
29    stop2.SetAttribute("stop-color", "darkgreen");
30    radialGradient.AppendChild(stop2);
31
32    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
33    stop3.SetAttribute("offset", "100%");
34    stop3.SetAttribute("stop-color", "black");
35    radialGradient.AppendChild(stop3);
36
37    // Create a rectangle and apply the radial gradient
38    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
39    rectElement.X.BaseVal.Value = 50;
40    rectElement.Y.BaseVal.Value = 50;
41    rectElement.Width.BaseVal.Value = 200;
42    rectElement.Height.BaseVal.Value = 150;
43    rectElement.SetAttribute("fill", "url(#RadialGradient)");
44
45    // Create a <circle> element and set its attributes
46    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
47    circleElement.Cx.BaseVal.Value = 520;
48    circleElement.Cy.BaseVal.Value = 125;
49    circleElement.R.BaseVal.Value = 90;
50    circleElement.SetAttribute("fill", "url(#RadialGradient)");
51
52    // Append the rectangle and circle to SVG
53    svgElement.AppendChild(rectElement);
54    svgElement.AppendChild(circleElement);
55
56    // Save the document
57    document.Save(Path.Combine(OutputDir, "radial-gradient.svg"));
58}

Example-RadialGradient.cs hosted with ❤ by GitHub

Результирующее изображение radial-gradient.svg выглядит следующим образом.

Текст «Показаны две фигуры, заполненные радиальным градиентом – круг и прямоугольник.»

Как вы видите на рисунке, когда радиальный градиент применяется к кругу и прямоугольнику, восприятие форм различается.

Применение радиального градиента к прямоугольнику дает другой визуальный эффект, чем к кругу. Хотя градиент по-прежнему может добавить ощущение глубины и выделить прямоугольник, ощущение 3D менее сильное, чем в случае с кругом. Вместо этого градиент может подчеркнуть центр прямоугольника или создать световые эффекты, более типичные для плоских поверхностей.
При применении к кругу радиальный градиент может создать потрясающий 3D-эффект. Центральная точка градиента соответствует центру круга. Поскольку градиент простирается от центра к внешним краям круга, он имитирует иллюзию источника света, сияющего на закругленной поверхности. Цвета плавно переходят от цвета в центре к цвету на внешних краях, имитируя поведение света, падающего на изогнутый объект. Этот эффект может добавить глубину и объем, делая круг более реалистичным, как если бы это был сферический объект, освещенный с определенного направления.

Смотрите также

Вы можете загрузить полные примеры и файлы данных с GitHub.
О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.
Дополнительную информацию о градиентах SVG вы найдете на странице W3C Paint Servers: Gradients and Patterns и в статье Фильтры и градиенты SVG.

SVG-фильтры Как объединить файлы SVG