Извлечь SVG с веб-сайта с помощью Java

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

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

SVG-графика на веб-страницах может быть встроена двумя способами: как inline (встроенный) SVG в HTML или как external (внешний) SVG, на который ссылаются по URL. В этой статье мы рассмотрим, как извлекать как встроенные, так и внешние SVG-файлы с помощью Aspose.HTML for Java API. С помощью этого подхода вы сможете автоматически собирать все SVG с веб-сайта, не копаясь в коде вручную. Давайте погрузимся в процесс и сделаем извлечение SVG легким!

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

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

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

1. С помощью конструктора HTMLDocument(Url) создайте экземпляр HTMLDocument, передав ему URL веб-страницы, содержащей встроенные SVG-изображения.
2. Вызовите метод getElementsByTagName(“img”), чтобы собрать все <svg> элементы, присутствующие в HTML-документе.
3. Создайте цикл для перебора каждого SVG-изображения в коллекции images.
4. Для каждого изображения в массиве используйте метод getOuterHTML(), чтобы получить содержимое SVG-элемента, а затем используйте метод FileHelper.writeAllText(), чтобы записать содержимое SVG в локальный файл .svg.

// How to extract inline SVG images from a webpage using Java

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

// Collect all inline SVG images
HTMLCollection images = document.getElementsByTagName("svg");

for (int i = 0; i < images.getLength(); i++) {
    // Save every image to a local file system
    FileHelper.writeAllText("{i}.svg", images.get_Item(i).getOuterHTML());
}

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

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

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

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

1. Создайте экземпляр класса HTMLDocument с помощью конструктора HTMLDocument(Url) и передайте URL сайта, с которого вы хотите извлечь внешние SVG-изображения.
2. Соберите все элементы <img> в HTML-документе с помощью метода getElementsByTagName("img").
3. Извлеките атрибут src из каждого элемента изображения с помощью метода getAttribute(“src”) и сохраните значения в Set.
4. Отфильтруйте только URL-адреса изображений .svg, проверив, заканчивается ли каждый URL-адрес на .svg, и добавьте их в новый список.
5. Создайте абсолютные URL-адреса SVG-изображений, используя класс Url и свойство BaseURI класса HTMLDocument.
6. Пройдитесь по абсолютным URL и создайте запрос с помощью класса RequestMessage для каждого SVG URL.
7. Отправьте каждый запрос с помощью document.getContext().getNetwork().send(request) и проверьте ответ на успех.
8. Наконец, если ответ успешный, используйте FileHelper.writeAllBytes() для сохранения содержимого SVG в локальной файловой системе.

// Download external SVG images from HTML using Java

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

// Collect all image elements
HTMLCollection images = document.getElementsByTagName("img");

// Create a distinct collection of relative image URLs
java.util.Set<String> urls = new HashSet<>();
for (Element element : images) {
    urls.add(element.getAttribute("src"));
}

// Filter out non SVG images
java.util.List<String> svgUrls = new ArrayList<>();
for (String url : urls) {
    if (url.endsWith(".svg")) {
        svgUrls.add(url);
    }
}
// Create absolute SVG image URLs
java.util.List<Url> absUrls = svgUrls.stream()
        .map(src -> new Url(src, document.getBaseURI()))
        .collect(Collectors.toList());

// foreach to while statements conversion
for (Url url : absUrls) {
    // Create a downloading request
    final RequestMessage request = new RequestMessage(url);

    // Download SVG image
    final ResponseMessage response = document.getContext().getNetwork().send(request);

    // Check whether response is successful
    if (response.isSuccess()) {
        String[] split = url.getPathname().split("/");
        String path = split[split.length - 1];

        // Save file to a local file system
        FileHelper.writeAllBytes($o(path), response.getContent().readAsByteArray());
    }
}

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

Aspose.HTML предоставляет набор бесплатных онлайн Веб-приложений HTML, включая конвертеры, слияния, SEO-инструменты, генераторы HTML-кода, утилиты URL и многое другое. Эти инструменты работают в любой операционной системе. Если вам нужно конвертировать или объединить файлы, извлечь веб-данные, сгенерировать HTML-код или проанализировать страницы на предмет SEO, вы можете сделать все это прямо в Интернете. Упростите свои повседневные задачи и повысьте производительность с помощью наших простых в использовании веб-приложений HTML – в любое время и в любом месте.