Навигация и проверка SVG – Aspose.SVG для .NET

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

В этом разделе вы узнаете:

• как просмотреть содержимое SVG в виде строки;
• как выполнить детальную проверку документа и его элементов с помощью API;
• какие есть способы получения информации о том или ином элементе из SVG-файла;
• об использовании пользовательских фильтров для перебора элементов документа;
• как перемещаться по документу с помощью CSS Selector или XPath Query.

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

Просмотр содержимого SVG

Самый простой способ проверить содержимое документа – просмотреть содержимое как строку. Свойства InnerHTML и OuterHTML класса Element возвращают фрагмент XML (или HTML), который представляет элемент и его содержимое. Они разработаны именно для просмотра содержимого SVG в виде строки. В следующем примере кода показано, как просмотреть содержимое файла bezier-curves.svg в консоли.

using Aspose.Svg;
using System.IO;

// Get SVG document OuterHTML in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "bezier-curves.svg")))
{
    // Use the OuterHTML property
    string html = document.DocumentElement.OuterHTML;

    Console.WriteLine(html);
}
// View the document content

Навигация и проверка SVG с использованием DOM

Извлечение информации о конкретном элементе SVG

В следующем примере показано, как извлечь информацию о конкретном элементе SVG из файла shapes.svg:

using Aspose.Svg;
using System.IO;
using System.Linq;

// Extract information about specific SVG element

string documentPath = Path.Combine(DataDir, "shapes_svg.svg");

// Load a document from a file
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Get the root <svg> element of the document
    Element svg = document.DocumentElement;

    // Find the first child element with a given tag name
    SVGGElement g = svg.GetElementsByTagName("g").First() as SVGGElement;
    SVGRectElement rect = g.FirstElementChild as SVGRectElement;

    Console.WriteLine("Height: {0}", rect.Height);// 100
    Console.WriteLine("Width: {0}", rect.Width); // 100
}

В этом примере использование свойства DocumentElement обеспечивает прямой доступ к элементу <svg> документа. Метод GetElementsByTagName() класса Element возвращает NodeList всех элементов-потомков с заданным именем тега; в этом случае возвращаемым элементом является первый элемент <g>. Свойство FirstElementChild возвращает первый узел дочернего элемента этого элемента. В этом примере первым дочерним элементом элемента <g> является элемент <rect>, для которого печатаются значения ширины и высоты.

Проверка документа SVG и его элементов

Aspose.SVG содержит список методов, основанных на Спецификациях обхода элементов. Выполнить детальную проверку документа и его элементов можно с помощью API ( shapes.svg). В следующем примере кода показано обобщенное использование функций обхода элементов.

using Aspose.Svg;
using System.IO;

// Traverse SVG elements in C# programmatically

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes_svg.svg")))
{
    // Get direct access to the <svg> element of the document
    Element element = document.DocumentElement;
    Console.WriteLine(element.TagName); // svg

    // Use the LastElementChild property
    element = element.LastElementChild;
    Console.WriteLine(element.TagName); // g

    // Use the FirstElementChild property
    element = element.FirstElementChild;
    Console.WriteLine(element.TagName); // rect
}

Элемент <svg> является контейнером и используется как самый внешний элемент документов SVG. Чтобы указать элемент <svg>, вы можете применить несколько способов:

• Свойство DocumentElement класса Document предоставляет прямой доступ к элементу <svg> документа. В приведенном выше фрагменте кода мы используем этот способ.
• Свойство RootElement класса SVGDocument возвращает корневой элемент <svg> в иерархии документа. Чтобы указать элемент <svg>, вы можете применить следующий код:

var svgElement = document.RootElement;

Свойство LastElementChild класса Document возвращает последний дочерний элемент элемента <svg>. Это элемент <g>. Согласно приведенному выше фрагменту кода, элемент переменной снова перегружается, а свойство FirstElementChild возвращает первого дочернего элемента элемента <g>. Это элемент <rect>.

Использование пользовательского фильтра

API Aspose.SVG позволяет вам определять собственные фильтры и использовать их для перебора элементов документа, как показано в следующем примере кода:

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

// Iterate SVG nodes with NodeIterator in C#

using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Create a node iterator
    using (INodeIterator iterator = document.CreateNodeIterator(document, NodeFilter.SHOW_ALL, new RectFilter()))
    {
        Node node;
        while ((node = iterator.NextNode()) != null)
        {
        }
    }
}

где класс RectFilter определяется следующим образом:

    public class RectFilter : NodeFilter
    {
        public override short AcceptNode(Node n)
        {
            return string.Equals("rect", n.NodeName) ? FILTER_ACCEPT : FILTER_REJECT;
        }
    }

Метод CreateNodeIterator(Node, Int64, INodeFilter) интерфейса IDocumentTraversal создает новый итератор с корнем в указанном Node (в нашем примере это document). В качестве параметров метод принимает флаг Node, Int64, определяющий типы узлов для итератора, и INodeFilter (в нашем примере это RectFilter()).

Класс RectFilter наследует от класса NodeFilter метод AcceptNode(Node n). Метод принимает узел и проверяет, проходит ли он фильтр или нет; метод возвращает короткое сообщение, указывающее, найден ли узел или нет.

В итераторе мы используем метод NextNode() интерфейса INodeIterator для доступа ко всем узлам документа. Первый вызов NextNode() возвращает первый узел и перемещает позицию итератора в наборе. Свойство OuterHTML класса Element возвращает содержимое элемента, которое будет напечатано.

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

Редактировать SVG с помощью селектора CSS

Aspose.SVG для .NET также реализует спецификацию CSS Selector, которая позволяет вам перемещаться по документу.

Метод QuerySelector(selector) класса Element позволяет получить первый элемент в документе, соответствующий указанному селектору. Метод QuerySelectorAll(selector) принимает в качестве параметра селектор запроса и возвращает NodeList всех элементов, соответствующих селектору. С получившимися элементами можно производить различные манипуляции: менять его текст, атрибуты, стили CSS и так далее.

В следующих примерах мы используем методы QuerySelector() и QuerySelectorAll() для навигации по документу SVG и поиска необходимых элементов.

Пример 1

В примере 1 мы редактируем исходный файл owl.svg – это SVG-изображение совы, нарисованное элементами пути и круга.

• находим в SVG документе все элементы круга и меняем их свойства – делаем сове большие голубые глаза;
• находим элемент пути для крыла совы и украшаем его.

Использование селектора CSS:

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

// Edit SVG elements with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Find the first element that matches the specified in selector
    SVGGElement gElement = svgElement.QuerySelector("g") as SVGGElement;

    // Find all <circle> elements in a <g> element
    NodeList circleNodes = gElement.QuerySelectorAll("circle");

    // Make big blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;
        circleElement.R.BaseVal.Value *= 1.5F;
        circleElement.SetAttribute("stroke", "blue");
    }

    // Get a path for the owl's wing
    SVGPathElement wingPath = gElement.QuerySelector("path:nth-child(2)") as SVGPathElement;

    // Apply style attributes to the wing
    wingPath.SetAttribute("stroke-width", "16");
    wingPath.SetAttribute("stroke-dasharray", "2 8");

    document.Save(Path.Combine(OutputDir, "owl-edited1.svg"));
}

Посмотреть и сохранить отредактированный SVG-файл можно по ссылке – owl-edited1.svg.

Пример 2

В этом примере мы покажем, как использовать селектор CSS для навигации по документу в целях редактирования. Продолжаем редактировать исходный файл owl.svg:

• в первой части Примера 2 круглые глаза совы будут заменены на квадратные и перекрашены.

Мы создаем новый элемент <g>, добавляем в него общие атрибуты для дочерних элементов (это будут новые квадратные глаза) и добавляем его в качестве последнего дочернего элемента в элементе <svg> (см. Редактирование файла SVG); используя метод QuerySelectorAll(“g:first-child > circle”), мы находим все круги в первом элементе <g>; затем мы создаем элементы <rect> с атрибутами размера, добавляем прямоугольники во второй элемент <g> и удаляем элементы круга.

Следующий фрагмент кода демонстрирует, как реализовать эту задачу:

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

// Replace SVG circles with rectangles in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a new <g> element with style attributes and append it as the last child of the <svg> element
    SVGGElement gElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");
    gElement.SetAttribute("fill", "none");
    gElement.SetAttribute("stroke-width", "2");
    svgElement.AppendChild(gElement);

    // Find all <circle> elements from the first <g> element
    NodeList circleNodes = svgElement.QuerySelectorAll("g:first-child > circle");

    // Make square sky-blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;

        float cx = circleElement.Cx.BaseVal.Value;
        float cy = circleElement.Cy.BaseVal.Value;
        float r = circleElement.R.BaseVal.Value;

        SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = cx - r;
        rectElement.Y.BaseVal.Value = cy - r;
        rectElement.Width.BaseVal.Value = 3 * r;
        rectElement.Height.BaseVal.Value = 3 * r;
        rectElement.SetAttribute("stroke", "SkyBlue");

        // Add a <rectangle> element into the second (new) <g> element and remove <circle> elements
        gElement.AppendChild(rectElement);
        circleElement.Remove();
    }
    // Recolor last rectangle in the second (new) <g> element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

    document.Save(Path.Combine(OutputDir, "owl-svg-eyes.svg"));
}

• во второй части примера 2 траектория крыла совы будет изменена с кривой (path) на ломаную и перекрашена.

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

// Modify and rewrite SVG path data in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-svg-eyes.svg")))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get a path for owl's body from the first <g> element
    Element bodyPath = (svgElement.QuerySelector("g:first-child") as SVGGElement).FirstElementChild;
    bodyPath.SetAttribute("stroke", "Teal");

    // Get a path for the owl's wing from the first <g> element
    SVGPathElement wingPath = svgElement.QuerySelector("g:first-child > path:nth-child(2)") as SVGPathElement;

    // Form new wing path data based on the old
    string d = "";
    foreach (SVGPathSeg pathSeg in wingPath.PathSegList)
    {
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            d += string.Format(" M {0} {1}", pathSegMovetoAbs.X, pathSegMovetoAbs.Y);
        }
        if (pathSeg is SVGPathSegCurvetoCubicAbs)
        {
            SVGPathSegCurvetoCubicAbs pathSegCurvetoCubicAbs = pathSeg as SVGPathSegCurvetoCubicAbs;

            d += string.Format(
                " L {0} {1} L {2} {3}",
                (pathSegCurvetoCubicAbs.X1 + pathSegCurvetoCubicAbs.X2) / 2F,
                (pathSegCurvetoCubicAbs.Y1 + pathSegCurvetoCubicAbs.Y2) / 2F,
                pathSegCurvetoCubicAbs.X,
                pathSegCurvetoCubicAbs.Y
            );
        }
    }
    // Set d attribute - new path data formation
    wingPath.SetAttribute("d", d.Trim());
    wingPath.SetAttribute("stroke", "Teal");

    document.Save(Path.Combine(OutputDir, "owl-edited2.svg"));
}

На рисунке: исходная картинка (а), отредактированная картинка по примеру 1 (b), отредактированная картинка по примеру 2 (c).

В приведенных выше примерах мы берем исходный файл owl.svg и редактируем некоторые элементы. Глаза и крылья совы мы попытались украсить различными способами, используя функции навигации и проверки API Aspose.SVG. Посмотреть и сохранить отредактированный SVG-файл можно по ссылке – owl-edited2.svg.

Навигация по SVG с помощью запроса XPath

XPath Query ( XML Path Language), часто называемый просто XPath, представляет собой язык запросов, используемый для запроса данных из документов. Он основан на DOM-представлении документа SVG и выбирает узлы по различным критериям. Синтаксис выражений XPath довольно прост и, что более важно, его легко читать и поддерживать.

Aspose.SVG также имеет мощную реализацию спецификаций XPath наряду со спецификациями обхода. Это позволит вам использовать XPath Query для навигации по документу ( shapes.svg), как показано в следующем примере кода:

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

    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
    {
        //  Evaluate XPath expression
        var xpathResult = document.Evaluate("//rect[@x='120']", document, null, (Dom.XPath.XPathResultType)XPathResultType.Any, null);

        //  Get the next evaluated node
        Console.WriteLine((xpathResult.IterateNext() as Element)?.OuterHTML); 
    }

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

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