SVG có hình ảnh bên trong trong C# | PNG trong SVG | JPG ở dạng SVG

Đồ họa vectơ có thể mở rộng (SVG) là một định dạng hình ảnh mạnh mẽ có thể được sử dụng để tạo hình ảnh có chất lượng cao, có thể mở rộng cho web. Hình ảnh SVG được tạo bằng mã XML, giúp dễ dàng tạo và sửa đổi. Trong một số trường hợp nhất định, chúng tôi có thể cần nhúng các tài nguyên như hình ảnh PNG hoặc JPG vào SVG. Trong bài đăng trên blog này, chúng tôi sẽ chỉ cho bạn cách tạo SVG có hình ảnh bên trong bằng C#.

Bài viết này bao gồm các chủ đề sau:

  1. API C# để tạo SVG bằng hình ảnh bên trong
  2. Nhúng PNG vào SVG
  3. Nhúng SVG vào trong SVG
  4. Nhận giấy phép miễn phí
  5. Tài nguyên học tập miễn phí

API C# để tạo SVG với hình ảnh bên trong

Chúng tôi sẽ sử dụng Aspose.SVG for .NET để tạo SVG có hình ảnh bên trong. Nó cho phép các nhà phát triển làm việc với các tệp SVG trong các ứng dụng .NET. API cho phép tải, phân tích cú pháp, hiển thị, tạo và chuyển đổi tệp SVG thành các định dạng phổ biến mà không cần phụ thuộc vào phần mềm.

Vui lòng tải xuống DLL của API hoặc cài đặt nó bằng NuGet.

PM> Install-Package Aspose.SVG

Nhúng PNG vào SVG bằng C#

Chúng ta có thể dễ dàng nhúng hình ảnh bitmap vào trong đối tượng SVG bằng cách sử dụng SVG <image> phần tử. SVG <image> Phần tử có khả năng hiển thị hình ảnh ở nhiều định dạng khác nhau, chẳng hạn như đồ họa JPEG, PNG và thậm chí cả SVG. Các thuộc tính của <image> Phần tử xác định cách hiển thị bitmap. Các thuộc tính chính bao gồm:

  • x và y: Chúng biểu thị tọa độ của góc trên bên trái của hình ảnh.
  • chiều rộng và chiều cao: Chúng xác định chiều rộng và chiều cao của “cửa sổ” nơi hình ảnh sẽ được hiển thị. Cả hai thuộc tính này đều bắt buộc.
  • href và xlink:href: Các thuộc tính này trỏ đến URL của tệp hình ảnh.
  • bảo tồnAspectRatio: Thuộc tính này chi phối cách hình ảnh được chia tỷ lệ theo tỷ lệ.

Chúng ta có thể dễ dàng tạo một SVG có PNG bên trong bằng cách thực hiện theo các bước bên dưới:

  1. Chỉ định nội dung SVG dưới dạng chuỗi.
  2. Sau đó, tạo một thể hiện của lớp SVGDocument từ nội dung chuỗi.
  3. Cuối cùng, lưu hình ảnh bằng phương thức Save().

Mẫu mã sau đây cho biết cách nhúng hình ảnh PNG vào SVG bằng C#.

// Chỉ định nội dung SVG với hình ảnh PNG được nhúng.
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>";

// Khởi tạo tài liệu SVG bằng SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Lưu tài liệu vào một tệp có liệt kê SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Nhúng PNG vào SVG bằng C#

Nhúng PNG vào SVG bằng C#.

Nhúng SVG vào trong SVG bằng C#

Tương tự, chúng ta có thể tạo SVG có hình ảnh SVG bên trong bằng cách làm theo các bước được đề cập trước đó.

Mẫu mã sau đây cho biết cách nhúng hình ảnh SVG vào bên trong SVG bằng C#.

// Chỉ định nội dung SVG với hình ảnh SVG được nhúng.
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>";

// Khởi tạo tài liệu SVG bằng SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Lưu tài liệu vào một tệp có liệt kê SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Nhúng SVG vào trong SVG bằng C#

Nhúng SVG vào SVG bằng C#.

Nhận giấy phép miễn phí

Bạn có thể nhận giấy phép tạm thời miễn phí để dùng thử Aspose.SVG for .NET mà không bị giới hạn về đánh giá.

SVG có hình ảnh bên trong – Tài nguyên miễn phí

Bạn có thể tìm hiểu thêm về các tính năng khác nhau của thư viện bằng cách sử dụng các tài nguyên bên dưới:

Phần kết luận

Tóm lại, tạo hình ảnh SVG bằng hình ảnh nhúng bằng C# là một quá trình tương đối đơn giản. Bằng cách làm theo các bước trong hướng dẫn này, bạn có thể tạo hình ảnh SVG tùy chỉnh của riêng mình để sử dụng trên trang web hoặc trong ứng dụng của bạn. Bằng cách tận dụng Aspose.SVG for .NET, một thư viện SVG mạnh mẽ và linh hoạt, bạn có thể dễ dàng tạo hình ảnh SVG bằng hình ảnh nhúng có thể sử dụng trên mọi thiết bị. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn hỗ trợ miễn phí của chúng tôi.

Xem thêm