Извлечь SVG с веб-сайта – примеры C#

SVG – это формат векторной графики, разработанный в первую очередь для Интернета и часто используемый в HTML-документах. Основным преимуществом SVG является его непревзойденная способность масштабироваться до любого размера без ущерба для качества. Наряду с другими преимуществами, такими как программируемость, небольшой размер файла, стиль, интерактивность и многое другое, SVG может улучшить визуальную привлекательность и функциональность веб-страниц. Если вы дизайнер или разработчик, иногда вы предпочитаете получать изображения SVG с веб-сайта.

Извлечение SVG c веб-сайта не так проста, как может показаться. Если вы когда-либо использовали щелчок правой кнопкой мыши для сохранения или открытия изображения с веб-страницы, вы, вероятно, заметили, что файлы SVG сложно загрузить с веб-сайта. Иногда щелчок правой кнопкой мыши не позволяет открыть его в новой вкладке или сохранить. И что делать? Нужно ли смотреть на теги SVG и определять, где SVG начинается и заканчивается в HTML-коде веб-страницы? К счастью, вы можете использовать библиотеку Aspose.HTML для .NET для сохранения SVG с веб-сайта программно.

Изображения SVG в документах HTML бывают двух видов – встроенный SVG (Inline SVG) и внешний SVG (External SVG). В этой статье мы рассмотрим, как загрузить оба типа этих изображений с помощью Aspose.HTML для .NET API. Использование нашей библиотеки C# поможет вам загрузить все файлы SVG с любого веб-сайта. Это лучше, чем копаться и искать их вручную. Давай попробуем!

Извлечь SVG с веб-сайта – встроенный SVG

Встроенные изображения SVG (Inline SVG) – это элементы SVG <svg>, содержимое которых описывает изображение. Встроенный SVG относится к внедрению кода SVG непосредственно в код HTML, а не к ссылке на внешний файл SVG. Это популярный метод создания иконок, логотипов и других графических элементов для веб-сайтов.

Чтобы сохранить встроенные изображения SVG, мы найдем все элементы <svg> в документе HTML и используем OuterHTML для получения их содержимого. Итак, чтобы скачать SVG с веб-сайта, вам нужно сделать несколько следующих шагов:

Используйте конструктор HTMLDocument(Url) для создания экземпляра класса HTMLDocument и передайте ему URL-адрес веб-сайта, с которого вы хотите загрузить встроенные изображения SVG.
Используйте метод GetElementsByTagName("svg") для сбора всех элементов <svg> . Метод возвращает список элементов <svg> HTML-документа.
Создайте цикл для перебора каждого изображения SVG в массиве «images».
Для каждого изображения в массиве используйте свойство OuterHTML, чтобы получить содержимое элемента SVG и File.WriteAllText(), который записывает содержимое SVG в локальный файл.

 1using Aspose.Html;
 2using Aspose.Html.Net;
 3using System.IO;
 4using System.Linq;
 5...
 6    // Open a document you want to extract inline SVG images from
 7    using var document = new HTMLDocument("https://docs.aspose.com/svg/net/drawing-basics/svg-shapes/");
 8
 9    // Collect all inline SVG images
10    var images = document.GetElementsByTagName("svg");
11
12    for (var i = 0; i < images.Length; i++)
13    {
14        // Save every SVG image to a local file system
15        File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
16    }

Примечание. Некоторые файлы SVG могут быть защищены авторским правом, поэтому перед извлечением и использованием ознакомьтесь с условиями использования. Например, использование логотипа компании или других загруженных файлов SVG в ваших дизайн-проектах может рассматриваться как плагиат, и вы не должны этого делать. Возможно, было бы неплохо спросить разрешения у владельцев веб-сайтов, прежде чем использовать их файлы.

Извлечь SVG с веб-сайта – Внешний SVG

Внешний SVG (External SVG) – это файл SVG, хранящийся вне HTML-документа и загружаемый в документ с помощью, например, тега <img>. Отделение файлов SVG от HTML позволяет повторно использовать одно и то же изображение SVG в нескольких местах без дублирования кода, что делает веб-страницы более эффективными и простыми в обслуживании. Внешние изображения SVG представлены элементом <img>, который, в свою очередь, также может ссылаться на другие типы изображений, поэтому изображения SVG следует дополнительно фильтровать. Давайте посмотрим, как загрузить SVG с веб-сайта с помощью библиотеки Aspose.HTML для .NET:

Используйте конструктор HTMLDocument(Url) для создания экземпляра класса HTMLDocument и передайте ему URL-адрес веб-сайта, с которого вы хотите загрузить внешние SVG.
Используйте метод GetElementsByTagName("img") для сбора всех элементов <img> . Метод возвращает список элементов <img> HTML-документа.
Используйте метод Select() для создания отдельной коллекции относительных URL-адресов изображений и GetAttribute("src") для извлечения атрибута src каждого элемента <img>.
Чтобы отфильтровать изображения, отличные от SVG, используйте методы Where() и EndsWith(), чтобы проверить, заканчивается ли URL-адрес расширением .svg.
Создайте абсолютные URL-адреса изображений SVG, используя класс Url и BaseURI класса HTMLDocument.
Затем для каждого абсолютного URL создайте запрос с помощью класса RequestMessage.
Используйте метод документа Context.Network.Send(request) для отправки запроса. Ответ проверяется, чтобы убедиться, что он был успешным.
Наконец, если ответ был успешным, используйте метод File.WriteAllBytes(), чтобы сохранить SVG в локальный файл.

 1using Aspose.Html;
 2using Aspose.Html.Net;
 3using System.IO;
 4using System.Linq;
 5...
 6    // Open the document you want to extract external SVGs from
 7    using var document = new HTMLDocument("https://docs.aspose.com/html/net/message-handlers/");
 8
 9    // Collect all image elements
10    var images = document.GetElementsByTagName("img");
11
12    // Create a distinct collection of relative image URLs
13    var urls = images.Select(element => element.GetAttribute("src")).Distinct();
14
15    // Filter out non SVG images
16    var svgUrls = urls.Where(url => url.EndsWith(".svg"));
17
18    // Create absolute SVG image URLs
19    var absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));
20
21    foreach (var url in absUrls)
22    {
23        // Create a extracting request
24        using var request = new RequestMessage(url);
25
26        // Extract SVG image
27        using var response = document.Context.Network.Send(request);
28
29        // Check whether response is successful
30        if (response.IsSuccess)
31        {
32            // Save SVG image to local file system
33            File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
34        }
35    }

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

Вы можете скачать полные примеры C# и файлы данных с GitHub.

Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов HTML-кода, инструментов URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные дела и сделать свой рабочий процесс безупречным!

Извлечь изображения с веб-сайта Веб-доступность