Scalable Vector Graphics (SVG) は、Web 用の高品質でスケーラブルな画像の作成に使用できる強力な画像形式です。 SVG 画像は XML コードを使用して作成されるため、作成と変更が簡単になります。場合によっては、PNG や JPG 画像などのリソースを SVG 内に埋め込む必要がある場合があります。このブログ投稿では、C# を使用して画像を含む SVG を作成する方法を説明します。
この記事では次のトピックについて説明します。
画像を含む SVG を作成するための C# API
Aspose.SVG for .NET を使用して、画像を含む SVG を作成します。これにより、開発者は .NET アプリケーションで SVG ファイルを操作できるようになります。この API を使用すると、ソフトウェアに依存せずに、SVG ファイルの読み込み、解析、レンダリング、作成、一般的な形式 への変換が可能になります。
API の DLL をダウンロードするか、NuGetを使用してインストールしてください。
PM> Install-Package Aspose.SVG
C# を使用して SVG に PNG を埋め込む
SVG を使用すると、SVG オブジェクト内にビットマップ画像を簡単に埋め込むことができます。<image>
要素。 SVG <image>
要素は、JPEG、PNG、さらには SVG グラフィックスなど、さまざまな形式で画像をレンダリングできます。 の属性<image>
要素はビットマップの表示方法を定義します。主な属性には次のようなものがあります。
- x と y: これらは画像の左上隅の座標を示します。
- 幅と高さ: 画像が表示される「ウィンドウ」の幅と高さを決定します。これらの属性は両方とも必須です。
- href および xlink:href: これらの属性は、画像ファイルの URL を指します。
- prepareAspectRatio: この属性は、画像を比例的に拡大縮小する方法を制御します。
以下の手順に従って、内部に PNG を含む SVG を簡単に作成できます。
- SVG コンテンツを文字列として指定します。
- その後、文字列コンテンツから SVGDocument クラスのインスタンスを作成します。
- 最後に、Save() メソッドを使用して画像を保存します。
次のコード サンプルは、C# を使用して SVG 内に PNG 画像を埋め込む方法を示しています。
// PNG 画像が埋め込まれた SVG コンテンツを指定します。
string content = "<svg height=\"500\" width=\"600\" xmlns=\"http://www.w3.org/2000/svg\">\r\n " +
"<circle cx=\"120\" cy=\"100\" r=\"90\" style=\"fill:blue; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7\" />" +
"<image href=\"https://www.aspose.cloud/templates/aspose/App_Themes/V3/images/svg/272x272/aspose_svg-for-net.png\" x=\"70\" y=\"50\" height=\"100\" width=\"100\" />\r\n \t" +
"<text x=\"40\" y=\"250\">Embedded PNG image</text>\r\n \t" +
"</svg>";
// SVGDocument を使用して SVG ドキュメントを初期化します。
SVGDocument document = new SVGDocument(content, ".");
// SVGSaveFormat 列挙を使用してドキュメントをファイルに保存します。
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
C# を使用して SVG を SVG 内に埋め込む
同様に、前述の手順に従って、内部に SVG 画像を含む SVG を作成できます。
次のコード サンプルは、C# を使用して SVG 内に SVG 画像を埋め込む方法を示しています。
// PNG 画像が埋め込まれた SVG コンテンツを指定します。
string documentContent = "<svg height=\"500\" width=\"500\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t" +
"<image href=\"https://docs.aspose.com/svg/net/navigation-inspection/shapes.svg\" x=\"250\" y=\"10\" height=\"350\" width=\"350\" />\r\n \t" +
"<text x=\"300\" y=\"250\">Embedded SVG image</text> \r\n" +
"</svg>";
// SVGDocument を使用して SVG ドキュメントを初期化します。
SVGDocument document = new SVGDocument(documentContent, ".");
// SVGSaveFormat 列挙を使用してドキュメントをファイルに保存します。
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
無料ライセンスを取得する
無料の一時ライセンスを取得して、評価制限なしで Aspose.SVG for .NET を試すことができます。
画像を含む SVG – 無料リソース
以下のリソースを使用して、ライブラリのさまざまな機能について詳しく学ぶことができます。
結論
結論として、C# を使用して画像が埋め込まれた SVG 画像を作成するプロセスは比較的簡単です。このチュートリアルの手順に従うことで、Web サイトやアプリケーションで使用できる独自のカスタム SVG 画像を作成できます。強力で汎用性の高い SVG ライブラリである Aspose.SVG for .NET を利用すると、あらゆるデバイスで使用できる画像が埋め込まれた SVG 画像を簡単に作成できます。不明な点がある場合は、無料サポート フォーラムまでお気軽にお問い合わせください。