Створити SVG на C#

Як створити SVG на C#

Масштабована векторна графіка (Scalable Vector Graphics, SVG) – це мова XML для створення двовимірної векторної графіки, а документ SVG – це текстовий файл, який описує зображення як геометричні примітиви: лінії, криві, фігури, текст тощо. Якщо ви розробляєте веб-сайти, створюєте візуалізацію даних або працюєте над матеріалами для друку, SVG надає універсальне та ефективне рішення для створення графіки. Бібліотека Aspose.SVG for .NET надає набір класів і методів для створення, редагування, перетворення та інших маніпуляцій із файлами SVG. Отже, давайте створимо новий документ SVG!

По-перше, переконайтеся, що у вашому проекті встановлено Aspose.SVG for .NET API. Процес установки досить простий. Ви можете встановити його через консоль диспетчера пакетів NuGet за допомогою такої команди:

Install-Package Aspose.SVG

Створити порожній документ SVG

Aspose.SVG for .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 із рядка пам’яті (Memory String)

Створення 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

Після створення об’єкта документа його можна заповнити елементами 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 for .NET API, відвідайте нашу документацію .
• Зі статті Create SVG, Load and Read SVG in C# ви дізнаєтесь, як створити SVG із файлу, потоку чи рядка пам’яті; як завантажити SVG з Інтернету та читати SVG за допомогою Resources Async.
• Стаття документації Edit SVG File – C# Examples містить основну інформацію про те, як читати або редагувати об’єктну модель документа за допомогою Aspose.SVG for .NET API. Ви дізнаєтеся, як створювати елементи SVG і як з ними працювати – змінювати документ, вставляючи нові вузли, видаляючи або редагуючи вміст існуючих вузлів. У статті розглянуто докладні приклади додавання та редагування нових елементів у SVG та застосування фільтрів SVG до растрових зображень.
• Ми рекомендуємо вам переглянути наш посібник SVG Drawing – Basics Tutorial , якщо ви хочете дізнатися більше про правила та синтаксис SVG. Тут ми пояснюємо загальні правила та стандартні кроки для створення SVG з нуля на простих прикладах.

Інші підтримувані функції Aspose.SVG for .NET API

Використовуйте бібліотеку C# Aspose.SVG для конвертації, об’єднання, редагування документів SVG, конвертації кодів кольорів, векторизації зображень тощо!