SVG с изображением внутри на C# | PNG в формате SVG | JPG в SVG

Масштабируемая векторная графика (SVG) — это мощный формат изображений, который можно использовать для создания высококачественных масштабируемых изображений для Интернета. Изображения SVG создаются с использованием кода XML, что упрощает их создание и изменение. В некоторых случаях нам может потребоваться встроить в SVG такие ресурсы, как изображения PNG или JPG. В этом сообщении блога мы покажем вам, как создать SVG с изображением внутри, используя C#.

В этой статье рассматриваются следующие темы:

  1. C# API для создания SVG с изображением внутри
  2. Встроить PNG в SVG
  3. Встроить SVG внутрь SVG
  4. Получить бесплатную лицензию
  5. Бесплатные учебные ресурсы

C# API для создания SVG с изображением внутри

Мы будем использовать Aspose.SVG for .NET для создания SVG с изображением внутри. Это позволяет разработчикам работать с файлами SVG в приложениях .NET. API позволяет загружать, анализировать, отображать, создавать и конвертировать файлы SVG в популярные форматы без каких-либо программных зависимостей.

Пожалуйста, загрузите DLL API или установите ее с помощью NuGet.

PM> Install-Package Aspose.SVG

Встройте PNG в SVG с помощью C#.

Мы можем легко вставлять растровые изображения в объект SVG, используя SVG <image> элемент. SVG <image> Элемент способен отображать изображения в различных форматах, таких как JPEG, PNG и даже графика SVG. Атрибуты <image> Элемент определяет, как должно отображаться растровое изображение. К основным атрибутам относятся:

  • x и y: обозначают координаты верхнего левого угла изображения.
  • ширина и высота: они определяют ширину и высоту «окна», в котором будет отображаться изображение. Оба эти атрибута являются обязательными.
  • href и xlink:href: эти атрибуты указывают на URL-адрес файла изображения.
  • saveAspectRatio: этот атрибут управляет пропорциональным масштабированием изображения.

Мы можем легко создать SVG с PNG внутри, выполнив следующие действия:

  1. Укажите содержимое SVG в виде строки.
  2. После этого создайте экземпляр класса SVGDocument из содержимого строки.
  3. Наконец, сохраните изображение с помощью метода Save().

В следующем примере кода показано, как встроить изображение PNG в SVG с помощью C#.

// Укажите содержимое SVG со встроенным изображением PNG.
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>";

// Инициализируйте документ SVG с помощью SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Сохраните документ в файл с перечислением SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Встройте PNG в SVG с помощью C#.

Встраивайте PNG в SVG с помощью C#.

Встройте SVG внутри SVG с помощью C#.

Точно так же мы можем создать SVG с изображением SVG внутри, выполнив шаги, упомянутые ранее.

В следующем примере кода показано, как внедрить изображение SVG в SVG с помощью C#.

// Укажите содержимое SVG со встроенным изображением PNG.
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>";

// Инициализируйте документ SVG с помощью SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Сохраните документ в файл с перечислением SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Встройте SVG внутри SVG с помощью C#.

Встраивайте SVG внутрь SVG с помощью C#.

Получите бесплатную лицензию

Вы можете получить бесплатную временную лицензию, чтобы попробовать Aspose.SVG for .NET без ограничений ознакомительной версии.

SVG с изображением внутри — бесплатные ресурсы

Вы можете узнать больше о различных функциях библиотеки, используя ресурсы ниже:

Заключение

В заключение, создание изображений SVG со встроенными изображениями с использованием C# — относительно простой процесс. Следуя инструкциям этого руководства, вы сможете создавать свои собственные изображения SVG, которые можно будет использовать на своем веб-сайте или в своих приложениях. Используя Aspose.SVG for .NET, мощную и универсальную библиотеку SVG, вы можете легко создавать изображения SVG со встроенными изображениями, которые можно использовать на любом устройстве. В случае возникновения каких-либо неясностей, пожалуйста, свяжитесь с нами на нашем форуме бесплатной поддержки.

Смотрите также