Навигация и проверка 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;
...

    string documentPath = Path.Combine(DataDir, "bezier-curves.svg");

	// Load an SVG document
	using (var document = new SVGDocument(documentPath))
	{
	     var 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;
...

    //Load a document from a file
    string documentPath = Path.Combine(DataDir, "shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Get the root svg element of the document
    	var svg = document.DocumentElement;

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

        var rect = g.FirstElementChild as SVGRectElement;

        Console.WriteLine("Height: {0}", rect.Height);// 90
        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;
...

    // Load a document
	string documentPath = Path.Combine(DataDir, "shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        var element = document.DocumentElement;
        Console.WriteLine(element.TagName); // svg
        
        element = element.LastElementChild;
        Console.WriteLine(element.TagName); // g

        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 возвращает первого дочернего элемента элемента . Это элемент <rect>.

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

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

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

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

где класс 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;
...

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

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

        // Find all circle elements in 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 path for an owl 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(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;
...

    // Create a new g element with style attributes and append it as the last child in svg element
    var 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)
    {
        var circleElement = circleNode as SVGCircleElement;

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

        var 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 the rectangle element into the last (new) g element 
        gElement.AppendChild(rectElement);

    	// Remove the circle elements
        circleElement.Remove();
    }
    // Recolor last rectangle in the last (new) g element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

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

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

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

    // Get path for owl 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(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 и запуске примеров вы узнаете из раздела Как запускать примеры.