Создание, загрузка и чтение SVG-файлов в C#

Это руководство показывает, как создавать, загружать и читать SVG-файлы в C# с помощью Aspose.SVG for .NET. Вы узнаете, как инициализировать SVGDocument из пустого документа, строкового содержимого, потока, локального файла, URL-адреса, а также как асинхронно загружать SVG-документы с внешними ресурсами.

Класс SVGDocument является точкой входа для работы с SVG-содержимым в Aspose.SVG for .NET. Он представляет корень иерархии SVG DOM, содержит весь контент документа и соответствует спецификациям W3C SVG 2.0 и WHATWG DOM.

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

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

Следующие примеры C# демонстрируют наиболее распространенные конструкторы SVGDocument и сценарии загрузки.

Быстрый старт: создание SVG-документа в C#

Самый быстрый способ создать SVG-документ – передать SVG-разметку строкой в конструктор SVGDocument. Это удобно, когда SVG-содержимое динамически генерируется в вашем приложении:

using Aspose.Svg;
...

    string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";

    using (SVGDocument document = new SVGDocument(svgContent, "."))
    {
        document.Save("circle.svg");
    }

Создание пустого SVG-документа

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

using Aspose.Svg;
...

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

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

using Aspose.Svg;
using System.IO;

// Create an empty SVG document using C#

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

// Initialize an empty SVG document
using (SVGDocument 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 из строки в памяти

Используйте конструктор SVGDocument(string, string), когда SVG-разметка уже находится в памяти, например после генерации приложением или получения из базы данных, API либо пользовательского ввода.

Второй аргумент конструктора – базовый URI. Aspose.SVG использует его для разрешения относительных путей внутри SVG, например связанных изображений, CSS-файлов или шрифтов. Если SVG-разметка не ссылается на внешние ресурсы, можно передать ".", как показано в примере быстрого старта выше. Если ссылки есть, передайте папку или URL, где находятся эти ресурсы:

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

    // SVG markup contains a relative reference to an external image
    string documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"120\"><image href=\"images/logo.png\" width=\"200\" height=\"120\" /></svg>";

    // Relative paths in the SVG are resolved against this base URI
    string baseUri = Path.Combine(DataDir, "assets") + Path.DirectorySeparatorChar;

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

Загрузка SVG из потока

Чтобы загрузить SVG из потока, используйте один из конструкторов SVGDocument(), принимающих объект Stream. Этот подход полезен для чтения SVG из загруженных пользователем файлов, встроенных ресурсов, буферов памяти и других источников, которые не являются обычными файлами:

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 (FileStream stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (SVGDocument document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

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

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

Ниже приведен пример создания пользовательского SVG-документа с различными графическими элементами:

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

// Create SVG using Builder API

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement 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(Path.Combine(OutputDir, "face.svg"));
}

Этот фрагмент кода создает SVG-документ со сложным дизайном и демонстрирует гибкость и возможности SVG Builder API для программной генерации пользовательской SVG-графики. В приведенном выше коде C# мы создаем SVG-документ с такими элементами, как круги, эллипсы, пути и градиенты. Сгенерированное SVG-изображение представляет улыбающееся лицо:

Загрузка 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 (SVGDocument document = new SVGDocument(documentPath))
	{
	    // Work with the document
	}

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

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

using Aspose.Svg;
...

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

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    using (SVGDocument 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-документ ссылается на внешние ресурсы, такие как изображения, шрифты, CSS-файлы или скрипты, загрузка может занять дополнительное время и заблокировать основной поток приложения. В асинхронной модели загрузки можно подписаться на события Load и ReadyStateChange и уведомить приложение, когда SVG-документ и его ресурсы будут готовы.

Метод Navigate(Url) класса SVGDocument загружает документ из указанного URL в текущий экземпляр.

using Aspose.Svg;
using System.Threading;

// Load SVG asynchronously using C#

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

SVGDocument document = new SVGDocument();

// 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 an SVG document Async
document.Navigate(documentUrl);

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

// Work with the document

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

FAQ

1. Почему изображения, шрифты или CSS-файлы не загружаются, когда я создаю SVG из строки или потока?
Когда SVG создается из строки или потока, относительные пути к ресурсам разрешаются относительно базового URI, переданного в конструктор SVGDocument. Если связанные изображения, шрифты или CSS-файлы не загружаются, проверьте, что базовый URI указывает на папку или URL, где находятся эти ресурсы.

2. Что произойдет, если SVG-файл содержит некорректную разметку?
Aspose.SVG обрабатывает SVG как XML-содержимое. Если разметка некорректна или необходимые ресурсы не удается разрешить, загрузка документа или последующая обработка могут завершиться ошибкой. Проверяйте сгенерированную SVG-разметку и обрабатывайте исключения загрузки в промышленном коде.

3. Можно ли изменить SVGDocument после загрузки?
Да. После загрузки SVG-файла можно перемещаться по его DOM и изменять его, добавлять или удалять элементы, обновлять атрибуты, применять стили и сохранять результат. Подробные примеры редактирования см. в статье Редактировать SVG-файл.

4. Подходит ли SVGDocument для серверных приложений?
Да. Aspose.SVG for .NET можно использовать в backend-сервисах, ASP.NET-приложениях, пакетных обработчиках и сценариях автоматизации документов без зависимости от автоматизации браузера.

5. В чем разница между SVG Builder API и манипуляцией DOM?
SVG Builder API удобно использовать для пошагового создания новых SVG-структур в C#. Манипуляция DOM лучше подходит, когда вы работаете с уже загруженным SVG-документом и нужно изменить существующие элементы, атрибуты или стили.

Следующие шаги

• Сохранить SVG-документ – сохраняйте SVG-документы в файлы, потоки, ZIP-архивы или URL.
• Редактировать SVG-файл – программно добавляйте, изменяйте и удаляйте SVG-элементы.
• Инспектировать SVG и перемещаться по нему – проверяйте SVG-элементы и перемещайтесь по SVG DOM с помощью CSS-селекторов или XPath.
• Как конвертировать SVG-файлы – конвертируйте SVG в PDF, XPS, PNG, JPEG и другие форматы.
• Как запускать примеры – настройте и запустите примерные проекты Aspose.SVG.