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

Aspose.SVG for .NET редактирует SVG как структурированный векторный документ. Загрузите SVG-файл в SVGDocument, найдите или создайте SVG-элементы с помощью DOM API, измените их геометрию, атрибуты, текст, стили или данные пути и сохраните отредактированный файл без растеризации.

Типичный процесс редактирования SVG:

1. Загрузите существующий SVG-файл или создайте новый SVGDocument.
2. Найдите элемент с помощью CSS-селектора или создайте новый элемент методом CreateElementNS().
3. Измените свойства или атрибуты элемента и вставьте новое содержимое в дерево SVG.
4. Сохраните отредактированный SVG-документ методом Save().

Быстрый старт: добавление фигуры в SVG-файл

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

using System.IO;
using Aspose.Svg;

string inputPath = Path.Combine(DataDir, "shapes.svg");
string outputPath = Path.Combine(OutputDir, "shapes-with-circle.svg");
const string SvgNamespace = "http://www.w3.org/2000/svg";

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Access the root <svg> element, which is present in an SVG document.
    SVGSVGElement svgElement = document.RootElement;

    // Create a circle and define its geometry and appearance.
    SVGCircleElement circle = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    circle.SetAttribute("fill", "#3A86FF");

    // Add the circle to the document tree and save the edited SVG file.
    svgElement.AppendChild(circle);
    document.Save(outputPath);
}

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

Добавление элементов и установка атрибутов

Свойство RootElement возвращает корневой элемент <svg>. Новые SVG-элементы необходимо создавать в пространстве имен SVG; затем их можно добавить в контейнер или вставить в выбранное место дерева документа.

Этот фрагмент создает элемент <g> и вставляет его первым дочерним элементом корневого узла:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGGElement groupElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");

// Apply common styles to every graphic element later added to the group.
groupElement.SetAttribute("fill", "#8A8D8F");
groupElement.SetAttribute("stroke", "magenta");
groupElement.SetAttribute("stroke-width", "4");

svgElement.InsertBefore(groupElement, svgElement.FirstChild);

Используйте SetAttribute(), чтобы задавать или обновлять такие SVG-атрибуты созданных или существующих элементов, как fill, stroke, transform, class или d.

Значениями атрибутов можно управлять с помощью методов SetAttribute(name, value), GetAttribute(name), HasAttribute(name) и RemoveAttribute(name) класса Element.

Добавление и изменение фигур SVG

Aspose.SVG for .NET предоставляет типизированные DOM-классы для стандартных фигур SVG, включая SVGCircleElement, SVGEllipseElement, SVGRectElement, SVGLineElement, SVGPolylineElement, SVGPolygonElement и SVGPathElement. Их типизированные свойства позволяют изменять геометрию напрямую: например, Cx.BaseVal.Value, Cy.BaseVal.Value и R.BaseVal.Value задают круг, а содержимое остается редактируемой векторной графикой.

Добавление круга

Круг управляется типизированными свойствами Cx, Cy и R. В следующем полном примере круг добавляется в существующий документ SVG:

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

// Add a circle element to an existing SVG document in C#

// Set the SVG namespace URI
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 the 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-элемент <polyline> хранит координаты вершин в атрибуте points. В Aspose.SVG список SVGPolylineElement.Points предоставляет типизированный доступ к этим координатам. С помощью CreateSVGPoint() можно добавлять точки, не составляя строку атрибута вручную:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGPolylineElement 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 new polyline to the SVG root element
svgElement.AppendChild(polylineElement);

// Update strokes of circle and ellipse elements already in the SVG document
foreach (Element element in svgElement.Children)
{
    if (element is SVGCircleElement || element is SVGEllipseElement)
    {
        element.SetAttribute("stroke-width", "6");
        element.SetAttribute("stroke", "#C8102E");
    }
}

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

Редактирование данных пути SVG

Геометрия элемента <path> хранится в его атрибуте d. Создайте типизированный SVGPathElement, обновите данные пути и добавьте его в документ SVG, как любой другой элемент:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGPathElement pathElement =
    (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

// Set the path geometry and its visible style.
pathElement.SetAttribute("d", "M 10 200 Q 25 210 180 200 T 300 250 T 420 250 T 490 150");
pathElement.SetAttribute("stroke", "magenta");
pathElement.SetAttribute("fill", "none");
pathElement.SetAttribute("stroke-width", "4");

document.RootElement.InsertBefore(pathElement, document.RootElement.FirstChild);

Если код создает или изменяет команды пути посегментно, SVGPathElement также предоставляет операции с сегментами пути. В следующем примере создается путь и изменяются координаты выбранных команд в существующем SVG-файле:

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

// Edit SVG path data programmatically in C#

// Set the SVG namespace URI
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"));
}

На рисунке сравниваются исходный черный и отредактированный красный пути. Можно также открыть измененный файл примера: edit-svg-path-data.svg.

Синтаксис команд пути и особенности рисования описаны в статье Данные пути SVG.

Добавление SVG-содержимого поверх растрового изображения

SVG-документ может ссылаться на растровое изображение с помощью элемента <image> и размещать поверх него редактируемый векторный текст или фигуры. При этом пиксели растрового изображения не изменяются: фоновое изображение и SVG-наложение остаются отдельными частями векторного документа.

Этот подход удобен, если на фотографию, скан или другую растровую графику требуется добавить подписи, маркеры, значки или декоративные элементы, которые должны оставаться редактируемыми в SVG. В SVG порядок рисования соответствует порядку элементов: если сначала добавить <image>, а затем текст или фигуры, векторные элементы будут отображаться поверх растрового фона.

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

Чтобы создать такую композицию с помощью Aspose.SVG for .NET:

1. Создайте SVGDocument и получите доступ к корневому элементу <svg> через RootElement.
2. Создайте SVGImageElement методом CreateElementNS(), укажите ссылку на изображение, его положение и размер, затем добавьте элемент в корень в качестве фона.
3. Создайте SVGTextElement, задайте текст, положение, стиль шрифта и цвет заливки, затем добавьте его после изображения.
4. Создайте SVGCircleElement, задайте положение, радиус и атрибуты обводки, затем добавьте его после фонового изображения. В этом примере широкая пунктирная обводка создает декоративный эффект солнца.
5. Вызовите Save() для записи SVG-документа. В сохраненном файле ссылка на bitmap, текст и круг сохраняются как редактируемые элементы SVG.

Следующий пример выполняет эти шаги и сохраняет результат в SVG:

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

// Draw SVG shapes and text on an existing bitmap in C#

// Set the SVG namespace URI
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 add it to the <svg> element
    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 to the <svg> element
    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 см. в статье Заливка и обводка в SVG.

FAQ

1. Преобразует ли Aspose.SVG файл в bitmap при редактировании SVG?

Нет. При редактировании через SVGDocument изменяются SVG-элементы, атрибуты и данные пути, но документ остается векторным. Растровый результат создается только при явной конвертации или рендеринге SVG в формат изображения, например PNG, JPEG или WebP.

2. Как изменить существующий SVG-элемент, а не добавлять новый?

Найдите нужный элемент с помощью CSS-селектора или XPath-запроса, затем измените его атрибуты или типизированные свойства SVG. Например, выбрав <circle>, код может изменить его радиус, положение, заливку или обводку. См. статьи Навигация и проверка SVG и Как изменить цвет SVG.

3. Можно ли изменить SVG-документ и сразу конвертировать измененный результат?

Да. Загрузите исходный файл в SVGDocument, внесите изменения, создайте параметры сохранения для целевого формата и вызовите Converter.ConvertSVG(document, options, outputPath). Например, используйте PdfSaveOptions для PDF или ImageSaveOptions для PNG, JPEG, TIFF, GIF, BMP или WebP. Полные примеры приведены в статье Конвертация SVG-файлов в C#.

4. Можно ли заменить существующую фигуру SVG другим элементом?

Да. Найдите существующий элемент с помощью селектора или XPath-запроса, создайте замену методом CreateElementNS(), вставьте новый элемент в тот же родительский узел и удалите старый. Например, можно заменить круглые маркеры прямоугольниками, не изменяя остальную часть SVG-документа. Пример приведен в статье Навигация и проверка SVG.

Дальнейшие шаги

• Создание и загрузка документов SVG – создайте исходный документ или загрузите SVG из файла, потока, строки или URL.
• Навигация и проверка SVG – найдите элементы, которые нужно изменить.
• Сохранение документов SVG – сохраните измененное содержимое SVG в файл или поток.
• SVG Builder – расширенное создание и изменение SVG – создавайте и изменяйте SVG с помощью Builder API.
• Как запускать примеры – загрузите и запустите полные примеры с GitHub.