C#でSVGを編集する

C#を使用してプログラムでSVGを編集する方法を学びます。

C#でSVGを編集する方法

Aspose.SVG for .NET ライブラリは、SVGファイルの作成、編集、変換、その他の操作を行うためのクラスとメソッドのセットを提供する。ドキュメントオブジェクトが作成されると、SVG要素で満たすことができる。SVG図形、テキスト、フィルタなどの要素を追加することで、ドキュメントをカスタマイズすることができる。1つは Aspose.SVG Builder API を使用したもので、もう1つは要素と属性の直接設定による手動DOM操作を使用したものです。

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

Aspose.SVG for .NETのインストール

Install-Package Aspose.SVG

要素ビルダーを使用してSVGファイルに要素を追加する

要素ビルダは Aspose.SVG Builder API の特殊なクラスであり、SVG 要素の作成と修正をコード内で容易にする。これらはしばしば Fluent Builder パターンのようなパターンを使用し、属性を設定し SVG コンテンツをプログラム的に構造化するための、クリーンで読みやすい構文を提供します。以下のコードは、C# を用いてゼロから SVG を作成する簡潔でエレガントなアプローチを示している。この例では、 SVGSVGElementBuilder 内の Fluent Builder パターンを利用して、SVG に新しい要素である装飾円とテキストを構築し追加している。

要素ビルダーを使用してSVGを編集するC#コード

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    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(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

SVG ファイルに要素を追加する

Document Object Model (DOM) API は SVG ノードとその属性の完全な制御を提供し、公式 SVG 仕様に完全に準拠している。新しいノードを追加したり、既存のノードを削除したり、その内容を編集したりすることで、ドキュメントを変更することができる。例えば、SVG に装飾された円とテキストを追加する方法を以下に示す：

低レベルDOM操作を使って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画像”

役に立つリソース

ドキュメント記事 Edit SVG File – C# Examples は、Aspose.SVG for .NET API を使って Document Object Model を読んだり編集したりする方法についての基本的な情報を提供します。SVG 要素を作成する方法と、新しいノードを挿入したり、削除したり、既存のノードの内容を編集したりしてドキュメントを変更する、要素を扱う方法を探ります。
SVG Builder – Advanced SVG Creation and Modification の章では、Aspose.SVG Builder API を使用して SVG を効果的に操作するためのガイドがあり、基本的な要素の作成から、ミックスインや構文糖などの高度なテクニックまでを網羅しています。
Element Builders では、Aspose.SVG Builder API で使用される要素ビルダーについて掘り下げています。SVGElementBuilder クラスとその特殊なビルダー、そしてそれらが SVG プログラミングをどのように単純化するかについて学びます。

その他のサポート機能

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