C# で SVG を作成する

SVG を最初から作成する方法とそのコンテンツを編集する方法を学びます。

C# で SVG を作成する方法

スケーラブルベクターグラフィックス (SVG) は、2 次元のベクターグラフィックスを作成するための XML 言語であり、SVG ドキュメントは、線、曲線、形状、テキストなどの幾何学的プリミティブとして画像を記述するテキストファイルです。Web サイトを開発する場合は、データを作成します。 SVG は、グラフィック作成のための多用途かつ効率的なソリューションを提供します。 Aspose.SVG for .NET ライブラリは、SVG ファイルの作成、編集、変換、その他の操作を行うためのクラスとメソッドのセットを提供します。それでは、新しい SVG ドキュメントを作成してみましょう。

まず、Aspose.SVG for .NET API がプロジェクトにインストールされていることを確認します。インストールプロセスは非常に簡単です。次のコマンドを使用して、NuGet パッケージマネージャーコンソール経由でインストールできます。

.NET 用の Aspose.SVG をインストールする

Install-Package Aspose.SVG

空のSVGドキュメントを作成する

Aspose.SVG for .NET API は、SVG ドキュメントの作成に使用できる SVGDocument クラスを提供します。 SVGDocument は SVG 階層のルートであり、コンテンツ全体を保持します。次の C# コードスニペットは、空のドキュメントを作成するためのデフォルトの SVGDocument() コンストラクターの使用法を示しています。

SVGDocument() コンストラクターを使用して、SVG ドキュメントを最初から作成します。
Save() メソッドのいずれかを使用して SVG ファイルを保存します。

空の SVG ドキュメントを作成する C# コード

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 を作成する

メモリ文字列からの SVG の生成は、SVG をその場で生成したい場合に便利です。文字列から SVG を作成すると、ビジュアライゼーション内の変化するデータセットを簡単に更新して表現できます。 SVGDocument(string, string) コンストラクターを使用して、文字列コンテンツから SVG を作成できます。

文字列から SVG を作成する C# コード

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 for .NET を使用すると、SVG ファイルを編集し、その内容を変更できます。 API のドキュメントオブジェクトモデル (DOM) は、SVG ノードとその属性を完全に制御し、公式の SVG 仕様に完全に準拠しています。

ドキュメントオブジェクトが作成されたら、SVG 要素を埋め込むことができます。 Aspose.Svg 名前空間によって提供される適切なクラスを使用して、SVG 図形、テキスト、フィルターなどの要素を追加することでドキュメントをカスタマイズできます。たとえば、装飾された円とテキストを追加する方法は次のとおりです。

SVGを編集するためのC#コード

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 ドキュメントに追加されます。

SVG ドキュメントをプログラムで最初から作成するには、パラメーターを指定せずに SVGDocument() コンストラクターを使用します。
SVGDocument クラスの RootElement プロパティは、ドキュメントのルート <svg> 要素を指します。
属性を持つ <text> 要素と <circle> 要素を作成し、それらを <svg> 要素に追加します。
- CreateElementNS() メソッドを使用して、SVGTextElement クラスと SVGCircleElement クラスのインスタンスを作成できます。
- SetAttribute() メソッドを呼び出して、位置、サイズ、塗りつぶしなどを指定する属性を設定します。
- AppendChild() メソッドを使用して要素を <svg> に追加します。
Save() メソッドを使用して、編集したSVGファイルを保存します。

上記で作成したファイル (svg-from-scratch.svg) は次のようになります。

テキスト「円とテキストを含むSVG画像」

役立つリソース

Aspose.SVG for .NET API の詳細については、ドキュメントを参照してください。
Create SVG, Load and Read SVG in C# 記事では、ファイル、ストリーム、またはメモリ文字列から SVG を作成する方法を説明しています。 Web から SVG をロードする方法、および Resources Async を使用して SVG を読み取る方法。
Edit SVG File - C# Examples ドキュメント記事では、Aspose.SVG for .NET API を使用してドキュメントオブジェクトモデルを読み取りまたは編集する方法に関する基本情報を提供します。 SVG 要素の作成方法とその操作方法、つまり新しいノードの挿入、削除、既存ノードのコンテンツの編集によってドキュメントを変更する方法を学びます。この記事では、SVG での新しい要素の追加と編集、およびビットマップへの SVG フィルターの適用の詳細な例が検討されています。
SVG のルールと構文について詳しく知りたい場合は、ガイド SVG Drawing – Basics Tutorial を参照することをお勧めします。ここでは、SVG をゼロから作成するための一般的なルールと標準的な手順を、簡単な例とともに説明します。

サポートされているその他の Aspose.SVG for .NET API 機能

Aspose.SVG C# ライブラリを使用して、SVG ドキュメントの変換、結合、編集、カラーコードの変換、画像のベクトル化などを行います。