C# でテキストを SVG に変換する

SVG Text 要素は、SVG でテキストを定義するために使用されます。 SVG (スケーラブルベクターグラフィックス) は、Web に適したベクターファイル形式です。ウェブページに視覚情報を表示するために使用されます。 SVG Text 要素を使用して、SVG で任意のテキストを簡単に記述できます。この記事では、C# でテキストを SVG に変換する方法を学習します。

この記事では、次のトピックについて説明します。

テキストを SVG に変換する C# API
SVGテキストとは
テキストを SVG に変換
TSpan でテキストを SVG に変換
TextPath を使用した SVG テキスト
SVG テキストスタイルを適用

テキストを SVG に変換する C# API

テキストを SVG に変換するには、Aspose.SVG for .NET API を使用します。ソフトウェアに依存せずに、SVG ファイルの読み込み、解析、レンダリング、作成、一般的な形式への変換が可能です。

API の SVGDocument クラスは、SVG 階層のルートを表し、コンテンツ全体を保持します。このクラスには、指定したファイルパスに SVG を保存できる Save() メソッドがあります。 SVGTextElement クラスは「テキスト」要素を表します。 SVGTSpanElement インターフェイスは「tspan」要素に対応します。 API は、’textPath’ 要素を表す SVGTextPathElement クラスと、‘path’ 要素の SVGPathElement を提供します。 SetAttribute(string, string) メソッドを使用して、SVG 要素のさまざまなプロパティ/属性を設定できます。 API の AppendChild(Node) メソッドは、ノードの新しい子をこのノードの子のリストの最後に追加します。

APIのDLLをダウンロードするか、NuGet でインストールしてください。

PM> Install-Package Aspose.SVG

SVG テキストとは?

SVG では、テキストは要素を使用してレンダリングされます。デフォルトでは、テキストは黒の塗りつぶしでアウトラインなしでレンダリングされます。次の属性を定義できます。

x: ポイントの位置を水平に設定します。
y: ポイントの位置を垂直方向に設定します。
fill: レンダリングされたテキストの色を定義します。
transform : 回転、平行移動、傾斜、拡大縮小。

C# を使用してテキストを SVG に変換する

以下の手順に従って、任意のテキストを SVG に追加できます。

まず、SVGDocument クラスのインスタンスを作成します。
次に、ドキュメントのルート要素を取得します。
次に、SVGTextElement クラスオブジェクトを作成します。
次に、SetAttribute() メソッドを使用してさまざまな属性を設定します。
その後、AppendChild() メソッドを呼び出してルート要素に追加します。
最後に、Save() メソッドを使用して出力 SVG 画像を保存します。

次のコードサンプルは、C# でテキストを SVG に変換する方法を示しています。

// このコード例は、テキストを SVG に追加する方法を示しています。
var document = new SVGDocument();

// ドキュメントのルート svg 要素を取得する
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG テキスト要素を定義する
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// 表示するテキストを定義する
text.TextContent = "The is a simple SVG text!";

// 各種属性を設定
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// ルートにテキストを追加する
svgElement.AppendChild(text);

// SVG として保存
document.Save(@"C:\Files\simple-text.svg");

Convert-Text-to-SVG-using-CSharp — C# を使用してテキストを SVG に変換します。

simple-text.svg イメージの内容を以下に示します。

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

C# で TSpan を使用してテキストを SVG に変換する

SVG 要素は、要素内のサブテキストを定義します。以下の手順に従って、tspan 要素を含む任意のテキストを SVG に追加できます。

まず、SVGDocument クラスのインスタンスを作成します。
次に、ドキュメントのルート要素を取得します。
次に、SVGTextElement クラスオブジェクトを作成します。
必要に応じて、SetAttribute() メソッドを使用してさまざまな属性を設定します。
次に、SVGTSpanElement オブジェクトを定義します。
次に、SetAttribute() メソッドを使用してその属性を設定します。
次に、AppendChild() メソッドを呼び出して、それを SVGTextElement 要素に追加します。
上記の手順を繰り返して、さらに SVGTSpanElement オブジェクトを追加します。
その後、AppendChild() メソッドを呼び出して、SVGTextElement をルート要素に追加します。
最後に、Save() メソッドを使用して出力 SVG 画像を保存します。

次のコードサンプルは、C# で tspan を含むテキストを SVG に変換する方法を示しています。

// このコード例は、tspan を使用してテキストを SVG に追加する方法を示しています。
var document = new SVGDocument();

// ドキュメントのルート svg 要素を取得する
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG テキスト要素
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");
text.SetAttribute("style", "font-family:arial");
text.SetAttribute("x", "20");
text.SetAttribute("y", "60");

// SVG TSan 要素
var tspan1 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan1.TextContent = "ASPOSE";
tspan1.SetAttribute("style", "font-weight:bold; font-size:55px");
tspan1.SetAttribute("x", "20");
tspan1.SetAttribute("y", "60");

// SVG テキストに追加
text.AppendChild(tspan1);

// 別の TSpan 要素
var tspan2 = (SVGTSpanElement)document.CreateElementNS(@namespace, "tspan");
tspan2.TextContent = "Your File Format APIs";
tspan2.SetAttribute("style", "font-size:20px; fill:grey");
tspan2.SetAttribute("x", "37");
tspan2.SetAttribute("y", "90");

// SVG テキストに追加
text.AppendChild(tspan2);

// ルートに SVG テキストを追加
svgElement.AppendChild(text);

// SVG を保存する
document.Save(@"C:\Files\svg-tSpan.svg");

SVG-Text-with-tspan-in-CSharp — C# で tspan を使用してテキストを SVG に変換します。

svg-tspan.svg イメージの内容を以下に示します。

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

C# の TextPath を使用した SVG テキスト

要素の形状に沿ってテキストをレンダリングし、テキストを要素で囲むこともできます。 href 属性を使用して要素への参照を設定できます。以下の手順に従って、テキストパスを使用してテキストを変換できます。

まず、SVGDocument クラスのインスタンスを作成します。
次に、ドキュメントのルート要素を取得します。
次に、SVGPathElement クラスオブジェクトを作成し、SetAttribute() メソッドを使用してさまざまな属性を設定します。
その後、AppendChild() メソッドを呼び出してルート要素に追加します。
次に、SVGTextElement クラスオブジェクトを作成します。
次に、SVGTextPathElement オブジェクトを初期化し、テキストコンテンツを設定します。
次に、SetAttribute() メソッドを使用して SVGPathElement をその href 属性に割り当てます。
次に、AppendChild() メソッドを呼び出して、SVGTextPathElement を SVGTextElement 要素に追加します。
その後、AppendChild() メソッドを使用して SVGTextElement をルート要素に追加します。
最後に、Save() メソッドを使用して出力 SVG 画像を保存します。

次のコードサンプルは、C# で textPath を使用してテキストを SVG に変換する方法を示しています。

// このコード例は、textPath を使用してテキストを SVG に追加する方法を示しています。
var document = new SVGDocument();

// ドキュメントのルート svg 要素を取得する
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG パス要素
var path1 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path1.SetAttribute("id", "path_1");
path1.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100");
path1.SetAttribute("fill", "transparent");

// ルート要素に SVG パスを追加
svgElement.AppendChild(path1);

// Another SVG パス要素
var path2 = (SVGPathElement)document.CreateElementNS(@namespace, "path");
path2.SetAttribute("id", "path_2");
path2.SetAttribute("d", "M 50 100 Q 25 10 180 100 T 350 100");
path2.SetAttribute("transform", "translate(0,75)");
path2.SetAttribute("fill", "transparent");

// ルート要素に SVG パスを追加
svgElement.AppendChild(path2);

// SVG テキスト要素
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// SVG テキスト パス要素を作成する
var textPath1 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath1.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath1.SetAttribute("href", "#path_1");

// SVG テキスト パスを SVG テキストに追加
text.AppendChild(textPath1);

// 別の SVG テキスト パス要素
var textPath2 = (SVGTextPathElement)document.CreateElementNS(@namespace, "textPath");
textPath2.TextContent = "Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.";
textPath2.SetAttribute("href", "#path_2");

// SVG テキスト パスを SVG テキストに追加
text.AppendChild(textPath2);

// ルートに SVG テキストを追加
svgElement.AppendChild(text);

// SVG を保存する
document.Save(@"C:\Files\svg-textPath.svg");

SVG-Text-with-textPath-in-CSharp — C# で textPath を持つテキストを SVG に変換します。

svg-textPath.svg 画像の内容を以下に示します。

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

C# で SVG テキストスタイルを適用する

以下の手順に従って、任意のテキストを SVG に追加できます。

まず、SVGDocument クラスのインスタンスを作成します。
次に、ドキュメントのルート要素を取得します。
次に、SVGTextElement クラスオブジェクトを作成します。
次に、SetAttribute() メソッドを使用してスタイル属性を設定します。
その後、AppendChild() メソッドを呼び出してルート要素に追加します。
最後に、Save() メソッドを使用して出力 SVG 画像を保存します。

次のコードサンプルは、C# で CSS スタイルを SVG テキストに適用する方法を示しています。

// このコード例は、テキストを SVG に追加し、CSS スタイル属性を適用する方法を示しています。
var document = new SVGDocument();

// ドキュメントのルート svg 要素を取得する
var svgElement = document.RootElement;

const string @namespace = "http://www.w3.org/2000/svg";

// SVG テキスト要素を定義する
var text = (SVGTextElement)document.CreateElementNS(@namespace, "text");

// 表示するテキストを定義する
text.TextContent = "The is a simple SVG text!";

// 各種属性を設定
text.SetAttribute("fill", "blue");
text.SetAttribute("x", "10");
text.SetAttribute("y", "30");

// スタイルを適用
text.SetAttribute("style", "font-weight:bold; font-style: italic; text-decoration: line-through; text-transform: capitalize;");

// ルートにテキストを追加する
svgElement.AppendChild(text);

// SVG として保存
document.Save(@"C:\Files\text-style.svg");

Apply-SVG-Text-Style-in-CSharp — C# で SVG テキストスタイルを適用します。

text-style.svg 画像の内容を以下に示します。

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</svg>

無料の一時ライセンスを取得する

無料の一時ライセンスを取得して、評価制限なしで Aspose.SVG for .NET を試すことができます。

結論

この記事では、次の方法を学びました。

新しい SVG イメージを作成します。
SVG テキスト要素を使用します。
SVG テキストをパスにレンダリングします。
SVG テキストの位置と塗りつぶし属性を設定します。
C# で SVG テキストのスタイル属性を設定します。

C# でテキストを SVG に変換する以外に、ドキュメントで Aspose.SVG for .NET の詳細を学び、API でサポートされているさまざまな機能を調べることができます。ご不明な点がございましたら、無料サポートフォーラムまでお気軽にお問い合わせください。

テキストを SVG に変換する C# API#

SVG テキストとは?#

C# を使用してテキストを SVG に変換する#

C# で TSpan を使用してテキストを SVG に変換する#

C# の TextPath を使用した SVG テキスト#

C# で SVG テキスト スタイルを適用する#

無料の一時ライセンスを取得する#

結論#

関連項目#