C# 中帶有圖像的 SVG | SVG 中的 PNG | SVG 格式的 JPG

可縮放矢量圖形 (SVG) 是一種功能強大的圖像格式,可用於創建高質量、可縮放的 Web 圖像。 SVG 圖像是使用 XML 代碼創建的,這使得它們易於創建和修改。在某些情況下,我們可能需要在 SVG 中嵌入 PNG 或 JPG 圖像等資源。在這篇博文中,我們將向您展示如何使用 C# 創建內部包含圖像的 SVG。

本文涵蓋以下主題:

  1. C# API 創建內部圖像的 SVG
  2. 在 SVG 中嵌入 PNG
  3. 在 SVG 中嵌入 SVG
  4. 獲取免費許可證
  5. 免費學習資源

C# API 創建包含圖像的 SVG

我們將使用 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。
  • keepAspectRatio:此屬性控製圖像如何按比例縮放。

我們可以按照以下步驟輕鬆創建一個包含 PNG 的 SVG:

  1. 將 SVG 內容指定為字符串。
  2. 之後,從字符串內容創建 SVGDocument 類的實例。
  3. 最後,使用 Save() 方法保存圖像。

以下代碼示例演示如何使用 C# 將 PNG 圖像嵌入到 SVG 中。

// 指定嵌入 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 中嵌入 PNG

使用 C# 將 PNG 嵌入 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);
使用 C# 將 SVG 嵌入到 SVG 中

使用 C# 將 SVG 嵌入到 SVG 中。

獲取免費許可證

您可以獲得免費的臨時許可證來嘗試 Aspose.SVG for .NET,而不受評估限制。

內部帶有圖像的 SVG – 免費資源

您可以使用以下資源了解有關該庫的各種功能的更多信息:

結論

總之,使用 C# 創建嵌入圖像的 SVG 圖像是一個相對簡單的過程。通過遵循本教程中的步驟,您可以創建自己的自定義 SVG 圖像,以便在您的網站或應用程序中使用。通過利用 Aspose.SVG for .NET(一個強大且多功能的 SVG 庫),您可以輕鬆創建可在任何設備上使用的嵌入圖像的 SVG 圖像。如有任何疑問,請隨時通過我們的免費支持論壇與我們聯繫。

也可以看看