Создать SVG на C#

Как создать SVG на C#

Масштабируемая векторная графика (SVG) – это язык XML для создания двумерной векторной графики, а документ SVG – это текстовый файл, описывающий изображения как геометрические примитивы: линии, кривые, формы, текст и т. д. Если вы разрабатываете веб-сайты, создаете визуализацию данных или работаете над печатными материалами, SVG предоставляет универсальное и эффективное решение для создания графики. Библиотека Aspose.SVG for .NET предоставляет набор классов и методов для создания, редактирования, преобразования и других манипуляций с файлами SVG. Итак, давайте создадим новый SVG-документ!

Сначала убедитесь, что в вашем проекте установлена библиотека Aspose.SVG for .NET. Процесс установки довольно прост. Вы можете установить её через консоль диспетчера пакетов NuGet, используя следующую команду:

Install-Package Aspose.SVG

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

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

1. Создайте документ SVG с нуля, используя конструктор SVGDocument() .
2. Сохраните файл SVG, используя один из методов Save() .

using System.IO;
using Aspose.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(Path.Combine(OutputDir, "empty.svg"));
    }

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

Cоздание SVG из строки памяти может быть полезна, если вы хотите генерировать SVG «на лету». Такой способ создания SVG позволяет легко обновлять и представлять изменяющиеся наборы данных в ваших визуализациях. Вы можете создать SVG из строкового содержимого, используя конструктор SVGDocument(string, string) :

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

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

Как добавить элементы в файл SVG

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

После создания объекта документа его можно заполнить элементами SVG. Вы можете настроить документ, добавив больше элементов, таких как фигуры SVG, тексты, фильтры и т. д., используя соответствующие классы, предоставляемые пространством имен Aspose.Svg . Например, вот как можно добавить декорированный круг и текст:

using System.IO;
using Aspose.Html;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Давайте рассмотрим простые шаги по редактированию SVG-документа, иллюстрирующие приведенный выше код С#. Элементы SVG <circle> и <text> добавляются в созданный документ SVG:

1. Чтобы создать документ SVG программным способом с нуля, используйте конструктор SVGDocument() без параметров.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Создайте элементы <text> и <circle> с атрибутами и добавьте их к элементу <svg>:
   • Вы можете использовать метод CreateElementNS() для создания экземпляров классов SVGTextElement и SVGCircleElement.
   • Вызовите метод SetAttribute() , чтобы установить атрибуты, определяющие положение, размер, заливку и т. д.
   • Используйте метод AppendChild() для добавления элементов в <svg>.
4. Сохраните отредактированный SVG-файл методом Save() .

Результирующий файл, который мы создали выше (svg-from-scratch.svg), выглядит следующим образом:

Полезные ресурсы

• Чтобы узнать больше об Aspose.SVG для .NET API, посетите нашу документацию .
• Из статьи Создание SVG, загрузка и чтение SVG на C# вы узнаете, как создать SVG из файла, потока или строки памяти; как загружать SVG из Интернета и читать SVG с помощью Resources Async.
• В статье Редактирование файла SVG - Примеры C# представлена ​​основная информация о том, как читать или редактировать объектную модель документа с помощью Aspose.SVG для .NET API. Вы узнаете, как создавать элементы SVG и как с ними работать – изменять документ, вставляя новые узлы, удаляя или редактируя содержимое существующих узлов. В статье рассмотрены подробные примеры добавления и редактирования новых элементов в SVG и применения SVG-фильтров к растровым изображениям.
• Мы рекомендуем вам посетить наше руководство Рисование SVG – Основы обучения , если вы хотите узнать больше о правилах и синтаксисе SVG. Здесь мы объясняем общие правила и стандартные шаги создания SVG с нуля на простых примерах.

Другие поддерживаемые функции Aspose.SVG для .NET API

Используйте библиотеку Aspose.SVG C# для преобразования, объединения, редактирования документов SVG, преобразования цветовых кодов, векторизации изображений и многого другого!