Редактирование файла SVG – примеры C#

Aspose.SVG для .NET позволяет редактировать файлы SVG и вносить изменения в их содержимое. Объектная модель документа (DOM) API полностью совместима с официальными спецификациями SVG и означает полный контроль над узлами SVG. Вы можете изменить документ, добавляя новые узлы, удаляя или редактируя содержимое существующих узлов.

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

Добавьте элементы в документ SVG

Aspose.SVG для .NET API позволяет добавлять в документ различные элементы. Сначала вы создадите новый элемент или узел; затем вы можете добавить элемент в документ.

1. Вы можете использовать метод CreateElementNS(namespaceURI, qualifiedName) класса SVGDocument для создания экземпляра класса Element – требуемого элемента с заданным полным именем и URI пространства имен. namespaceURI устанавливает ссылку на спецификацию W3C SVG. qualifiedName должно содержать имя строкового тега элемента.

2. Чтобы добавить элемент в документ SVG, API предоставляет метод InsertBefore(node, child) класса Node, который вставляет node перед существующим дочерним узлом или в конце списка дочерних элементов, если «дочерний элемент» равен нулю.

Свойство RootElement класса SVGDocument указывает на корневой элемент <svg> документа. Следующий фрагмент кода показывает, как создать и добавить элемент <g> в качестве первого дочернего элемента в документе SVG.

    var svgElement = document.RootElement;
    var gElement = (SVGGElement)document.CreateElementNS("http://www.w3.org/2000/svg", "g");
    svgElement.InsertBefore(gElement, svgElement.FirstChild);

Мы можем указать атрибуты элемента и их значения, используя SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) методы класса Element.

Например, если вы создаёте группу графических элементов и помещаете их в элемент <g>, вы можете задать общие параметры:

    gElement.SetAttribute("fill", "#8A8D8F");
    gElement.SetAttribute("stroke", "magenta");
    gElement.SetAttribute("stroke-width", "4");

Как добавить базовые фигуры в документ SVG

Базовые фигуры SVG можно создать с помощью метода CreateElementNS(namespaceURI, qualifiedName). qualifiedName должно содержать имя строкового тега графического элемента SVG.

Таким образом вы можете создавать круги SVG (SVGCircleElement class, qualifiedName = “circle”), эллипсы (SVGEllipseElement class, qualifiedName = “ellipse”), кривые Безье (SVGPathElement class, qualifiedName = “path”) и так далее.

SVG круг – SVG Circle

Каждый графический элемент имеет свои определенные атрибуты (свойства), с помощью которых можно управлять его параметрами и характеристиками. Cx, Cy, R – свойства круга типа SVGAnimatedLength, статические данные для которого можно задать или прочитать через конструкцию: element.X.BaseVal.Value.

В следующем фрагменте кода показано, как создать круг SVG и добавить его в элемент <svg> существующего файла SVG:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;

// Add <circle> element to SVG using C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Load an SVG document from a file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "basic-shapes.svg")))
{
    // Get root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a <circle> element
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 100F;
    circleElement.Cy.BaseVal.Value = 100F;
    circleElement.R.BaseVal.Value = 50F;
    circleElement.SetAttribute("fill", "Salmon");

    // Add the <circle> element as the first child to <svg> element
    svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    // Work with the document here...
    // Add a polyline and change stroke attributes for all circle and ellipse elements (see later)

    // Save the document
    document.Save(Path.Combine(OutputDir, "basic-shapes_add-circle.svg"));
}

Эллипс (Cx, Cy, Rx, Ry), прямоугольник (X, Y, Width, Height, Rx, Ry) и линия (X1, Y1, X2, Y2) имеют свои собственные атрибуты, которые можно установить аналогично.

Полилиния SVG – SVG Polyline

SVGPolygonElement и SVGPolylineElement имеют свойство Points типа SVGPointList, которое обеспечивает доступ к базовому содержимому атрибута Points, которое однозначно соответствует синтаксису SVG.

Простой пример создания полилинии SVG показан в следующем фрагменте кода:

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    // Create a <polyline> element and set attributes values:
	var polylineElement = (SVGPolylineElement)document.CreateElementNS(SvgNamespace, "polyline");
    SVGPoint point1 = svgElement.CreateSVGPoint();
    point1.X = 270;
    point1.Y = 240;
    SVGPoint point2 = svgElement.CreateSVGPoint();
    point2.X = 290;
    point2.Y = 220;
    SVGPoint point3 = svgElement.CreateSVGPoint();
    point3.X = 310;
    point3.Y = 240;
    polylineElement.Points.AppendItem(point1);
    polylineElement.Points.AppendItem(point2);
    polylineElement.Points.AppendItem(point3);
    polylineElement.SetAttribute("stroke", "grey");
    polylineElement.SetAttribute("stroke-width", "5");
    polylineElement.SetAttribute("fill", "none");

	// Add the SVG polyline to children of the <svg> element
	svgElement.AppendChild(polylineElement);

Метод CreateSVGPoint() создает экземпляр класса SVGPoint, в котором вы можете установить значения X и Y через свойства с тем же именем. Объект по умолчанию инициализируется точкой (0,0) в пользовательской системе координат.

Метод AppendItem(T newItem) вставляет новую точку в конец списка. Прямые линии соединяют эти точки в списке и образуют ломаную линию или многоугольник – плоскую геометрическую фигуру, образованную замкнутой полилинией.

Метод AppendChild(node) добавляет нового дочернего элемента в конец списка дочерних элементов этого узла. Фрагмент кода показывает, что атрибуты stroke, stroke-width и fill указаны, а polylineElement вставлен в элемент <svg> в качестве последнего дочернего элемента.

Рассмотрим пример редактирования существующего SVG-файла basic-shapes.svg: добавим описанные выше круг и ломаную линию и изменим свойства обводки для всех кругов и эллипсов. Следующий фрагмент кода показывает, как найти все круги и эллипсы в элементе <svg> и заменить их свойства обводки:

    // Set stroke attributes for all <circle> and <ellipse> elements
    foreach (Element element in svgElement.Children)
    {
        if (element is SVGCircleElement || element is SVGEllipseElement)
        {
            element.SetAttribute("stroke-width", "6");
            element.SetAttribute("stroke", "#C8102E");
        }
    }

На рисунке показана визуализация исходного SVG-файла basic-shapes.svg и файла, который был отредактирован (модифицирован).

Редактировать путь SVG – Edit SVG Path

Чтобы создать путь SVG с помощью API Aspose.SVG, вам необходимо создать экземпляр класса SVGPathElement с помощью метода CreateElementNS(namespaceURI, qualifiedName).

Методы CreateSVGPathSegMovetoAbs(x, y), CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) и CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) принимают параметры команды данных пути M, C и T в качестве собственных параметров. Свойство PathSegList типа SVGPathSegList обеспечивает доступ к содержимому атрибута d в виде списка сегментов пути, соответствующего синтаксису SVG (подробности см. в статье SVG Path Data).

Следующий фрагмент кода показывает, как создать путь SVG и добавить его в элемент <svg>:

    // Create a <path> element
    var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

	// Set d attribute parameters – SVG path data
	SVGPathSeg pathSeg1 = pathElement.CreateSVGPathSegMovetoAbs(10, 200);
	SVGPathSeg pathSeg2 = pathElement.CreateSVGPathSegCurvetoQuadraticAbs(180, 200, 25, 210);
	SVGPathSeg pathSeg3 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(300, 250);
	SVGPathSeg pathSeg4 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(420, 250);
	SVGPathSeg pathSeg5 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(490, 150);
	pathElement.PathSegList.AppendItem(pathSeg1);
	pathElement.PathSegList.AppendItem(pathSeg2);
	pathElement.PathSegList.AppendItem(pathSeg3);
	pathElement.PathSegList.AppendItem(pathSeg4);
	pathElement.PathSegList.AppendItem(pathSeg5);

	// Set fill and stroke attributes
	pathElement.SetAttribute("stroke", "magenta");
	pathElement.SetAttribute("fill", "none");
	pathElement.SetAttribute("stroke-width", "4");

	// Add the path as the first child in the <svg> element
	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

Вы можете использовать такой детализированный и подробный код с точки зрения DOM, программирования, работы с документом и навигации по файлу. Используя метод SetAttribute(), вы можете написать код в одной строке для настройки d данных пути SVG.

В следующем примере мы используем однострочный код для создания того же пути (исходный путь SVG). Более того, мы отредактируем параметры команд moveto(x,y) M и T(x,y) в исходном пути для получения нового.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Paths;

// Edit SVG path data in C# programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <path> element
    SVGPathElement pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

    // Set d attribute parameters – SVG path data
    pathElement.SetAttribute("d", "M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150");

    // Edit SVG path	
    foreach (SVGPathSeg pathSeg in pathElement.PathSegList)
    {
        // Editing T commands parameters
        if (pathSeg is SVGPathSegCurvetoQuadraticSmoothAbs)
        {
            SVGPathSegCurvetoQuadraticSmoothAbs pathSegCurvetoQuadraticSmoothAbs = pathSeg as SVGPathSegCurvetoQuadraticSmoothAbs;

            pathSegCurvetoQuadraticSmoothAbs.X -= 60;
            pathSegCurvetoQuadraticSmoothAbs.Y -= 65;
        }

        // Editing M command parameters
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            pathSegMovetoAbs.X = 200;
            pathSegMovetoAbs.Y = 100;
        }
    }
    // Set fill and stroke attributes
    pathElement.SetAttribute("stroke", "red");
    pathElement.SetAttribute("fill", "none");
    pathElement.SetAttribute("stroke-width", "4");

    // Add the <path> element as the first child to the <svg> element
    svgElement.InsertBefore(pathElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "edit-svg-path-data.svg"));
}

На рисунке показаны исходный (черный) и измененный (красный) пути. Посмотреть и сохранить отредактированный SVG-файл можно, пройдя по ссылке – edit-svg-path-data.svg.

Чтобы отредактировать файл SVG, сначала необходимо найти в документе элементы для редактирования. Есть несколько способов сделать это, например, с помощью селекторов CSS или запросов XPath. Подробную информацию о том, как редактировать SVG-файл с помощью навигации по документу, можно найти в статье Навигация и проверка SVG.

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

Рисование SVG на существующем растровом изображении

Растровое изображение можно использовать в качестве фона для рисования. Вы можете добавить фигуры, контуры или текст SVG. Например, рисунок ниже создан с помощью добавления круга и текста к растровому изображению, выступающему в качестве фона:

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="480" width="640" x="20" y="20"/>
	<text style="font-size: 1.4em;" x="420px" fill="gold" y="280px">The beach is beautiful...</text>
	<circle cx="520" cy="120" r="60" stroke="gold" stroke-width="70" fill="none" stroke-dasharray="2,14"/>
</svg>

Следующий код C# создает документ SVG, указанный выше, с нуля. Мы добавляем в документ некоторые элементы SVG, такие как изображение, текст и элемент круга, а затем сохраняем документ SVG в файл:

1. Создайте документ SVG, используя класс SVGDocument, и получите доступ к корневому элементу SVG, используя свойство RootElement.
2. Создайте элемент <image>, установите необходимые атрибуты и добавьте его к элементу <svg>.
   • Используйте метод CreateElementNS(namespaceURI, qualifiedName) класса SVGDocument, чтобы создать экземпляр класса SVGImageElement.
   • Используйте свойства типа SVGAnimatedLength, статические данные для которых можно задать или прочитать через конструкцию: element.X.BaseVal.Value: задайте атрибуты href, height, width, x, и y.
3. Аналогичным образом создайте элемент <text>, используя класс SVGTextElement и установите необходимые атрибуты. Используйте свойство Style для установки размера шрифта и метод SetAttribute(name, value) для указания таких атрибутов, как x, y и fill.
4. Создайте элемент <circle>, используя класс SVGCircleElement. Атрибуты cx, cy и r определяют координаты центра и радиус круга. Другие атрибуты, такие как stroke, stroke-width, fill и stroke-dasharray, используются для стилизации круга.
5. С помощью метода AppendChild() добавьте созданные элементы SVG (imageElement, textElement и CircleElement) в конец списка дочерних элементов корневого элемента SVG (svgElement).
6. Вызовите метод Save(), чтобы сохранить документ SVG в файл с именем в указанном выходном каталоге.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Paths;

// SVG Drawing on existing bitmap

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it into svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 480;
    imageElement.Width.BaseVal.Value = 640;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    svgElement.AppendChild(imageElement);

    // Create a <text> element, set its attributes, and it into svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "1.4em";
    textElement.SetAttribute("x", "420px");
    textElement.SetAttribute("fill", "gold");
    textElement.SetAttribute("y", "280px");
    textElement.TextContent = "The beach is beautiful...";
    svgElement.AppendChild(textElement);

    // Create a <circle> element, set its attributes, and add it into svgElement
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 520;
    circleElement.Cy.BaseVal.Value = 120;
    circleElement.R.BaseVal.Value = 60;
    circleElement.SetAttribute("stroke", "gold");
    circleElement.SetAttribute("stroke-width", "70");
    circleElement.SetAttribute("fill", "none");
    circleElement.SetAttribute("stroke-dasharray", "2,14");
    svgElement.AppendChild(circleElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-drawing-on-bitmap.svg"));
}

Мы нарисовали круг SVG с большим значением ширины штриха. Применение атрибута stroke-dasharray преобразует обводку круга в пунктирную линию. Выбирая значения закрашенных-незакрашенных областей, можно добиться желаемого визуального эффекта. Дополнительную информацию о свойствах атрибутов стиля можно найти в статье Заливка и обводка в SVG.

Вы можете загрузить полные примеры и файлы данных с GitHub. О загрузке с GitHub и запуске примеров вы узнаете из раздела Как запускать примеры.