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

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

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

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

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

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

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

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

// Open a document you want to download inline SVG images from
using var document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all inline SVG images
var images = document.GetElementsByTagName("svg");

for (var i = 0; i < images.Length; i++)
{
    // Save every image to a local file system
    File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
    //Console.WriteLine(document.Images[i].OuterHTML);
}

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

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

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

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

// Open a document you want to download external SVGs from
using var document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all image elements
var images = document.GetElementsByTagName("img");

// Create a distinct collection of relative image URLs
var urls = images.Select(element => element.GetAttribute("src")).Distinct();

// Filter out non SVG images
var svgUrls = urls.Where(url => url.EndsWith(".svg"));

// Create absolute SVG image URLs
var absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));

foreach (var url in absUrls)
{
    // Create a downloading request
    using var request = new RequestMessage(url);

    // Download SVG image
    using var response = document.Context.Network.Send(request);

    // Check whether response is successful
    if (response.IsSuccess)
    {
        // Save SVG image to a local file system
        File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
    }
}

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

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

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