SVG із зображенням усередині в C# | PNG у SVG | JPG у SVG

Scalable Vector Graphics (SVG) – це потужний формат зображень, який можна використовувати для створення високоякісних масштабованих зображень для Інтернету. Зображення SVG створюються за допомогою коду XML, що полегшує їх створення та змінення. У деяких випадках нам може знадобитися вставити такі ресурси, як зображення PNG або JPG, у SVG. У цій публікації блогу ми покажемо вам, як створити 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 із вбудованими зображеннями, які можна використовувати на будь-якому пристрої. У разі будь-яких неясностей зв’яжіться з нами на нашому безкоштовному форумі підтримки.

Дивись також