Создание SVG, загрузка и чтение SVG на C#

Для выполнения любой задачи необходимо создать или загрузить документ. Aspose.SVG для .NET API позволяет создавать документы SVG с нуля, а также загружать существующий SVG из разных источников. API предоставляет класс SVGDocument, который имеет несколько конструкторов, позволяющих создавать новые экземпляры классов. SVGDocument является корнем иерархии SVG DOM, содержит весь контент и полностью основан на спецификациях W3C SVG 2.0 и WHATWG DOM.

Файлы SVG можно создавать и загружать:

• с нуля как пустой документ со структурой SVG,
• из строки, предоставленной пользователем,
• из потока памяти или файла,
• из сети.

В этой статье представлены некоторые примеры создания и загрузки файлов SVG с использованием Aspose.SVG для .NET API. SVGDocument имеет широкий набор перегруженных конструкторов, позволяющих создать пустой документ или загрузить его из файла, URL-адреса, потока и т. д.

Создайте пустой документ SVG

Aspose.SVG для .NET API предоставляет класс SVGDocument, который можно использовать для создания пустого документа с использованием его конструктора по умолчанию. После создания объекта документа его можно будет позже заполнить элементами SVG. В следующем фрагменте кода C# показано использование конструктора по умолчанию SVGDocument() для создания документа SVG.

using Aspose.Svg;
...

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...
    }

Если вы хотите сохранить созданный пустой документ SVG в файл, используйте следующий фрагмент кода C#:

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

    // Prepare output path for a document saving
    string documentPath = Path.Combine(OutputDir, "empty.svg");

	// Initialize an empty SVG document
	using (var document = new SVGDocument())
	{
	    // Work with the SVG document here...

	    // Save the document to a file
	    document.Save(documentPath);
	}

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

Создать SVG из строки памяти

Вы можете создать SVG из строкового содержимого, используя конструктор SVGDocument(string, string). Если вам нужно создать документ из пользовательской строки непосредственно в коде и вам не нужно сохранять его в файл, вам может помочь следующий пример: мы создаем SVG-документ, содержащий круг с радиусом 40 пикселей.

using Aspose.Svg;
...

    // Prepare SVG code
    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";	

	// Initialize an SVG document from a string content
	using (var document = new SVGDocument(documentContent, "."))
	{
	    // Work with the document here...
	}

Создать SVG из потока

Чтобы создать SVG из потока, используйте один из конструкторов SVGDocument():

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

    //Prepare a path to a file required for a FileStream object creating
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg");

	// Create a FileStream object
	using (var stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (var document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

Создать SVG документ с использованием SVG Builder API

API SVG Builder предлагает мощный и гибкий способ программного создания документов SVG. Используя класс SVGSVGElementBuilder, разработчики могут легко создавать сложную графику SVG с возможностью детальной настройки. Дополнительную информацию об использовании API SVG Builder вы найдете в статье документации SVG Builder API – Расширенное создание и редактирование SVG.

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

using Aspose.Svg;
using Aspose.Svg.Builder;
using System.Drawing;
...

    // Initialize an SVG document
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(100).Height(100)
            .ViewBox(-21, -21, 42, 42)
            .AddDefs(def => def
                .AddRadialGradient(id: "b", cx: .2, cy: .2, r: .5, fx: .2, fy: .2, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: .7)
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: 0)
                )
                .AddRadialGradient(id: "a", cx: .5, cy: .5, r: .5, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .75, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .95, stopColor: Color.FromArgb(0xee, 0xee, 0x00))
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xe8, 0xe8, 0x00))
                )
            )
            .AddCircle(r: 20, fill: "url( #a)", stroke: Color.FromArgb(0, 0, 0), extend: c => c.StrokeWidth(.15))
            .AddCircle(r: 20, fill: "b")
            .AddG(g => g.Id("c")
                .AddEllipse(cx: -6, cy: -7, rx: 2.5, ry: 4)
                .AddPath(fill: Paint.None, stroke: Color.FromArgb(0, 0, 0), d: "M10.6 2.7a4 4 0 0 0 4 3", extend: e => e.StrokeWidth(.5).StrokeLineCap(StrokeLineCap.Round))
            )
            .AddUse(href: "#c", extend: e => e.Transform(t => t.Scale(-1, 1)))
            .AddPath(d: "M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0", fill:Paint.None, stroke: Color.FromArgb(0,0,0), extend: e => e.StrokeWidth(.75))
            .Build(document.FirstChild as SVGSVGElement);

        // Save the SVG document
        document.Save(OutputFolder + "face.svg");
    }

Этот фрагмент кода создает документ SVG со сложным дизайном, демонстрируя гибкость и мощь SVG Builder API для программного создания пользовательской графики SVG. Сгенерированное SVG изображение представляет лицо c улыбкой (смайлик):

Загрузить SVG из файла

Чтобы загрузить SVG из файла bezier-curves.svg, используйте конструктор по умолчанию класса SVGDocument и передайте ему путь к файлу в качестве входного параметра.

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

    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg"); 

	// Load an SVG document from the file
	using (var document = new SVGDocument(documentPath))
	{
	    // Work with the document 
	}

Загрузите SVG из Интернета

Следующие примеры могут помочь вам создать документ на основе URL-адреса, ссылающегося на XML-файл:

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
    using (var document = new SVGDocument(documentUrl))
    {
        // Work with the SVG document here...
    }

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    using (var document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/basic-shapes.svg")))
    {
        // Work with the SVG document here...
    }

Если вы зададите неправильный URL-адрес, к которому в данный момент невозможно получить доступ, библиотека выдаст исключение DOMException со специальным кодом «NetworkError», чтобы сообщить вам, что выбранный ресурс не может быть найден.

Чтение SVG с асинхронными ресурсами

Если SVG содержит внешние ресурсы, полная загрузка всех ресурсов может занять некоторое время и, следовательно, привести к блокировке основного потока приложения. В асинхронной модели на события Load и ReadyStateChange можно подписаться, чтобы уведомить приложение загрузки о полной загрузке файла SVG, как показано в следующем примере кода. Метод Navigate(Url) класса SVGDocument используется для загрузки документа по указанному URL в текущий экземпляр.

using Aspose.Svg;
using System.Threading;
...

    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
	var document = new SVGDocument();
	var documentEvent = new ManualResetEvent(false);

	// Subscribe to the event 'OnReadyStateChange' that will be fired once the document is completely loaded
	document.OnReadyStateChange += (sender, ev) =>
	{
	    if (document.ReadyState == "complete")
	    {
	        // Sets the state of the event to signaled to unblock the main thread
	        documentEvent.Set();
	    }
	};
	// Load the SVG document Async
	document.Navigate(documentUrl);

	// Blocks the current thread while the document is loading
	documentEvent.WaitOne();

	// Work with the document

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